OpenLayers 6 學習筆記2 WMS服務避坑記錄

心血來潮,花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

  • 須要安裝geoserver→分解步驟,須要安裝tomcat,須要啓用跨域,須要安裝geoserver的war包
  • 須要熟悉ol6一些api
  • 須要熟悉geoserver+wms服務的發佈及相關概念

1. 安裝tomcat

下載tomcat9_windows_64bit.gz,解壓完事。配置新端口爲8095,幹掉webapps下不須要的app。sql

使用windows服務的方式啓動tomcat。數據庫

2. 安裝geoserver

下載2.16.x最新版war包,丟到webapps下,自動解壓(請勿解壓後刪除war包!!!)npm

若是沒啓動起來,請稍等一下子,或者手動重啓tomcat服務。手動重啓會在「stopping」那卡一下子,等着就好了。windows

3. 啓用跨域

在geoserver.war解壓的app目錄下,找到WEB-INF文件夾,找到web.xml,找到CORS的filter和filter-map標籤,解註釋它們:

這兩段配置若是是2.15以上的geoserver,在web.xml文檔裏默認是註釋的。

在WEB-INF目錄下的lib目錄下,添加兩個war包:

這兩個war包應該要與tomcat版本對應,具體我也不知道,我這兩個和tomcat9是適配的。

此時重啓一次tomcat服務便可(保險起見)。

4. openlayers 6 有關api

map和view對象必須熟悉。

本例中,wms服務用到的圖層是ol/layer/Tile,用到的數據源是ol/layer/Image。

5. node環境+es6語法+parcel打包

 

項目目錄和包信息。

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便可

6. 發佈服務

使用admin/geoserver默認帳戶密碼登陸geoserver頁面(localhost:你tomcat的端口/geoserver)

①建立工做區(workspace的概念,使用名稱:c_GuangdongBase)

②在此工做區上新建數據存儲(數據源)

 

其中,工做區必選選剛纔建立那個;

數據存儲名稱,本身填;

鏈接參數。主機名、端口指的是postgresql的。

database是指postgis數據庫名稱,schema是該數據庫下須要發佈的某個數據集(直譯是模式,可是我以爲叫數據集更好)

user和password是指這個數據庫的登陸名稱和密碼。

 

③發佈數據源圖層

從剛剛建立的數據源裏發佈圖層。

發佈的時候計算一下四至範圍,選一下style便可。

網上發佈的資料不少,不說多了。

7. 前端訪問效果

由於是直接返回html的文本格式我沒有處理,因此有點難看。

有須要的能夠更改getFeaturesInfoUrl裏的params參數裏的格式參數

效果如圖:

 

大功告成!睡覺去 

相關文章
相關標籤/搜索