openlayers2 wfs方式加载矢量图层

简介:

在地图中为了增强交互效果,需要加载一层矢量地图。如何通过请求wfs的方式加载矢量地图呢?

function getParkingLayerFunc(mapUrl,parkingLayerName,onComplete){
	//获取地图对象
	var map = ****.getMap();
	
	//矢量图层默认状态下的style
	var defaultStyle = new OpenLayers.Style({
		'fontColor' : '#000000',
		'rotation': 90,
		'strokeWidth' : 1,
		'strokeOpacity' : .5,
		'strokeColor' : ****.parkBorderColor,
		'fillColor' : ****.parkFillColor,
		'fillOpacity' : 1
	},{
	    rules: [
	            new OpenLayers.Rule({
	                maxScaleDenominator: 1690,
	                symbolizer: {
	                    pointRadius: 7,
	                    'label' : ''
	                }
	            }),
	            new OpenLayers.Rule({
	            	maxScaleDenominator: 800,
	                symbolizer: {
	                	'label' : '${number}',
	                    'fontSize': "7px"
	                }
	            }),
	            new OpenLayers.Rule({
	            	maxScaleDenominator: 200,
	                symbolizer: {
	                	'label' : '${number}',
	                    'fontSize': "20px"
	                }
	            })
	        ]
	    });
	
	//矢量图层选中状态下的style
	var selectedStyle = new OpenLayers.Style({
		'fontColor' : '#000000',
		'strokeWidth' : 1,
		'strokeOpacity' : .5,
		'strokeColor' : "#000000",
		'fillColor' : ****.focusedColor,
		'fillOpacity' : 1
	},{
	    rules: [
	            new OpenLayers.Rule({
	            	maxScaleDenominator: 1690,
	                symbolizer: {
	                    pointRadius: 7,
	                    'label' : ''
	                }
	            }),
	            new OpenLayers.Rule({
	                maxScaleDenominator: 800,
	                symbolizer: {
	                	'label' : '${number}',
	                    fontSize: "7px"
	                }
	            }),
	            new OpenLayers.Rule({
	            	maxScaleDenominator: 200,
	                symbolizer: {
	                	'label' : '${number}',
	                    'fontSize': "20px"
	                }
	            })
	        ]
	    });
	
	// 建立矢量图层的style
	var hotStyle = new OpenLayers.StyleMap({
		"default" : defaultStyle,
		"select" : selectedStyle
	});

	var wfsParams = {
			service : 'WFS',
			version : '1.1.0',
			request : 'GetFeature',
			typeName : ****.mapSpace + ':' + parkingLayerName,
			maxFeatures : '1000',
			srsName : 'EPSG:4326',
			outputFormat : 'text/javascript',
			format_options : 'callback:parseResponse'
		};
	
	$._ajax({
		url : mapUrl+'/geoserver/parking/wfs',
		data : $.param(wfsParams),
		type : 'GET',
		jsonpCallback : 'parseResponse',
		dataType : 'jsonp',
		success : function(data) {
			
			****.parkingLayer = new OpenLayers.Layer.Vector("tingchewei", {
							eventListeners : {
//								'featureselected' : function(evt) {
//									
//								},
								'featureunselected' : function(evt) {
								}
							},
							styleMap : hotStyle
			});
			
			****.parkingLayerFeature = new OpenLayers.Format.GeoJSON({}).read(data);
			
			****.selectedParkingFeature = new OpenLayers.Format.GeoJSON({}).read(data);
			****.parkingLayer.addFeatures(****.parkingLayerFeature, {});
			
//			****.parkingSelectControl = new OpenLayers.Control.SelectFeature(
//					****.parkingLayer, {
//						clickout: true, 
//			            toggle: true,
//			            multiple: false, 
//			            hover : false,
//						//autoActivate : true,
//						toggleKey: "ctrlKey", // ctrl key removes from selection
//		                multipleKey: "shiftKey", // shift key adds to selection
//		                box: true
//					});
//			map.addControl(****.parkingSelectControl);
			//添加矢量矢量图层
			map.addLayer(****.parkingLayer);
			
			if(onComplete){
				onComplete();
			}
		}
	});
}


相关文章
openlayers+geoserver+wms实现空间查询,属性查询
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81530228 openlayer...
3514 0
|
4月前
|
JSON 定位技术 API
谷歌地图接口Google Maps APIs中地图样式设计配置调整与JSON或URL导出
谷歌地图接口Google Maps APIs中地图样式设计配置调整与JSON或URL导出
|
JSON 小程序 定位技术
Google Maps APIs地图样式的设计与导出方法
本文介绍在谷歌地图API(Google Maps APIs)中,设计地图样式并将设计好的样式通过JSON或URL导出的方法~
215 1
Google Maps APIs地图样式的设计与导出方法
|
JSON JavaScript API
geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API+Geoserver开发过程中解决Geoserver图层属性查询的一个方案。
1253 0
|
Web App开发
【视频】自然框架之分页控件的使用方法(二) 下载、DLL说明和web.config的设置
    上次说的是QuickPager分页控件的PostBack的使用方式,也提供了源码下载。但是有些人下载之后发现有一大堆的文件夹,还有一大堆的DLL,到底要用哪个呀?不会都要用吧。     当然不需要全都引用了,只需要引用三个DLL就可以了。
1081 0
|
定位技术
openlayers加载bing地图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82961448 openlaye...
1440 0
openlayers加载动态ArcGIS服务
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82853801 openlaye...
1926 0
openlayers5之加载KML数据
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81989496 openlayer...
1395 0
openlayers+geoserver ImageWMS过滤动态刷新图层
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81530249 openlayer...
1804 0
openlayer2 三:加载geoserver图层
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/80755886 1.
1359 0