心血來潮,花1小時安裝軟件寫代碼+複習api,順便熟悉一波wmscss
再次強化認知了wms獲取要素的能力沒有wfs強,有待考究html
原文連接(轉載請聲明@秋意正寒 博客園/知乎/B站/csdn/小專欄):http://www.javashuo.com/article/p-veankhoq-ma.html前端
心血來潮,本機除了postgresql/postgis安裝好了併發布了幾個4326座標的廣東數據,安裝了node環境以外,其餘什麼都沒準備。node
忽然就想用ol6+node環境+parcel打包,經過geoserver發佈postgis數據並實現前端返回單擊點位的行政區信息。es6
分析一下需求:web
下載tomcat9_windows_64bit.gz,解壓完事。配置新端口爲8095,幹掉webapps下不須要的app。sql
使用windows服務的方式啓動tomcat。數據庫
下載2.16.x最新版war包,丟到webapps下,自動解壓(請勿解壓後刪除war包!!!)npm
若是沒啓動起來,請稍等一下子,或者手動重啓tomcat服務。手動重啓會在「stopping」那卡一下子,等着就好了。windows
在geoserver.war解壓的app目錄下,找到WEB-INF文件夾,找到web.xml,找到CORS的filter和filter-map標籤,解註釋它們:
、
這兩段配置若是是2.15以上的geoserver,在web.xml文檔裏默認是註釋的。
在WEB-INF目錄下的lib目錄下,添加兩個war包:
這兩個war包應該要與tomcat版本對應,具體我也不知道,我這兩個和tomcat9是適配的。
此時重啓一次tomcat服務便可(保險起見)。
map和view對象必須熟悉。
本例中,wms服務用到的圖層是ol/layer/Tile,用到的數據源是ol/layer/Image。
項目目錄和包信息。
html代碼(文件:index.html):
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>001 WMS</title> 8 <link rel="stylesheet" href="./node_modules/ol/ol.css"> 9 <style> 10 html, body, #mainframe { 11 height: 100%; 12 } 13 #mapframe { 14 width: 100%; 15 height: 100%; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="mainframe"> 21 <div id="topframe"> 22 </div> 23 <div id="mapframe"> 24 25 </div> 26 </div> 27 <script src="./index.js"></script> 28 </body> 29 </html>
js代碼(文件:index.js):
1 import 'normalize.css' 2 import {Map, View} from 'ol' 3 import TileLayer from 'ol/layer/Tile' 4 import WMSSource from 'ol/source/ImageWMS' 5 import WMSLayer from 'ol/layer/Image' 6 import OSM from 'ol/source/OSM' 7 8 var gzWms = new WMSSource({ 9 url: "http://localhost:8095/geoserver/c_GuangdongBase/wms", 10 params: { 11 layers: "c_GuangdongBase:province_gd" 12 }, 13 serverType: "geoserver", 14 crossOrigin: "anonymous" 15 }) 16 17 var gzWmsLayer = new WMSLayer({ 18 source: gzWms, 19 opacity: 0.5 20 }) 21 22 var gzView = new View({ 23 center: [113.23, 23.10], 24 projection: "EPSG:4326", 25 zoom: 10 26 }) 27 28 var olmap = new Map({ 29 target: 'mapframe', 30 layers: [ 31 new TileLayer({ 32 source: new OSM() 33 }), 34 gzWmsLayer 35 ], 36 view: gzView 37 }) 38 39 olmap.on('click', function (evt) { 40 console.log(evt.coordinate); 41 let infoUrl = gzWms.getFeatureInfoUrl(evt.coordinate, gzView.getResolution(), "EPSG:4326", { 42 INFO_FORMAT: 'text/html', 43 QUERY_LAYERS: 'c_GuangdongBase:province_gd' 44 }) 45 if (infoUrl) { 46 fetch(infoUrl) 47 .then(res=>res.text()) 48 .then(data=>console.log(data)) 49 } 50 })
在index.html所在目錄下運行npm start便可
使用admin/geoserver默認帳戶密碼登陸geoserver頁面(localhost:你tomcat的端口/geoserver)
①建立工做區(workspace的概念,使用名稱:c_GuangdongBase)
②在此工做區上新建數據存儲(數據源)
其中,工做區必選選剛纔建立那個;
數據存儲名稱,本身填;
鏈接參數。主機名、端口指的是postgresql的。
database是指postgis數據庫名稱,schema是該數據庫下須要發佈的某個數據集(直譯是模式,可是我以爲叫數據集更好)
user和password是指這個數據庫的登陸名稱和密碼。
③發佈數據源圖層
從剛剛建立的數據源裏發佈圖層。
發佈的時候計算一下四至範圍,選一下style便可。
網上發佈的資料不少,不說多了。
由於是直接返回html的文本格式我沒有處理,因此有點難看。
有須要的能夠更改getFeaturesInfoUrl裏的params參數裏的格式參數
效果如圖:
大功告成!睡覺去