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,WFS,矢量图层)