通过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); }