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