通过wfs方式向后台geoserver请求矢量数据,然后在前端通过vectorlayer展示出来,增强交互效果。
function getParkingLayerFunc(mapUrl,parkingLayerName){
//获取该坐标系下地图边界
var projectionExtent = ****.projection.getExtent();
var namespace = ****.mapSpace;
//wfs请求获取矢量图层gml数据信息
****.vectorSource = new ol.source.Vector({
loader : function(resolution, projection) {
var dataUrl = mapUrl+'/geoserver/wfs?'
+ 'service=WFS&request=GetFeature&'
+ 'version=1.1.0&typename='
+namespace
+ ':'
+ parkingLayerName;
$.ajax({
url : dataUrl
}).done(function(response) {
var format = new ol.format.WFS({
featureNS : 'http://www.'+namespace+'.com',
featureType : parkingLayerName
});
var features = format.readFeatures(response,
{featureProjection: projection}
);
****.vectorSource.addFeatures(features);
});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 23
}))
});
var getText = function(feature, resolution) {
var type = "normal";
var maxResolution = 6.705522537231445e-7;
var text = feature.get('number');
if (resolution > maxResolution) {
text = '';
} else if (type == 'hide') {
text = '';
} else if (type == 'shorten') {
text = text.trunc(12);
} else if (type == 'wrap') {
text = stringDivider(text, 16, '\n');
}
return text;
};
var createPolygonStyleFunction = function(){
return function(feature,resolution){
var style = new ol.style.Style({
fill : new ol.style.Fill({
color : ****.parkFillColor
}),
stroke : new ol.style.Stroke({
color : ****.parkBorderColor,
width : 1
}),
text:createTextStyle(feature,resolution)
});
return [style];
}
};
var createTextStyle = function(feature, resolution) {
var align = "center";
var baseline = "middle";
var size = "14px";
var offsetX = 0;
var offsetY = 0;
var weight = "bold";
var rotation = feature.get('rotation');
var font = weight + ' ' + size + ' ' + "Arial";
var fillColor = 'black';
var outlineColor = 'black';
var outlineWidth = 1;
return new ol.style.Text({
textAlign: align,
textBaseline: baseline,
font: font,
text: getText(feature, resolution),
fill: new ol.style.Fill({color: fillColor}),
stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
offsetX: offsetX,
offsetY: offsetY,
rotation: rotation
});
};
// 构建图层
var parkingLayer = new ol.layer.Vector({
source : ****.vectorSource,
style : createPolygonStyleFunction(),
name:'tingchewei'
});
//获取地图对象
var map = ****.getMap();
console.info(parkingLayer);
//添加图层
map.addLayer(parkingLayer);
}