openlayers+geoserver

• 從發(fā)布地圖到點(diǎn)擊查詢
• • 安裝geoserver
  • 打開geoserver跨域權(quán)限
  • 發(fā)布shp要素地圖
  • • 1.創(chuàng)建工作區(qū)
    • 2.添加數(shù)據(jù)
    • 3.發(fā)布圖層
    • 4.查看圖層
  • 屬性查詢
  • 點(diǎn)擊查詢

從發(fā)布地圖到點(diǎn)擊查詢

安裝geoserver

1.安裝geoserver，我這里提供了geoserver2.19.2版本的下載鏈接 geoserver.
2.下載以后解壓，點(diǎn)擊bin目錄中的startup.bat啟動(dòng)服務(wù)。

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

打開geoserver跨域權(quán)限

如果使用本機(jī)，請(qǐng)求geoserver訪問時(shí)會(huì)報(bào)跨域問題，解決方法為找到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放在服務(wù)器上，其他文章所說(shuō)的下載一些jar文件放入webapps\geoserver\WEB-INF\lib其實(shí)并沒有什么用。

發(fā)布shp要素地圖

發(fā)布圖層前要先將shp文件準(zhǔn)備好，盡量不要放在桌面即可

1.創(chuàng)建工作區(qū)

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

2.添加數(shù)據(jù)

選擇Shapefile發(fā)布數(shù)據(jù)，工作區(qū)，選擇自己剛才創(chuàng)建的，在DBF的字符集首選UTF-8，不然之后查詢屬性時(shí)，會(huì)顯示亂碼。點(diǎn)擊保存以后點(diǎn)擊發(fā)布，會(huì)來(lái)到圖層頁(yè)面

3.發(fā)布圖層

注意使用的坐標(biāo)系，如果不是4326，可能在openlayers中顯示會(huì)出現(xiàn)錯(cuò)誤。
在發(fā)布中可以修改圖例的樣式

4.查看圖層

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

屬性查詢

屬性查詢首選openlayers官網(wǎng)wfs-getfeature.，主要使用的圖層為VectorLayer ，數(shù)據(jù)層為vectorSource

//先創(chuàng)建一個(gè)查詢條件 const featureRequest = new WFS().writeGetFeature({srsName: "EPSG:3857", //這里的EPSG不要改為4326，可能無(wú)法顯示featureNS: "www.test.com", //這里是工作空間中的命名空間urlfeaturePrefix: "osm", //這里是oms是為了能夠訪問屬性featureTypes: ["test"], //你要查詢的圖層outputFormat: "application/json", //數(shù)據(jù)返回格式filter: equalToFilter("LANDOWNER", 's') //查詢的屬性與查詢的值 }); //發(fā)送請(qǐng)求，使用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()//第二次查詢清楚第一次查詢結(jié)果this.vectorSource.addFeatures(features);this.map.getView().fit(this.vectorSource.getExtent()); //查詢出數(shù)據(jù)以后跳轉(zhuǎn)到目標(biāo)位置 });

點(diǎn)擊查詢

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

this.map.on("click", this.mapClick); //下面是點(diǎn)擊觸發(fā)的函數(shù) 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獲取點(diǎn)擊層的要素fetch(url, {method: "GET"}).then(function(response) {return response.json();}).then(json => {// 此處添加用戶信息彈窗if (json.numberReturned) {console.log(json.features[0].properties);}});}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。