心血來(lái)潮，本機(jī)除了postgresql/postgis安裝好了并發(fā)布了幾個(gè)4326坐標(biāo)的廣東數(shù)據(jù)，安裝了node環(huán)境之外，其他什么都沒(méi)準(zhǔn)備。 突然就想用ol6+node環(huán)境+parcel打包，通過(guò)geoserver發(fā)布postgis數(shù)據(jù)并實(shí)現(xiàn)前端返回單擊點(diǎn)位的行政區(qū)信息。 分析一下需求：
1. 安裝tomcat下載tomcat9_windows_64bit.gz，解壓完事。配置新端口為8095，干掉webapps下不需要的app。 使用windows服務(wù)的方式啟動(dòng)tomcat。 2. 安裝geoserver下載2.16.x最新版war包，丟到webapps下，自動(dòng)解壓（請(qǐng)勿解壓后刪除war包!!!） 如果沒(méi)啟動(dòng)起來(lái)，請(qǐng)稍等一會(huì)兒，或者手動(dòng)重啟tomcat服務(wù)。手動(dòng)重啟會(huì)在“stopping”那卡一會(huì)兒，等著就行了。 3. 啟用跨域在geoserver.war解壓的app目錄下，找到WEB-INF文件夾，找到web.xml，找到CORS的filter和filter-map標(biāo)簽，解注釋它們：
這兩段配置如果是2.15以上的geoserver，在web.xml文檔里默認(rèn)是注釋的。 在WEB-INF目錄下的lib目錄下，添加兩個(gè)war包：
這兩個(gè)war包應(yīng)該要與tomcat版本對(duì)應(yīng)，具體我也不知道，我這兩個(gè)和tomcat9是適配的。 此時(shí)重啟一次tomcat服務(wù)即可（保險(xiǎn)起見(jiàn)）。 4. openlayers 6 有關(guān)apimap和view對(duì)象必須熟悉。 本例中，wms服務(wù)用到的圖層是ol/layer/Tile，用到的數(shù)據(jù)源是ol/layer/Image。 5. node環(huán)境+es6語(yǔ)法+parcel打包
項(xiàng)目目錄和包信息。 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"> <!-- 這個(gè)div暫時(shí)無(wú)用 --> 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", // 是工作區(qū)的URL+/wms 10 params: { 11 layers: "c_GuangdongBase:province_gd" // layers參數(shù)是"工作區(qū):圖層名1, 工作區(qū):圖層名2, ..."，而不是"數(shù)據(jù)源:圖層名, ..." 12 }, 13 serverType: "geoserver", 14 crossOrigin: "anonymous" 15 }) 16 17 var gzWmsLayer = new WMSLayer({ 18 source: gzWms, 19 opacity: 0.5 // 設(shè)置透明度必須是0~1之間，我寫(xiě)50沒(méi)有半透明效果 20 }) 21 22 var gzView = new View({ 23 center: [113.23, 23.10], 24 projection: "EPSG:4326", // Projection類的另一種寫(xiě)法：“ProjectionLike”字符串，EPSG必須大寫(xiě)，冒號(hào)后必須沒(méi)有空格 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所在目錄下運(yùn)行npm start即可 6. 發(fā)布服務(wù)使用admin/geoserver默認(rèn)賬戶密碼登錄geoserver頁(yè)面（localhost:你tomcat的端口/geoserver） ①創(chuàng)建工作區(qū)（workspace的概念，使用名稱：c_GuangdongBase）
②在此工作區(qū)上新建數(shù)據(jù)存儲(chǔ)（數(shù)據(jù)源）
其中，工作區(qū)必選選剛才創(chuàng)建那個(gè)； 數(shù)據(jù)存儲(chǔ)名稱，自己填； 連接參數(shù)。主機(jī)名、端口指的是postgresql的。 database是指postgis數(shù)據(jù)庫(kù)名稱，schema是該數(shù)據(jù)庫(kù)下需要發(fā)布的某個(gè)數(shù)據(jù)集（直譯是模式，但是我覺(jué)得叫數(shù)據(jù)集更好） user和password是指這個(gè)數(shù)據(jù)庫(kù)的登錄名稱和密碼。
③發(fā)布數(shù)據(jù)源圖層
從剛剛創(chuàng)建的數(shù)據(jù)源里發(fā)布圖層。 發(fā)布的時(shí)候計(jì)算一下四至范圍，選一下style即可。 網(wǎng)上發(fā)布的資料很多，不說(shuō)多了。 7. 前端訪問(wèn)效果
因?yàn)槭侵苯臃祷豩tml的文本格式我沒(méi)有處理，所以有點(diǎn)難看。 有需要的可以更改getFeaturesInfoUrl里的params參數(shù)里的格式參數(shù)
效果如圖：
大功告成！睡覺(jué)去 |
|
|
、
