API/wfsBuffer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../lib/css/Map5.min.css">
<script type="text/javascript" src="../lib/Map5.min.js"></script>

<style type="text/css">
	body{
		margin: 0px;
	}
</style>
<script type="text/javascript">
	// 地图变量
	var mapObj = null;
	function  init(){
		
		// 地图的范围
		var extent = new GeoBeans.Envelope(-180,-90,180,90);
		
		// 地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
		mapObj = new GeoBeans.Map("mapDiv","map",extent,4326);
		if(mapObj == null){
			return;
		}
		
		// 定义一个QuadServer图层，作为底图，第一个参数为图层名称，第二个参数为QuadServer地址
		var layer = new GeoBeans.Layer.QSLayer("base","/QuadServer/maprequest?services=world_vector");

		// 添加图层
		mapObj.addLayer(layer);

		// 设置中心点
		var center = new GeoBeans.Geometry.Point(0,0);	
		mapObj.setCenter(center);

		// 设置级别
		mapObj.setLevel(2);	

		var server = "/geoserver/radi/ows?";
		// 增加country图层
		var countryLayer = new GeoBeans.Layer.WFSLayer("country", //在地图中的名称
											server, //服务器
											"radi:country_2", //图层在geoserver的名称
											"GML2"); // 格式
		var countryStyle = createCountryStyle();
		countryLayer.setStyle(countryStyle);
		mapObj.addLayer(countryLayer);


		// 增加rivers图层
		var riversLayer = new GeoBeans.Layer.WFSLayer("rivers", //在地图中的名称
											server, //服务器
											"radi:rivers_2", //图层在geoserver的名称
											"GML2"); // 格式
		var riversStyle = createRiversStyle();
		riversLayer.setStyle(riversStyle);
		mapObj.addLayer(riversLayer);

		// 增加cities图层
		var citiesLayer = new GeoBeans.Layer.WFSLayer("cities", //在地图中的名称
											server, //服务器
											"radi:cities_2", //图层在geoserver的名称
											"GML2"); // 格式
		mapObj.addLayer(citiesLayer);
		var citiesStyle = createCitiesStyle();
		citiesLayer.setStyle(citiesStyle);

		// 绘图
		mapObj.draw();
	}


	function createCitiesStyle(){
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		symbolizer.size = 6;
		symbolizer.fill.color.set(255, 126, 0,1);
		symbolizer.stroke.color.set(255,255, 0,1);
		rule.symbolizer = symbolizer;
		style.addRule(rule);
		return style;
	}

	function createCountryStyle(){
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		symbolizer.size = 6;
		symbolizer.fill.color.set(255, 0, 0,0.6);
		symbolizer.stroke.color.set(0,255, 0,0.6);
		rule.symbolizer = symbolizer;
		style.addRule(rule);
		return style;
	}

	function createRiversStyle(){
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
		symbolizer.stroke.color.set(0,0,255,0.6);
		symbolizer.stroke.width = 3;
		rule.symbolizer = symbolizer;
		style.addRule(rule);
		return style;
	}

	function onCitiesBuffer_circle(){

		// 圆缓冲区

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		var symbol = new GeoBeans.Symbol();
		symbol.icon = "./images/marker.png";
		symbolizer.symbol = symbol;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置返回的最大个数
		var maxFeatures = 5;

		// 3、查询圆缓冲区
		// a、查询的图层名称
		// b、查询结果的样式
		// c、回调函数，返回查询结果
		// d、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferCircle("cities",style,getBuffer_callback,maxFeatures);
	}

	function onCitiesBuffer_line(){

		// 线缓冲区

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
		var symbol = new GeoBeans.Symbol();
		symbol.icon = "./images/marker.png";
		symbolizer.symbol = symbol;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置缓冲区的距离
		var distance = 6;

		// 3、设置返回的最大个数
		var maxFeatures = null;

		// 线缓冲区	
		// 查询圆缓冲区
		// a、查询的图层名称
		// b、缓冲区的距离
		// c、查询结果的样式
		// d、回调函数，返回查询结果
		// e、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferLine("cities",distance,style,getBuffer_callback,maxFeatures);
	}


	// 圆缓冲区
	function onRiversBuffer_circle(){

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
		symbolizer.stroke.color.set(0,0,255,0.6);
		symbolizer.stroke.width = 6;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置返回的最大个数
		var maxFeatures = null;

		// 3、查询圆缓冲区
		// a、查询的图层名称
		// b、查询结果的样式
		// c、回调函数，返回查询结果
		// d、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferCircle("rivers",style,getBuffer_callback,maxFeatures);
	}


	// 线缓冲区
	function onRiversBuffer_line(){

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.LineSymbolizer();
		symbolizer.stroke.color.set(0,0,255,0.6);
		symbolizer.stroke.width = 6;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置缓冲区的距离
		var distance = 6;

		// 3、设置返回的最大个数
		var maxFeatures = null;

		// 线缓冲区	
		// 查询圆缓冲区
		// a、查询的图层名称
		// b、缓冲区的距离
		// c、查询结果的样式
		// d、回调函数，返回查询结果
		// e、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferLine("rivers",distance,style,getBuffer_callback,maxFeatures);
	}


	// 圆缓冲区
	function onCountryBuffer_circle(){

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();
		symbolizer.fill.color.set(0, 255, 0,0.6);
		symbolizer.stroke.color.set(255, 0, 0,0.6);
		symbolizer.stroke.width = 1;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置返回的最大个数
		var maxFeatures = null;

		// 3、查询圆缓冲区
		// a、查询的图层名称
		// b、查询结果的样式
		// c、回调函数，返回查询结果
		// d、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferCircle("country",style,getBuffer_callback,maxFeatures);
	}


	// 线缓冲区
	function onCountryBuffer_line(){

		// 1、设置返回结果的样式
		var style = new GeoBeans.Style.FeatureStyle();
		var rule = new GeoBeans.Rule();
		var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();
		symbolizer.fill.color.set(0, 255, 0,0.6);
		symbolizer.stroke.color.set(255, 0, 0,0.6);
		symbolizer.stroke.width = 1;
		rule.symbolizer = symbolizer;
		style.addRule(rule);

		// 2、设置缓冲区的距离
		var distance = 6;

		// 3、设置返回的最大个数
		var maxFeatures = null;


		// 线缓冲区	
		// 查询圆缓冲区
		// a、查询的图层名称
		// b、缓冲区的距离
		// c、查询结果的样式
		// d、回调函数，返回查询结果
		// e、查询结果的个数，如果不设定则为所有结果
		mapObj.queryByBufferLine("country",distance,style,getBuffer_callback,maxFeatures);	
	}

	function getBuffer_callback(features){
		if(!$.isArray(features)){
			return;
		}
		$("#result span").html(features.length);
	}

	function endQueryBuffer(){
		// 停止查询
		mapObj.endQuery();
	}
</script>
<title>Map5 -- WFS图层</title>
<body onload="init()">
	<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
	<div id="mapDiv" style="height:600px;width:100%;position:absolute;top:120px;">
	</div>
	<span>点图层：</span>
	<button onclick="onCitiesBuffer_circle()">圆缓冲区</button>
	<button onclick="onCitiesBuffer_line()">线缓冲区</button>
	<!-- <button onclick="onCitiesBuffer_polygon()">面缓冲区</button> -->
	
	<br/>
	<span>线图层：</span>
	<button onclick="onRiversBuffer_circle()">圆缓冲区</button>
	<button onclick="onRiversBuffer_line()">线缓冲区</button>
	<br/>
	<span>面图层：</span>
	<button onclick="onCountryBuffer_circle()">圆缓冲区</button>
	<button onclick="onCountryBuffer_line()">线缓冲区</button>

	<br/>
	<button onclick="endQueryBuffer()">停止查询</button>
	<div id="result">
		返回的结果个数：<span></span>
	</div>
</body>
	