簡介：使用Openlayers5.3,通過Geoserver實現wfs服務矢量的查詢

參考官方例子：https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html

我的Geoserver工作區截圖如下，命名空間URI可以自定義，后面要用。

屬性查詢代碼如下：

//首先定義一個空的矢量圖層，設置樣式并添加到當前map中var vectorSource = new ol.source.Vector;var vector = new ol.layer.Vector({source: vectorSource,style: new ol.style.Style({fill: new ol.style.Fill({color: 'white'}),stroke:new ol.style.Stroke({color: 'red',width:1})})});map.addLayer(vector);//設置查詢參數與條件var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:3857',//坐標系統featureNS: 'http://geoserver.org/nw',//命名空間 URIfeaturePrefix: 'nationalwater',//工作區名稱featureTypes: ['nationalwater:01fir'],//查詢圖層，可以是同一個工作區下多個圖層，逗號隔開outputFormat: 'application/json',filter: ol.format.filter.equalTo("RS_CODE1","110109000001")//前者是屬性名，后者是對應值});fetch('http://localhost:8081/geoserver/' + 'wfs', {//geoserver wfs地址如localhost:8080/geoserver/wfs，我是8081method: 'POST',body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features = new ol.format.GeoJSON().readFeatures(json);vectorSource.addFeatures(features);map.getView().fit(vectorSource.getExtent());//縮放到查詢出的feature});

空間查詢的代碼以Intersect為例。geometry為你希望與之做查詢的圖層要素的幾何，可由 feature.getGeomtry()獲得 （feature可由YourLayer.getSource().getFeatures() 獲得）

filter: ol.format.filter.intersects(//查詢過濾條件'the_geom',//geometry//)

更多filter請參考官方文檔 https://openlayers.org/en/latest/apidoc/module-ol_format_filter.html

總結

以上是生活随笔為你收集整理的Openlayers5 + Geoserver 实现wfs的属性查询与空间查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。