在地图中为了增强交互效果,需要加载一层矢量地图。如何通过请求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(); } } }); }