在做市情监测平台的社区人口时,需要用鼠标点击面状要素,弹出Popup并高亮显示选择的面状要素。这就涉及到 将geoserver的WFS 服务返回的json结果转换为features。
Openlayers中有 GeoJSON()函数,可以满足。
官方示例:https://openlayers.org/en/latest/examples/geojson.html
代码:
import {GeoJSON} from 'ol/format';
const url='http://localhost:8088/geoserver/geomonitor/ows? service=WFS&version=1.0.0&request=GetFeature&typename='+this.selectedValue+'&outputFormat=application/json&srsname=EPSG:3857&filter=<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>'+geom+'</PropertyName><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>'+extent+'</gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></Intersects></Filter>';
this.http.get(url)
.subscribe(data=>{
this.setVector(data);
})
///设置选中填充面
setVector(data){
data['features'].forEach(element => {
this.mapService.source.addFeatures(new GeoJSON().readFeatures(element));
});
this.mapService.vectorLayer.setSource(this.mapService.source);
this.map.addLayer(this.mapService.vectorLayer);
}