openlayers+geoserver

• 從發布地圖到點擊查詢
• • 安裝geoserver
  • 打開geoserver跨域權限
  • 發布shp要素地圖
  • • 1.創建工作區
    • 2.添加數據
    • 3.發布圖層
    • 4.查看圖層
  • 屬性查詢
  • 點擊查詢

從發布地圖到點擊查詢

安裝geoserver

1.安裝geoserver，我這里提供了geoserver2.19.2版本的下載鏈接 geoserver.
2.下載以后解壓，點擊bin目錄中的startup.bat啟動服務。

3.注意8080端口不要被占用，很多vue項目的端口也是8080，注意改為8081。
4.進入localhost:8080/geoserver/web，初始賬戶/密碼為admin/geoserver,后期可修改。

打開geoserver跨域權限

如果使用本機，請求geoserver訪問時會報跨域問題，解決方法為找到geoserver文件中的webapps\geoserver\WEB-INF\web.xml,打開后使用查詢，搜索cross-origin打開代碼

<filter><filter-name>cross-origin</filter-name><filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class><init-param><param-name>chainPreflight</param-name><param-value>false</param-value></init-param><init-param><param-name>allowedOrigins</param-name><param-value>*</param-value></init-param><init-param><param-name>allowedMethods</param-name><param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value></init-param><init-param><param-name>allowedHeaders</param-name><param-value>*</param-value></init-param></filter>//下面還有一段代碼<filter-mapping><filter-name>cross-origin</filter-name><url-pattern>/*</url-pattern></filter-mapping>

最好是將geoserver放在服務器上，其他文章所說的下載一些jar文件放入webapps\geoserver\WEB-INF\lib其實并沒有什么用。

發布shp要素地圖

發布圖層前要先將shp文件準備好，盡量不要放在桌面即可

1.創建工作區

name可以隨便取，命名空間url也是，命名空間url只是方便后面使用圖層時建立連接

2.添加數據

選擇Shapefile發布數據，工作區，選擇自己剛才創建的，在DBF的字符集首選UTF-8，不然之后查詢屬性時，會顯示亂碼。點擊保存以后點擊發布，會來到圖層頁面

3.發布圖層

注意使用的坐標系，如果不是4326，可能在openlayers中顯示會出現錯誤。
在發布中可以修改圖例的樣式

4.查看圖層

在Layer Preview中點擊對應圖層就可查看樣式，點和線的wms可能在openlayers中顯示沒有,如果屬性中出現亂碼就是在添加數據的時候沒有選擇UTF-8，我參考其他博主可能也是(GBK,GN2312)

屬性查詢

屬性查詢首選openlayers官網wfs-getfeature.，主要使用的圖層為VectorLayer ，數據層為vectorSource

//先創建一個查詢條件 const featureRequest = new WFS().writeGetFeature({srsName: "EPSG:3857", //這里的EPSG不要改為4326，可能無法顯示featureNS: "www.test.com", //這里是工作空間中的命名空間urlfeaturePrefix: "osm", //這里是oms是為了能夠訪問屬性featureTypes: ["test"], //你要查詢的圖層outputFormat: "application/json", //數據返回格式filter: equalToFilter("LANDOWNER", 's') //查詢的屬性與查詢的值 }); //發送請求，使用fetch和axios都可以 fetch("http://59.110.136.223:8080/geoserver/xhk/wfs", {method: "POST",body: new XMLSerializer().serializeToString(featureRequest) }).then(function(response) {return response.json(); }).then(json => {const features = new GeoJSON().readFeatures(json);this.vectorSource.clear()//第二次查詢清楚第一次查詢結果this.vectorSource.addFeatures(features);this.map.getView().fit(this.vectorSource.getExtent()); //查詢出數據以后跳轉到目標位置 });

點擊查詢

先要綁定map的點擊事件，我采用的vue，所以將map綁定在this上，使用時注意作用域。

this.map.on("click", this.mapClick); //下面是點擊觸發的函數 mapClick(evt) {console.log("mapClick");var viewResolution = this.map.getView().getResolution();var url = this.tileLayer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, "EPSG:3857", {INFO_FORMAT: "application/json"});// 使用getFeatureInfoUrl獲取點擊層的要素fetch(url, {method: "GET"}).then(function(response) {return response.json();}).then(json => {// 此處添加用戶信息彈窗if (json.numberReturned) {console.log(json.features[0].properties);}});}

總結

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

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