與實(shí)戰(zhàn))
簡(jiǎn)介WebGIS開發(fā)中前端地圖渲染與空間數(shù)據(jù)服務(wù)的結(jié)合是關(guān)鍵。Leaflet作為輕量級(jí)地圖庫(kù)GeoServer作為標(biāo)準(zhǔn)地圖服務(wù)發(fā)布器PostGIS作為空間數(shù)據(jù)庫(kù)三者構(gòu)成了一套穩(wěn)定、開源的三層架構(gòu)。其核心原理是PostGIS負(fù)責(zé)空間數(shù)據(jù)存儲(chǔ)GeoServer將其發(fā)布為WMS/WMTS等標(biāo)準(zhǔn)地圖服務(wù)Leaflet在瀏覽器端完成圖層加載與交互渲染。該架構(gòu)具備安全性高、性能優(yōu)異、協(xié)議標(biāo)準(zhǔn)化的技術(shù)價(jià)值支持按需加載、坐標(biāo)轉(zhuǎn)換與數(shù)據(jù)獨(dú)立更新廣泛應(yīng)用于智慧城市、資源管理、環(huán)境監(jiān)測(cè)等場(chǎng)景。基于zip完整工程示例從PostGIS數(shù)據(jù)入庫(kù)、GeoServer圖層發(fā)布到Leaflet前端調(diào)用逐層拆解全鏈路實(shí)現(xiàn)細(xì)節(jié)并針對(duì)坐標(biāo)系偏移、跨域訪問、中文亂碼、緩存失效等高頻問題給出實(shí)用排查經(jīng)驗(yàn)適合WebGIS入門與工程實(shí)踐參考。 直接說結(jié)論這一套 leaflet geoserver postgis 的組合是當(dāng)前 WebGIS 項(xiàng)目里最常見、最穩(wěn)的架構(gòu)之一而且從標(biāo)題里的 zip 包也能看出來這是一份可以直接跑通的完整工程示例。但很多人拿到壓縮包之后要么配半天環(huán)境起不來要么圖層出不來要么數(shù)據(jù)怎么都加載不上最后卡在一個(gè)很尷尬的位置。這篇文章不打算只講“怎么點(diǎn)按鈕”我會(huì)把這套鏈路從數(shù)據(jù)存儲(chǔ)到前端渲染從頭拆一遍把里面最容易出問題、也最值得深挖的環(huán)節(jié)逐個(gè)講透。它的核心價(jià)值一句話就能概括PostGIS 負(fù)責(zé)存空間數(shù)據(jù)GeoServer 負(fù)責(zé)把數(shù)據(jù)發(fā)布成標(biāo)準(zhǔn)地圖服務(wù)Leaflet 負(fù)責(zé)在瀏覽器里把服務(wù)渲染成可交互的地圖。這套架構(gòu)的好處是每一層都可以獨(dú)立替換、獨(dú)立擴(kuò)展而且全部基于開源方案沒有任何商業(yè)授權(quán)成本。適合正在做畢業(yè)設(shè)計(jì)、想入門 WebGIS 的開發(fā)者也適合已經(jīng)在做前端但第一次接觸空間數(shù)據(jù)服務(wù)的同學(xué)參考。1. 整體架構(gòu)與設(shè)計(jì)思路拆解1.1 為什么是 Leaflet GeoServer PostGIS 這條鏈路先說結(jié)論這套組合之所以在中小型 GIS 項(xiàng)目里被大量使用核心原因是它把“數(shù)據(jù)管理”“服務(wù)發(fā)布”和“前端展示”三個(gè)職責(zé)拆得非常干凈。PostGIS 是 PostgreSQL 的空間擴(kuò)展本質(zhì)是把空間數(shù)據(jù)點(diǎn)、線、面當(dāng)成一種普通數(shù)據(jù)類型存儲(chǔ)在數(shù)據(jù)庫(kù)里并且提供空間索引和空間函數(shù)。GeoServer 是一個(gè) Java 寫的開源地圖服務(wù)器它能連接 PostGIS把數(shù)據(jù)庫(kù)里的矢量數(shù)據(jù)發(fā)布成符合 OGC 標(biāo)準(zhǔn)的 WMS、WFS、WMTS 服務(wù)。Leaflet 是一個(gè)輕量級(jí)的前端地圖庫(kù)負(fù)責(zé)在瀏覽器里請(qǐng)求這些服務(wù)然后把地圖渲染出來。這個(gè)三層架構(gòu)最舒服的地方在于前端不直接連數(shù)據(jù)庫(kù)也不直接讀 Shapefile 文件而是通過一個(gè)標(biāo)準(zhǔn)化的服務(wù)層來拿數(shù)據(jù)。這樣做的好處非常實(shí)際。第一是安全。數(shù)據(jù)庫(kù)的連接信息只暴露給 GeoServer前端拿到的只是圖片或者 GeoJSON 數(shù)據(jù)不需要擔(dān)心數(shù)據(jù)庫(kù)賬號(hào)密碼泄露。第二是性能。GeoServer 會(huì)在服務(wù)端完成空間過濾、坐標(biāo)轉(zhuǎn)換、樣式渲染前端只需要展示結(jié)果這對(duì)低配置的客戶端設(shè)備尤其友好。第三是標(biāo)準(zhǔn)。你換掉 Leaflet 改成 OpenLayers或者換掉 GeoServer 改成 MapServer其他部分基本不用動(dòng)因?yàn)榇蠹叶甲裱?WMS/WMTS 這些標(biāo)準(zhǔn)協(xié)議。1.2 與直接加載 GeoJSON 的方案對(duì)比我之前見過很多前端開發(fā)者用 Leaflet 的時(shí)候習(xí)慣直接加載 GeoJSON 文件。說實(shí)話這種方式在數(shù)據(jù)量小、不需要更新的場(chǎng)景下完全夠用但一旦進(jìn)入真實(shí)業(yè)務(wù)場(chǎng)景問題就出現(xiàn)了。直接加載 GeoJSON 意味著所有數(shù)據(jù)都要一次性傳到瀏覽器端。五萬個(gè)多邊形是什么概念算下來大概幾十兆甚至上百兆的 HTTP 響應(yīng)瀏覽器直接卡死。而且數(shù)據(jù)是靜態(tài)的如果服務(wù)端數(shù)據(jù)庫(kù)里的數(shù)據(jù)變了前端拿到的還是舊數(shù)據(jù)。用 GeoServer 發(fā)布 PostGIS 數(shù)據(jù)則完全不一樣。前端請(qǐng)求的是瓦片圖片或者按需請(qǐng)求的矢量數(shù)據(jù)GeoServer 會(huì)在服務(wù)端做空間過濾每次只返回可視范圍內(nèi)的數(shù)據(jù)。數(shù)據(jù)更新只需要改數(shù)據(jù)庫(kù)前端刷新頁面就能看到最新數(shù)據(jù)。坐標(biāo)轉(zhuǎn)換、樣式調(diào)整、比例尺縮放級(jí)別控制這些事也都在服務(wù)端幫你處理好了不需要寫一堆前端代碼去處理。所以在項(xiàng)目起步階段就應(yīng)該想清楚如果你做的是演示項(xiàng)目直接讀 GeoJSON 沒問題但如果你的項(xiàng)目要落地、要迭代甚至要支撐多個(gè)業(yè)務(wù)系統(tǒng)走 GeoServer 這條路才是正解。2. PostGIS 端的數(shù)據(jù)準(zhǔn)備與建模細(xì)節(jié)2.1 空間數(shù)據(jù)入庫(kù)的基本操作既然 GeoServer 發(fā)布的是 PostGIS 里的數(shù)據(jù)那第一步就是把空間數(shù)據(jù)放進(jìn)去。最常見的方式是用shp2pgsql這個(gè)命令行工具把 Shapefile 導(dǎo)入到 PostGIS 數(shù)據(jù)庫(kù)。假設(shè)你有一個(gè)cities.shp文件里面的坐標(biāo)系是 WGS84EPSG:4326導(dǎo)入命令大概是這樣的shp2pgsql -s 4326 -I -W utf8 cities.shp public.cities | psql -U postgres -d gisdb這條命令里幾個(gè)參數(shù)都很關(guān)鍵。-s 4326指定源數(shù)據(jù)的 SRID-I表示導(dǎo)入的同時(shí)創(chuàng)建空間索引-W utf8指定字符編碼很多中文亂碼問題都是因?yàn)檫@里沒指定對(duì)。如果文件編碼原本是 GBK這里就要改成-W gbk。導(dǎo)入完成之后可以用下面這條 SQL 快速驗(yàn)證SELECT ST_SRID(geom) AS srid, ST_GeometryType(geom) AS geom_type, COUNT(*) AS cnt FROM public.cities GROUP BY srid, geom_type;我習(xí)慣先做這一步檢查確認(rèn)空間參考和幾何類型都符合預(yù)期再進(jìn) GeoServer 配置。很多人忽略了這個(gè)環(huán)節(jié)結(jié)果發(fā)布之后圖層顯示不出來回頭排查才發(fā)現(xiàn)是坐標(biāo)系對(duì)不上。2.2 空間索引與 SRID 選擇對(duì)性能的影響PostGIS 里最常見的性能殺手就是表里沒有空間索引?？臻g索引用的是 PostgreSQL 的 Gist 索引機(jī)制它把地理對(duì)象按空間位置進(jìn)行預(yù)排序查詢的時(shí)候能快速砍掉大量無關(guān)記錄。CREATE INDEX idx_cities_geom ON public.cities USING GIST (geom);這個(gè)語句一定要建而且要在數(shù)據(jù)導(dǎo)入完成后盡快建。沒有空間索引的話GeoServer 在做空間過濾查詢時(shí)會(huì)對(duì)整張表做全表掃描數(shù)據(jù)量一大前端地圖拖動(dòng)起來就是一卡一卡的嚴(yán)重影響體驗(yàn)。SRID 的選擇同樣重要。Web 地圖服務(wù)里最常用的兩個(gè)坐標(biāo)系一個(gè)是 EPSG:4326就是經(jīng)緯度坐標(biāo)另一個(gè)是 EPSG:3857也就是 Web Mercator它是 Google Maps 和絕大多數(shù)在線底圖用的坐標(biāo)系。Leaflet 默認(rèn)用的就是 EPSG:3857所以如果你的數(shù)據(jù)是 4326 的GeoServer 在發(fā)布時(shí)會(huì)自動(dòng)做坐標(biāo)轉(zhuǎn)換。這個(gè)過程是無感的但如果數(shù)據(jù)精度要求很高要注意轉(zhuǎn)換本身會(huì)引入微小的偏差。3. GeoServer 發(fā)布 PostGIS 圖層的完整流程3.1 創(chuàng)建數(shù)據(jù)源與配置參數(shù)GeoServer 的數(shù)據(jù)源在它的術(shù)語里叫 Store對(duì)應(yīng)的就是一個(gè) PostGIS 數(shù)據(jù)庫(kù)連接。進(jìn)入 GeoServer 管理界面之后在“數(shù)據(jù)存儲(chǔ)”里選擇“添加新的存儲(chǔ)”然后選“PostGIS - PostGIS 數(shù)據(jù)庫(kù)”。這里要填的參數(shù)有幾個(gè)容易踩坑的地方。連接參數(shù)如果本機(jī)測(cè)試主機(jī)名填localhost或者127.0.0.1都可以端口默認(rèn) 5432。數(shù)據(jù)庫(kù)名、用戶名、密碼按實(shí)際填但有一個(gè)容易被忽略的選項(xiàng)是“Schema”如果表不在默認(rèn)publicschema 里這里會(huì)查不到表。填完數(shù)據(jù)庫(kù)連接之后建議先點(diǎn)一下“驗(yàn)證連接”按鈕確認(rèn)能看到“連接成功”的提示。我自己遇到過很多次數(shù)據(jù)庫(kù)連接沒問題但密碼里包含特殊字符導(dǎo)致一直連不上的情況。還有一次是 GeoServer 服務(wù)器上沒裝 PostgreSQL 客戶端驅(qū)動(dòng)折騰了很久才發(fā)現(xiàn)。3.2 圖層發(fā)布與坐標(biāo)參考系設(shè)置數(shù)據(jù)源創(chuàng)建成功之后GeoServer 會(huì)列出這個(gè)數(shù)據(jù)庫(kù)里所有帶幾何字段的表。選擇你要發(fā)布的表進(jìn)入“發(fā)布圖層”頁面這里有幾個(gè)關(guān)鍵項(xiàng)要認(rèn)真看。“坐標(biāo)參考系”這塊是重點(diǎn)。如果數(shù)據(jù)庫(kù)里的數(shù)據(jù)已經(jīng)指定了正確的 SRIDGeoServer 會(huì)自動(dòng)識(shí)別“聲明 SRS”的值如果識(shí)別不了就需要手動(dòng)填。很多新手在這里直接默認(rèn) 4326也不管數(shù)據(jù)實(shí)際是什么坐標(biāo)系最終結(jié)果就是圖層位置對(duì)不上底圖得偏移到天邊去。建議發(fā)布圖層前先在查詢工具里執(zhí)行一段 SQL確認(rèn)幾何字段的 SRIDSELECT DISTINCT ST_SRID(geom) FROM public.cities;還有一個(gè)“原生邊界”和“經(jīng)緯度邊界”的按鈕發(fā)布頁面上有“從數(shù)據(jù)計(jì)算”和“從 SRS 計(jì)算”兩個(gè)選項(xiàng)。建議首次發(fā)布時(shí)選擇“從數(shù)據(jù)計(jì)算”讓 GeoServer 自動(dòng)算出數(shù)據(jù)的實(shí)際范圍能避免很多顯示問題。圖層發(fā)布完成后可以先用 GeoServer 自帶的“Layer Preview”預(yù)覽一下。如果能在這個(gè)頁面正常顯示說明服務(wù)端已經(jīng)沒問題接下來就可以安心寫前端代碼了。3.3 WMS、WMTS、WFS 三種服務(wù)怎么選GeoServer 發(fā)布圖層之后同一份數(shù)據(jù)可以同時(shí)提供好幾種服務(wù)這一點(diǎn)很多人沒意識(shí)到。WMSWeb Map Service返回的是圖片適合直接鋪在 Leaflet 上做底圖WMTSWeb Map Tile Service返回的是預(yù)先切好的瓦片性能最好WFSWeb Feature Service返回的是矢量數(shù)據(jù)適合做屬性查詢和編輯。實(shí)際項(xiàng)目中我一般用 WMS 作為默認(rèn)方案因?yàn)榕渲煤?jiǎn)單、樣式渲染在服務(wù)端完成但如果圖層涉及的瓦片數(shù)量很多、需要兼顧高并發(fā)訪問就優(yōu)先上 WMTS。WFS 雖然靈活能拿到屬性數(shù)據(jù)但要注意這種服務(wù)把真實(shí)數(shù)據(jù)直接暴露給了前端有權(quán)限管控要求的場(chǎng)景必須做權(quán)限校驗(yàn)不能隨意開放。4. Leaflet 前端調(diào)用與核心代碼實(shí)現(xiàn)4.1 通過 L.tileLayer.wms 加載 WMS 服務(wù)Leaflet 里加載 WMS 服務(wù)最直接的方式是用自帶的L.tileLayer.wms方法。以下是一個(gè)可用的最小示例const map L.map(map, { center: [39.9, 116.4], zoom: 10 }); L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { maxZoom: 19 }).addTo(map); const geoserverUrl http://localhost:8080/geoserver/gisdb/wms; const postgisLayer L.tileLayer.wms(geoserverUrl, { layers: gisdb:cities, format: image/png, transparent: true, version: 1.1.0, srs: EPSG:3857 }); postgisLayer.addTo(map);這里面幾個(gè)參數(shù)要解釋一下。layers是工作區(qū)名加冒號(hào)加圖層名例如gisdb:cities這個(gè)值在 GeoServer 的圖層列表里有現(xiàn)成的復(fù)制粘貼避免手誤。transparent: true表示只顯示數(shù)據(jù)背景透明這樣才能疊加在其他底圖上面。format: image/png是推薦的圖片格式如果需要背景透明必須用 png。這里有個(gè)我自己踩過坑的地方version參數(shù)不寫的話GeoServer 默認(rèn)可能返回 1.3.0 版本而 1.3.0 的 WMS 里坐標(biāo)軸順序從x,y換成了lat,lon導(dǎo)致個(gè)別場(chǎng)景出現(xiàn)偏移。我的習(xí)慣是顯式指定為 1.1.0省得后續(xù)出問題再排查。4.2 用 WMTS 實(shí)現(xiàn)更高效的瓦片加載如果你的圖層不需要頻繁更新但訪問量很大那我強(qiáng)烈建議用 GeoWebCache 把圖層切成瓦片然后讓 Leaflet 按xyz方式直接加載。GeoServer 內(nèi)置了 GeoWebCache不需要額外部署。切完瓦片之后圖層會(huì)多出一個(gè) WMTS 地址在 Leaflet 里可以用下面的方式接const wmtsLayer L.tileLayer( http://localhost:8080/geoserver/gwc/service/wmts? layergisdb:citiesstyletilematrixsetEPSG:3857 ServiceWMTSRequestGetTileVersion1.0.0 Formatimage/pngTileMatrix{z}TileCol{x}TileRow{y}, { maxZoom: 19 } );要注意tilematrixset必須和 GeoServer 里配置的切片矩陣集一致否則請(qǐng)求會(huì)返回空白。另外 WMTS 的瓦片是固定級(jí)別緩存的如果修改了原始數(shù)據(jù)需要執(zhí)行“重新切片”否則看到的還是舊瓦片。4.3 用 GeoJSON 圖層做交互查詢瓦片服務(wù)的好處是性能好但缺點(diǎn)也很明顯圖片里的要素沒法直接點(diǎn)擊獲得屬性。如果你需要點(diǎn)擊要素然后彈窗顯示屬性信息就需要用 WFS 服務(wù)加載 GeoJSON然后通過L.geoJSON渲染。const geojsonLayer L.geoJSON(null, { onEachFeature: function (feature, layer) { layer.bindPopup( 名稱 feature.properties.name br 編碼 feature.properties.code ); } }); $.ajax({ url: http://localhost:8080/geoserver/gisdb/ows, type: GET, data: { service: WFS, version: 1.0.0, request: GetFeature, typeName: gisdb:cities, srsName: EPSG:3857, outputFormat: application/json }, success: function (res) { geojsonLayer.addData(res); map.addLayer(geojsonLayer); } });這里有一個(gè)非常實(shí)際的性能問題如果表里有很多要素一次性GetFeature會(huì)把所有數(shù)據(jù)拉到前端頁面瞬間崩潰。我的經(jīng)驗(yàn)是務(wù)必加范圍限制用bbox參數(shù)把請(qǐng)求范圍限制在地圖當(dāng)前可視范圍內(nèi)然后配合count限制返回條數(shù)還可以用CQL_FILTER加條件過濾比如只查詢某個(gè)字段等于某個(gè)值的數(shù)據(jù)。// 在請(qǐng)求參數(shù)里加上 bbox 和 CQL 過濾 data: { bbox: map.getBounds().toBBoxString(), CQL_FILTER: code LIKE 010% }這樣返回的數(shù)據(jù)量就能控制在很小的范圍內(nèi)頁面交互也會(huì)流暢很多。5. 常見問題與排查技巧實(shí)錄5.1 圖層顯示空白或偏移的排查思路很多人在 Page Preview 里能看到圖層但是到 Leaflet 里就顯示不出來或者偏移得離譜。這類問題絕大部分出在坐標(biāo)系匹配上。GeoServer 發(fā)布 4326 數(shù)據(jù)但前端用 Web Mercator 瓦片疊加兩者如果不做正確轉(zhuǎn)換坐標(biāo)就會(huì)偏。排查第一步先確認(rèn) GeoServer 預(yù)覽地址的返回結(jié)果是否正常。如果 Geoserver 預(yù)覽正常說明服務(wù)端沒問題第二步確認(rèn)前端代碼里srs參數(shù)或者crs配置是否正確第三步檢查圖層范圍有時(shí)候數(shù)據(jù)范圍本身不在你的初始視圖中心那自然看不到內(nèi)容。我踩過最詭異的一次坑是cities表里混入了幾條坐標(biāo)異常的數(shù)據(jù)字段值是空的GeoServer 發(fā)布時(shí)沒有報(bào)錯(cuò)但渲染結(jié)果始終有一塊空白最后用 SQL 查出來SELECT * FROM public.cities WHERE geom IS NULL OR NOT ST_IsValid(geom);清理掉這些臟數(shù)據(jù)之后圖層立刻就正常了。所以數(shù)據(jù)入庫(kù)前的質(zhì)量檢查非常重要不要嫌麻煩。5.2 跨域訪問問題與靜態(tài)資源部署Leaflet 頁面和 GeoServer 不在同一個(gè)端口的情況下瀏覽器會(huì)發(fā)起跨域請(qǐng)求。GeoServer 本身支持 CORS但需要確認(rèn) web.xml 里是否配置了跨域過濾器。如果你是自己打包的 GeoServer可以參考以下方式確認(rèn)打開webapps/geoserver/WEB-INF/web.xml搜索cors或cross-origin如果沒有相關(guān)過濾器需要手動(dòng)加上跨域配置后重啟 GeoServer如果不想動(dòng) Java 容器配置另一個(gè)更實(shí)用、更推薦的辦法是用 Nginx 做反向代理把 GeoServer 和靜態(tài)頁面放在同一個(gè)域名下。比如location /geoserver/ { proxy_pass http://127.0.0.1:8080/geoserver/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }這樣前端請(qǐng)求/geoserver/...的路徑和請(qǐng)求靜態(tài)資源同源不存在跨域問題以后遷移服務(wù)器也方便只改 Nginx 配置就行。5.3 中文亂碼問題最常見的亂碼來源有兩個(gè)。一個(gè)是 Shapefile 轉(zhuǎn)數(shù)據(jù)庫(kù)階段的編碼問題另一個(gè)是 GeoServer 樣式文件編碼問題。前者用shp2pgsql導(dǎo)入時(shí)指定-W GBK或-W utf8基本能解決后者如果是用內(nèi)置的 SLD 文件要確保文件頭聲明了 UTF-8。如果圖層屬性查詢結(jié)果在 GeoServer 頁面顯示正常但 Leaflet 彈窗里亂碼那大概率是 HTTP 響應(yīng)的字符集問題?？梢栽谡?qǐng)求 WFS 時(shí)加一個(gè)參數(shù)強(qiáng)制指定編碼data: { outputFormat: application/json; charsetutf-8 }前端 Ajax 請(qǐng)求也建議顯式聲明scriptCharset: utf-8雙保險(xiǎn)。5.4 圖層緩存問題本地調(diào)試時(shí)經(jīng)常遇到改了數(shù)據(jù)庫(kù)數(shù)據(jù)頁面還是舊數(shù)據(jù)的情況。如果用的 WMS 且沒開 GeoWebCache通常不會(huì)緩存如果走的是 WMTS 或者打開了 WMS 的緩存策略那就需要手動(dòng)清緩存。我常用的解決辦法是在 GeoServer 管理界面里找到對(duì)應(yīng)圖層的 Tile Caching 選項(xiàng)選擇“清空緩存”然后刷新頁面。還有一種臨時(shí)開發(fā)技巧在預(yù)覽 URL 后面拼接一個(gè)隨機(jī)參數(shù)比如_tDate.now()強(qiáng)制瀏覽器繞過緩存。但這個(gè)只適合調(diào)試不能帶到生產(chǎn)環(huán)境。6. 性能優(yōu)化與生產(chǎn)環(huán)境部署經(jīng)驗(yàn)6.1 從 WMS 升級(jí)到 WMTS 的實(shí)踐建議如果項(xiàng)目訪問量上來了第一個(gè)性能瓶頸通常出現(xiàn)在 WMS 動(dòng)態(tài)渲染上。WMS 的每一次請(qǐng)求都會(huì)實(shí)時(shí)查數(shù)據(jù)庫(kù)、渲染圖片并發(fā)越高越吃力。GeoServer 里啟用 GeoWebCache 之后可以把渲染結(jié)果按瓦片緩存下來大幅降低重復(fù)計(jì)算開銷。在“圖層”列表里找到你要發(fā)布的圖層進(jìn)入 Tile Caching 選項(xiàng)創(chuàng)建緩存切片矩陣集一般選EPSG:3857它會(huì)自動(dòng)生成全球 0-22 級(jí)瓦片。然后選擇“手動(dòng)播種”也就是預(yù)生成指定范圍的瓦片。建議先只生成實(shí)際業(yè)務(wù)涉及的范圍和 8-16 級(jí)避免一開始把全世界都切片白白浪費(fèi)存儲(chǔ)和計(jì)算時(shí)間。WMTS 和 WMS 展示效果在視覺上幾乎沒差別但資源占用完全是兩個(gè)量級(jí)。對(duì)前端來說WMTS 就是普通圖片瓦片加載速度極快對(duì)服務(wù)端來說切片之后基本是純靜態(tài)文件輸出QPS 能成倍提升。6.2 離線部署與 Leaflet 離線加載有些項(xiàng)目運(yùn)行在政務(wù)內(nèi)網(wǎng)或沒有外部網(wǎng)絡(luò)的環(huán)境里這時(shí)候“l(fā)eaflet 離線加載”就變得非常關(guān)鍵。我做過幾次這種項(xiàng)目總結(jié)一下經(jīng)驗(yàn)。第一步底圖瓦片必須先準(zhǔn)備好。可以用離線的 XYZ 瓦片目錄也可以把在線瓦片批量下載到本地 Nginx 靜態(tài)目錄。Leaflet 加載本地底圖瓦片很簡(jiǎn)單只需要把 URL 指到本地路徑L.tileLayer(./tiles/{z}/{x}/{y}.png, { minZoom: 3, maxZoom: 18 }).addTo(map);第二步GeoServer 本身可以運(yùn)行在同一臺(tái)內(nèi)網(wǎng)機(jī)器上數(shù)據(jù)、服務(wù)都在內(nèi)網(wǎng)不需要連接外網(wǎng)。只要瀏覽器能訪問到內(nèi)網(wǎng)的 GeoServer 地址整個(gè)地圖應(yīng)用就能正常跑起來。這樣整套系統(tǒng)就完全離線化了。第三步要特別注意本地瓦片目錄的命名和層級(jí)必須規(guī)范。我之前遇到過下載工具產(chǎn)出的目錄層級(jí)和 Leaflet 期望的不一致結(jié)果瓦片怎么都加載不出來。最穩(wěn)妥的方式是先放一張測(cè)試瓦片到{z}/{x}/{y}.png對(duì)應(yīng)目錄用瀏覽器直接訪問那張圖片能打開就說明結(jié)構(gòu)沒問題。6.3 配合 Nginx 部署的前端工程Leaflet 應(yīng)用本質(zhì)上是純靜態(tài)頁面打包構(gòu)建后直接丟給 Nginx 托管就行。如果是以 Vue 或 React 工程形式開發(fā)構(gòu)建完會(huì)生成dist目錄里面是index.html和一堆靜態(tài)資源。Nginx 配置大致如下server { listen 80; server_name your.domain.com; root /var/www/leaflet-app/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }注意try_files這一行的作用很重要前端路由如果是 history 模式刷新頁面時(shí) Nginx 會(huì)按路徑去找文件。不加這行子路徑刷新就會(huì) 404。雖然 Leaflet 本身是純頁面地圖不一定用路由但工程化項(xiàng)目基本都會(huì)用到框架路由寫上這行更保險(xiǎn)。另外建議 Gzip 壓縮開啟尤其對(duì) JS、CSS、JSON 這類文本資源能明顯減小傳輸體積gzip on; gzip_types text/plain text/css application/json application/javascript image/svgxml;6.4 GeoServer 本身部署時(shí)的 JVM 參數(shù)項(xiàng)目上線前GeoServer 的 JVM 堆內(nèi)存設(shè)置值得檢查一下。GeoServer 是 Java 應(yīng)用默認(rèn)啟動(dòng)腳本可能只給了 256M 或 512M一旦遇到大規(guī)模 WFS 請(qǐng)求或大量瓦片并發(fā)很容易觸發(fā)內(nèi)存溢出。在啟動(dòng)腳本或環(huán)境變量里調(diào)整export JAVA_OPTS-Xms1024M -Xmx2048M -XX:MaxPermSize256m具體數(shù)值根據(jù)機(jī)器內(nèi)存來定一般-Xmx設(shè)置到物理內(nèi)存的一半左右比較合理但別超過物理內(nèi)存否則也會(huì)導(dǎo)致系統(tǒng)整體變慢。7. 一個(gè)完整的小型實(shí)踐案例7.1 場(chǎng)景描述與數(shù)據(jù)準(zhǔn)備說了這么多理論最后用一個(gè)完整的小例子把流程串起來。假設(shè)我們手頭有一批全國(guó)主要城市的點(diǎn)數(shù)據(jù)存在public.cities表里字段有name城市名、province省份、pop人口數(shù)量、geomPoint 幾何字段。目標(biāo)是在 Leaflet 地圖上把這些城市展示出來點(diǎn)擊城市彈窗顯示名稱和人口并且支持輸入關(guān)鍵字篩選。先把數(shù)據(jù)準(zhǔn)備好確認(rèn)字段如下SELECT name, province, pop, ST_AsText(geom) FROM public.cities LIMIT 5;如果輸出的 geom 是坐標(biāo)點(diǎn)數(shù)據(jù)基本可用。7.2 GeoServer 發(fā)布操作記錄我在 GeoServer 里的操作流程是這樣新建工作區(qū)gisdb。添加 PostGIS 數(shù)據(jù)存儲(chǔ)連接gisdb數(shù)據(jù)庫(kù)。發(fā)布cities圖層設(shè)置 SRS 為EPSG:4326邊界從數(shù)據(jù)計(jì)算。在“圖層預(yù)覽”里驗(yàn)證選OpenLayers預(yù)覽方式能看到散點(diǎn)圖即表示發(fā)布成功。編輯樣式用 SLD 自定義點(diǎn)顏色和大小。開啟 Tile Caching對(duì) 0-10 級(jí)做預(yù)切片。這套流程熟練之后十分鐘左右就能完成前期慢主要是因?yàn)閷?duì)界面布局不熟。7.3 Leaflet 頁面實(shí)現(xiàn)交互前端頁面我寫了兩個(gè)核心功能塊。第一塊是常規(guī)的地圖初始化和點(diǎn)標(biāo)記加載用 WFS 加載 GeoJSON 點(diǎn)數(shù)據(jù)第二塊是關(guān)鍵字查詢城市。查詢功能本身可以用瀏覽器端過濾 GeoJSON 數(shù)據(jù)來做但如果數(shù)據(jù)量大我建議直接走后端 CQL 過濾實(shí)現(xiàn)方式是在請(qǐng)求 WFS 時(shí)加上CQL_FILTERfunction queryCity(keyword) { geojsonLayer.clearLayers(); $.ajax({ url: http://localhost:8080/geoserver/gisdb/ows, type: GET, data: { service: WFS, version: 1.0.0, request: GetFeature, typeName: gisdb:cities, srsName: EPSG:3857, outputFormat: application/json, CQL_FILTER: name LIKE % keyword % }, success: function (res) { geojsonLayer.addData(res); } }); }這個(gè)實(shí)現(xiàn)方案在中小數(shù)據(jù)量下表現(xiàn)很好響應(yīng)時(shí)間基本在幾百毫秒以內(nèi)用戶體驗(yàn)非常流暢。8. 項(xiàng)目目錄結(jié)構(gòu)與體積優(yōu)化備注如果你下載的 zip 解壓之后是一個(gè)完整的前端工程里面通常包含index.html主頁面js/Leaflet 及相關(guān)插件css/樣式data/本地?cái)?shù)據(jù)緩存或離線瓦片目錄本文還有配套的精品資源點(diǎn)擊獲取 Leaflet+GeoServer+PostGIS WebGIS全鏈路架構(gòu)與實(shí)戰(zhàn)
簡(jiǎn)介WebGIS開發(fā)中前端地圖渲染與空間數(shù)據(jù)服務(wù)的結(jié)合是關(guān)鍵。Leaflet作為輕量級(jí)地圖庫(kù)GeoServer作為標(biāo)準(zhǔn)地圖服務(wù)發(fā)布器PostGIS作為空間數(shù)據(jù)庫(kù)三者構(gòu)成了一套穩(wěn)定、開源的三層架構(gòu)。其核心原理是PostGIS負(fù)責(zé)空間數(shù)據(jù)存儲(chǔ)GeoServer將其發(fā)布為WMS/WMTS等標(biāo)準(zhǔn)地圖服務(wù)Leaflet在瀏覽器端完成圖層加載與交互渲染。該架構(gòu)具備安全性高、性能優(yōu)異、協(xié)議標(biāo)準(zhǔn)化的技術(shù)價(jià)值支持按需加載、坐標(biāo)轉(zhuǎn)換與數(shù)據(jù)獨(dú)立更新廣泛應(yīng)用于智慧城市、資源管理、環(huán)境監(jiān)測(cè)等場(chǎng)景。基于zip完整工程示例從PostGIS數(shù)據(jù)入庫(kù)、GeoServer圖層發(fā)布到Leaflet前端調(diào)用逐層拆解全鏈路實(shí)現(xiàn)細(xì)節(jié)并針對(duì)坐標(biāo)系偏移、跨域訪問、中文亂碼、緩存失效等高頻問題給出實(shí)用排查經(jīng)驗(yàn)適合WebGIS入門與工程實(shí)踐參考。 直接說結(jié)論這一套 leaflet geoserver postgis 的組合是當(dāng)前 WebGIS 項(xiàng)目里最常見、最穩(wěn)的架構(gòu)之一而且從標(biāo)題里的 zip 包也能看出來這是一份可以直接跑通的完整工程示例。但很多人拿到壓縮包之后要么配半天環(huán)境起不來要么圖層出不來要么數(shù)據(jù)怎么都加載不上最后卡在一個(gè)很尷尬的位置。這篇文章不打算只講“怎么點(diǎn)按鈕”我會(huì)把這套鏈路從數(shù)據(jù)存儲(chǔ)到前端渲染從頭拆一遍把里面最容易出問題、也最值得深挖的環(huán)節(jié)逐個(gè)講透。它的核心價(jià)值一句話就能概括PostGIS 負(fù)責(zé)存空間數(shù)據(jù)GeoServer 負(fù)責(zé)把數(shù)據(jù)發(fā)布成標(biāo)準(zhǔn)地圖服務(wù)Leaflet 負(fù)責(zé)在瀏覽器里把服務(wù)渲染成可交互的地圖。這套架構(gòu)的好處是每一層都可以獨(dú)立替換、獨(dú)立擴(kuò)展而且全部基于開源方案沒有任何商業(yè)授權(quán)成本。適合正在做畢業(yè)設(shè)計(jì)、想入門 WebGIS 的開發(fā)者也適合已經(jīng)在做前端但第一次接觸空間數(shù)據(jù)服務(wù)的同學(xué)參考。1. 整體架構(gòu)與設(shè)計(jì)思路拆解1.1 為什么是 Leaflet GeoServer PostGIS 這條鏈路先說結(jié)論這套組合之所以在中小型 GIS 項(xiàng)目里被大量使用核心原因是它把“數(shù)據(jù)管理”“服務(wù)發(fā)布”和“前端展示”三個(gè)職責(zé)拆得非常干凈。PostGIS 是 PostgreSQL 的空間擴(kuò)展本質(zhì)是把空間數(shù)據(jù)點(diǎn)、線、面當(dāng)成一種普通數(shù)據(jù)類型存儲(chǔ)在數(shù)據(jù)庫(kù)里并且提供空間索引和空間函數(shù)。GeoServer 是一個(gè) Java 寫的開源地圖服務(wù)器它能連接 PostGIS把數(shù)據(jù)庫(kù)里的矢量數(shù)據(jù)發(fā)布成符合 OGC 標(biāo)準(zhǔn)的 WMS、WFS、WMTS 服務(wù)。Leaflet 是一個(gè)輕量級(jí)的前端地圖庫(kù)負(fù)責(zé)在瀏覽器里請(qǐng)求這些服務(wù)然后把地圖渲染出來。這個(gè)三層架構(gòu)最舒服的地方在于前端不直接連數(shù)據(jù)庫(kù)也不直接讀 Shapefile 文件而是通過一個(gè)標(biāo)準(zhǔn)化的服務(wù)層來拿數(shù)據(jù)。這樣做的好處非常實(shí)際。第一是安全。數(shù)據(jù)庫(kù)的連接信息只暴露給 GeoServer前端拿到的只是圖片或者 GeoJSON 數(shù)據(jù)不需要擔(dān)心數(shù)據(jù)庫(kù)賬號(hào)密碼泄露。第二是性能。GeoServer 會(huì)在服務(wù)端完成空間過濾、坐標(biāo)轉(zhuǎn)換、樣式渲染前端只需要展示結(jié)果這對(duì)低配置的客戶端設(shè)備尤其友好。第三是標(biāo)準(zhǔn)。你換掉 Leaflet 改成 OpenLayers或者換掉 GeoServer 改成 MapServer其他部分基本不用動(dòng)因?yàn)榇蠹叶甲裱?WMS/WMTS 這些標(biāo)準(zhǔn)協(xié)議。1.2 與直接加載 GeoJSON 的方案對(duì)比我之前見過很多前端開發(fā)者用 Leaflet 的時(shí)候習(xí)慣直接加載 GeoJSON 文件。說實(shí)話這種方式在數(shù)據(jù)量小、不需要更新的場(chǎng)景下完全夠用但一旦進(jìn)入真實(shí)業(yè)務(wù)場(chǎng)景問題就出現(xiàn)了。直接加載 GeoJSON 意味著所有數(shù)據(jù)都要一次性傳到瀏覽器端。五萬個(gè)多邊形是什么概念算下來大概幾十兆甚至上百兆的 HTTP 響應(yīng)瀏覽器直接卡死。而且數(shù)據(jù)是靜態(tài)的如果服務(wù)端數(shù)據(jù)庫(kù)里的數(shù)據(jù)變了前端拿到的還是舊數(shù)據(jù)。用 GeoServer 發(fā)布 PostGIS 數(shù)據(jù)則完全不一樣。前端請(qǐng)求的是瓦片圖片或者按需請(qǐng)求的矢量數(shù)據(jù)GeoServer 會(huì)在服務(wù)端做空間過濾每次只返回可視范圍內(nèi)的數(shù)據(jù)。數(shù)據(jù)更新只需要改數(shù)據(jù)庫(kù)前端刷新頁面就能看到最新數(shù)據(jù)。坐標(biāo)轉(zhuǎn)換、樣式調(diào)整、比例尺縮放級(jí)別控制這些事也都在服務(wù)端幫你處理好了不需要寫一堆前端代碼去處理。所以在項(xiàng)目起步階段就應(yīng)該想清楚如果你做的是演示項(xiàng)目直接讀 GeoJSON 沒問題但如果你的項(xiàng)目要落地、要迭代甚至要支撐多個(gè)業(yè)務(wù)系統(tǒng)走 GeoServer 這條路才是正解。2. PostGIS 端的數(shù)據(jù)準(zhǔn)備與建模細(xì)節(jié)2.1 空間數(shù)據(jù)入庫(kù)的基本操作既然 GeoServer 發(fā)布的是 PostGIS 里的數(shù)據(jù)那第一步就是把空間數(shù)據(jù)放進(jìn)去。最常見的方式是用shp2pgsql這個(gè)命令行工具把 Shapefile 導(dǎo)入到 PostGIS 數(shù)據(jù)庫(kù)。假設(shè)你有一個(gè)cities.shp文件里面的坐標(biāo)系是 WGS84EPSG:4326導(dǎo)入命令大概是這樣的shp2pgsql -s 4326 -I -W utf8 cities.shp public.cities | psql -U postgres -d gisdb這條命令里幾個(gè)參數(shù)都很關(guān)鍵。-s 4326指定源數(shù)據(jù)的 SRID-I表示導(dǎo)入的同時(shí)創(chuàng)建空間索引-W utf8指定字符編碼很多中文亂碼問題都是因?yàn)檫@里沒指定對(duì)。如果文件編碼原本是 GBK這里就要改成-W gbk。導(dǎo)入完成之后可以用下面這條 SQL 快速驗(yàn)證SELECT ST_SRID(geom) AS srid, ST_GeometryType(geom) AS geom_type, COUNT(*) AS cnt FROM public.cities GROUP BY srid, geom_type;我習(xí)慣先做這一步檢查確認(rèn)空間參考和幾何類型都符合預(yù)期再進(jìn) GeoServer 配置。很多人忽略了這個(gè)環(huán)節(jié)結(jié)果發(fā)布之后圖層顯示不出來回頭排查才發(fā)現(xiàn)是坐標(biāo)系對(duì)不上。2.2 空間索引與 SRID 選擇對(duì)性能的影響PostGIS 里最常見的性能殺手就是表里沒有空間索引?？臻g索引用的是 PostgreSQL 的 Gist 索引機(jī)制它把地理對(duì)象按空間位置進(jìn)行預(yù)排序查詢的時(shí)候能快速砍掉大量無關(guān)記錄。CREATE INDEX idx_cities_geom ON public.cities USING GIST (geom);這個(gè)語句一定要建而且要在數(shù)據(jù)導(dǎo)入完成后盡快建。沒有空間索引的話GeoServer 在做空間過濾查詢時(shí)會(huì)對(duì)整張表做全表掃描數(shù)據(jù)量一大前端地圖拖動(dòng)起來就是一卡一卡的嚴(yán)重影響體驗(yàn)。SRID 的選擇同樣重要。Web 地圖服務(wù)里最常用的兩個(gè)坐標(biāo)系一個(gè)是 EPSG:4326就是經(jīng)緯度坐標(biāo)另一個(gè)是 EPSG:3857也就是 Web Mercator它是 Google Maps 和絕大多數(shù)在線底圖用的坐標(biāo)系。Leaflet 默認(rèn)用的就是 EPSG:3857所以如果你的數(shù)據(jù)是 4326 的GeoServer 在發(fā)布時(shí)會(huì)自動(dòng)做坐標(biāo)轉(zhuǎn)換。這個(gè)過程是無感的但如果數(shù)據(jù)精度要求很高要注意轉(zhuǎn)換本身會(huì)引入微小的偏差。3. GeoServer 發(fā)布 PostGIS 圖層的完整流程3.1 創(chuàng)建數(shù)據(jù)源與配置參數(shù)GeoServer 的數(shù)據(jù)源在它的術(shù)語里叫 Store對(duì)應(yīng)的就是一個(gè) PostGIS 數(shù)據(jù)庫(kù)連接。進(jìn)入 GeoServer 管理界面之后在“數(shù)據(jù)存儲(chǔ)”里選擇“添加新的存儲(chǔ)”然后選“PostGIS - PostGIS 數(shù)據(jù)庫(kù)”。這里要填的參數(shù)有幾個(gè)容易踩坑的地方。連接參數(shù)如果本機(jī)測(cè)試主機(jī)名填localhost或者127.0.0.1都可以端口默認(rèn) 5432。數(shù)據(jù)庫(kù)名、用戶名、密碼按實(shí)際填但有一個(gè)容易被忽略的選項(xiàng)是“Schema”如果表不在默認(rèn)publicschema 里這里會(huì)查不到表。填完數(shù)據(jù)庫(kù)連接之后建議先點(diǎn)一下“驗(yàn)證連接”按鈕確認(rèn)能看到“連接成功”的提示。我自己遇到過很多次數(shù)據(jù)庫(kù)連接沒問題但密碼里包含特殊字符導(dǎo)致一直連不上的情況。還有一次是 GeoServer 服務(wù)器上沒裝 PostgreSQL 客戶端驅(qū)動(dòng)折騰了很久才發(fā)現(xiàn)。3.2 圖層發(fā)布與坐標(biāo)參考系設(shè)置數(shù)據(jù)源創(chuàng)建成功之后GeoServer 會(huì)列出這個(gè)數(shù)據(jù)庫(kù)里所有帶幾何字段的表。選擇你要發(fā)布的表進(jìn)入“發(fā)布圖層”頁面這里有幾個(gè)關(guān)鍵項(xiàng)要認(rèn)真看。“坐標(biāo)參考系”這塊是重點(diǎn)。如果數(shù)據(jù)庫(kù)里的數(shù)據(jù)已經(jīng)指定了正確的 SRIDGeoServer 會(huì)自動(dòng)識(shí)別“聲明 SRS”的值如果識(shí)別不了就需要手動(dòng)填。很多新手在這里直接默認(rèn) 4326也不管數(shù)據(jù)實(shí)際是什么坐標(biāo)系最終結(jié)果就是圖層位置對(duì)不上底圖得偏移到天邊去。建議發(fā)布圖層前先在查詢工具里執(zhí)行一段 SQL確認(rèn)幾何字段的 SRIDSELECT DISTINCT ST_SRID(geom) FROM public.cities;還有一個(gè)“原生邊界”和“經(jīng)緯度邊界”的按鈕發(fā)布頁面上有“從數(shù)據(jù)計(jì)算”和“從 SRS 計(jì)算”兩個(gè)選項(xiàng)。建議首次發(fā)布時(shí)選擇“從數(shù)據(jù)計(jì)算”讓 GeoServer 自動(dòng)算出數(shù)據(jù)的實(shí)際范圍能避免很多顯示問題。圖層發(fā)布完成后可以先用 GeoServer 自帶的“Layer Preview”預(yù)覽一下。如果能在這個(gè)頁面正常顯示說明服務(wù)端已經(jīng)沒問題接下來就可以安心寫前端代碼了。3.3 WMS、WMTS、WFS 三種服務(wù)怎么選GeoServer 發(fā)布圖層之后同一份數(shù)據(jù)可以同時(shí)提供好幾種服務(wù)這一點(diǎn)很多人沒意識(shí)到。WMSWeb Map Service返回的是圖片適合直接鋪在 Leaflet 上做底圖WMTSWeb Map Tile Service返回的是預(yù)先切好的瓦片性能最好WFSWeb Feature Service返回的是矢量數(shù)據(jù)適合做屬性查詢和編輯。實(shí)際項(xiàng)目中我一般用 WMS 作為默認(rèn)方案因?yàn)榕渲煤?jiǎn)單、樣式渲染在服務(wù)端完成但如果圖層涉及的瓦片數(shù)量很多、需要兼顧高并發(fā)訪問就優(yōu)先上 WMTS。WFS 雖然靈活能拿到屬性數(shù)據(jù)但要注意這種服務(wù)把真實(shí)數(shù)據(jù)直接暴露給了前端有權(quán)限管控要求的場(chǎng)景必須做權(quán)限校驗(yàn)不能隨意開放。4. Leaflet 前端調(diào)用與核心代碼實(shí)現(xiàn)4.1 通過 L.tileLayer.wms 加載 WMS 服務(wù)Leaflet 里加載 WMS 服務(wù)最直接的方式是用自帶的L.tileLayer.wms方法。以下是一個(gè)可用的最小示例const map L.map(map, { center: [39.9, 116.4], zoom: 10 }); L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { maxZoom: 19 }).addTo(map); const geoserverUrl http://localhost:8080/geoserver/gisdb/wms; const postgisLayer L.tileLayer.wms(geoserverUrl, { layers: gisdb:cities, format: image/png, transparent: true, version: 1.1.0, srs: EPSG:3857 }); postgisLayer.addTo(map);這里面幾個(gè)參數(shù)要解釋一下。layers是工作區(qū)名加冒號(hào)加圖層名例如gisdb:cities這個(gè)值在 GeoServer 的圖層列表里有現(xiàn)成的復(fù)制粘貼避免手誤。transparent: true表示只顯示數(shù)據(jù)背景透明這樣才能疊加在其他底圖上面。format: image/png是推薦的圖片格式如果需要背景透明必須用 png。這里有個(gè)我自己踩過坑的地方version參數(shù)不寫的話GeoServer 默認(rèn)可能返回 1.3.0 版本而 1.3.0 的 WMS 里坐標(biāo)軸順序從x,y換成了lat,lon導(dǎo)致個(gè)別場(chǎng)景出現(xiàn)偏移。我的習(xí)慣是顯式指定為 1.1.0省得后續(xù)出問題再排查。4.2 用 WMTS 實(shí)現(xiàn)更高效的瓦片加載如果你的圖層不需要頻繁更新但訪問量很大那我強(qiáng)烈建議用 GeoWebCache 把圖層切成瓦片然后讓 Leaflet 按xyz方式直接加載。GeoServer 內(nèi)置了 GeoWebCache不需要額外部署。切完瓦片之后圖層會(huì)多出一個(gè) WMTS 地址在 Leaflet 里可以用下面的方式接const wmtsLayer L.tileLayer( http://localhost:8080/geoserver/gwc/service/wmts? layergisdb:citiesstyletilematrixsetEPSG:3857 ServiceWMTSRequestGetTileVersion1.0.0 Formatimage/pngTileMatrix{z}TileCol{x}TileRow{y}, { maxZoom: 19 } );要注意tilematrixset必須和 GeoServer 里配置的切片矩陣集一致否則請(qǐng)求會(huì)返回空白。另外 WMTS 的瓦片是固定級(jí)別緩存的如果修改了原始數(shù)據(jù)需要執(zhí)行“重新切片”否則看到的還是舊瓦片。4.3 用 GeoJSON 圖層做交互查詢瓦片服務(wù)的好處是性能好但缺點(diǎn)也很明顯圖片里的要素沒法直接點(diǎn)擊獲得屬性。如果你需要點(diǎn)擊要素然后彈窗顯示屬性信息就需要用 WFS 服務(wù)加載 GeoJSON然后通過L.geoJSON渲染。const geojsonLayer L.geoJSON(null, { onEachFeature: function (feature, layer) { layer.bindPopup( 名稱 feature.properties.name br 編碼 feature.properties.code ); } }); $.ajax({ url: http://localhost:8080/geoserver/gisdb/ows, type: GET, data: { service: WFS, version: 1.0.0, request: GetFeature, typeName: gisdb:cities, srsName: EPSG:3857, outputFormat: application/json }, success: function (res) { geojsonLayer.addData(res); map.addLayer(geojsonLayer); } });這里有一個(gè)非常實(shí)際的性能問題如果表里有很多要素一次性GetFeature會(huì)把所有數(shù)據(jù)拉到前端頁面瞬間崩潰。我的經(jīng)驗(yàn)是務(wù)必加范圍限制用bbox參數(shù)把請(qǐng)求范圍限制在地圖當(dāng)前可視范圍內(nèi)然后配合count限制返回條數(shù)還可以用CQL_FILTER加條件過濾比如只查詢某個(gè)字段等于某個(gè)值的數(shù)據(jù)。// 在請(qǐng)求參數(shù)里加上 bbox 和 CQL 過濾 data: { bbox: map.getBounds().toBBoxString(), CQL_FILTER: code LIKE 010% }這樣返回的數(shù)據(jù)量就能控制在很小的范圍內(nèi)頁面交互也會(huì)流暢很多。5. 常見問題與排查技巧實(shí)錄5.1 圖層顯示空白或偏移的排查思路很多人在 Page Preview 里能看到圖層但是到 Leaflet 里就顯示不出來或者偏移得離譜。這類問題絕大部分出在坐標(biāo)系匹配上。GeoServer 發(fā)布 4326 數(shù)據(jù)但前端用 Web Mercator 瓦片疊加兩者如果不做正確轉(zhuǎn)換坐標(biāo)就會(huì)偏。排查第一步先確認(rèn) GeoServer 預(yù)覽地址的返回結(jié)果是否正常。如果 Geoserver 預(yù)覽正常說明服務(wù)端沒問題第二步確認(rèn)前端代碼里srs參數(shù)或者crs配置是否正確第三步檢查圖層范圍有時(shí)候數(shù)據(jù)范圍本身不在你的初始視圖中心那自然看不到內(nèi)容。我踩過最詭異的一次坑是cities表里混入了幾條坐標(biāo)異常的數(shù)據(jù)字段值是空的GeoServer 發(fā)布時(shí)沒有報(bào)錯(cuò)但渲染結(jié)果始終有一塊空白最后用 SQL 查出來SELECT * FROM public.cities WHERE geom IS NULL OR NOT ST_IsValid(geom);清理掉這些臟數(shù)據(jù)之后圖層立刻就正常了。所以數(shù)據(jù)入庫(kù)前的質(zhì)量檢查非常重要不要嫌麻煩。5.2 跨域訪問問題與靜態(tài)資源部署Leaflet 頁面和 GeoServer 不在同一個(gè)端口的情況下瀏覽器會(huì)發(fā)起跨域請(qǐng)求。GeoServer 本身支持 CORS但需要確認(rèn) web.xml 里是否配置了跨域過濾器。如果你是自己打包的 GeoServer可以參考以下方式確認(rèn)打開webapps/geoserver/WEB-INF/web.xml搜索cors或cross-origin如果沒有相關(guān)過濾器需要手動(dòng)加上跨域配置后重啟 GeoServer如果不想動(dòng) Java 容器配置另一個(gè)更實(shí)用、更推薦的辦法是用 Nginx 做反向代理把 GeoServer 和靜態(tài)頁面放在同一個(gè)域名下。比如location /geoserver/ { proxy_pass http://127.0.0.1:8080/geoserver/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }這樣前端請(qǐng)求/geoserver/...的路徑和請(qǐng)求靜態(tài)資源同源不存在跨域問題以后遷移服務(wù)器也方便只改 Nginx 配置就行。5.3 中文亂碼問題最常見的亂碼來源有兩個(gè)。一個(gè)是 Shapefile 轉(zhuǎn)數(shù)據(jù)庫(kù)階段的編碼問題另一個(gè)是 GeoServer 樣式文件編碼問題。前者用shp2pgsql導(dǎo)入時(shí)指定-W GBK或-W utf8基本能解決后者如果是用內(nèi)置的 SLD 文件要確保文件頭聲明了 UTF-8。如果圖層屬性查詢結(jié)果在 GeoServer 頁面顯示正常但 Leaflet 彈窗里亂碼那大概率是 HTTP 響應(yīng)的字符集問題?？梢栽谡?qǐng)求 WFS 時(shí)加一個(gè)參數(shù)強(qiáng)制指定編碼data: { outputFormat: application/json; charsetutf-8 }前端 Ajax 請(qǐng)求也建議顯式聲明scriptCharset: utf-8雙保險(xiǎn)。5.4 圖層緩存問題本地調(diào)試時(shí)經(jīng)常遇到改了數(shù)據(jù)庫(kù)數(shù)據(jù)頁面還是舊數(shù)據(jù)的情況。如果用的 WMS 且沒開 GeoWebCache通常不會(huì)緩存如果走的是 WMTS 或者打開了 WMS 的緩存策略那就需要手動(dòng)清緩存。我常用的解決辦法是在 GeoServer 管理界面里找到對(duì)應(yīng)圖層的 Tile Caching 選項(xiàng)選擇“清空緩存”然后刷新頁面。還有一種臨時(shí)開發(fā)技巧在預(yù)覽 URL 后面拼接一個(gè)隨機(jī)參數(shù)比如_tDate.now()強(qiáng)制瀏覽器繞過緩存。但這個(gè)只適合調(diào)試不能帶到生產(chǎn)環(huán)境。6. 性能優(yōu)化與生產(chǎn)環(huán)境部署經(jīng)驗(yàn)6.1 從 WMS 升級(jí)到 WMTS 的實(shí)踐建議如果項(xiàng)目訪問量上來了第一個(gè)性能瓶頸通常出現(xiàn)在 WMS 動(dòng)態(tài)渲染上。WMS 的每一次請(qǐng)求都會(huì)實(shí)時(shí)查數(shù)據(jù)庫(kù)、渲染圖片并發(fā)越高越吃力。GeoServer 里啟用 GeoWebCache 之后可以把渲染結(jié)果按瓦片緩存下來大幅降低重復(fù)計(jì)算開銷。在“圖層”列表里找到你要發(fā)布的圖層進(jìn)入 Tile Caching 選項(xiàng)創(chuàng)建緩存切片矩陣集一般選EPSG:3857它會(huì)自動(dòng)生成全球 0-22 級(jí)瓦片。然后選擇“手動(dòng)播種”也就是預(yù)生成指定范圍的瓦片。建議先只生成實(shí)際業(yè)務(wù)涉及的范圍和 8-16 級(jí)避免一開始把全世界都切片白白浪費(fèi)存儲(chǔ)和計(jì)算時(shí)間。WMTS 和 WMS 展示效果在視覺上幾乎沒差別但資源占用完全是兩個(gè)量級(jí)。對(duì)前端來說WMTS 就是普通圖片瓦片加載速度極快對(duì)服務(wù)端來說切片之后基本是純靜態(tài)文件輸出QPS 能成倍提升。6.2 離線部署與 Leaflet 離線加載有些項(xiàng)目運(yùn)行在政務(wù)內(nèi)網(wǎng)或沒有外部網(wǎng)絡(luò)的環(huán)境里這時(shí)候“l(fā)eaflet 離線加載”就變得非常關(guān)鍵。我做過幾次這種項(xiàng)目總結(jié)一下經(jīng)驗(yàn)。第一步底圖瓦片必須先準(zhǔn)備好。可以用離線的 XYZ 瓦片目錄也可以把在線瓦片批量下載到本地 Nginx 靜態(tài)目錄。Leaflet 加載本地底圖瓦片很簡(jiǎn)單只需要把 URL 指到本地路徑L.tileLayer(./tiles/{z}/{x}/{y}.png, { minZoom: 3, maxZoom: 18 }).addTo(map);第二步GeoServer 本身可以運(yùn)行在同一臺(tái)內(nèi)網(wǎng)機(jī)器上數(shù)據(jù)、服務(wù)都在內(nèi)網(wǎng)不需要連接外網(wǎng)。只要瀏覽器能訪問到內(nèi)網(wǎng)的 GeoServer 地址整個(gè)地圖應(yīng)用就能正常跑起來。這樣整套系統(tǒng)就完全離線化了。第三步要特別注意本地瓦片目錄的命名和層級(jí)必須規(guī)范。我之前遇到過下載工具產(chǎn)出的目錄層級(jí)和 Leaflet 期望的不一致結(jié)果瓦片怎么都加載不出來。最穩(wěn)妥的方式是先放一張測(cè)試瓦片到{z}/{x}/{y}.png對(duì)應(yīng)目錄用瀏覽器直接訪問那張圖片能打開就說明結(jié)構(gòu)沒問題。6.3 配合 Nginx 部署的前端工程Leaflet 應(yīng)用本質(zhì)上是純靜態(tài)頁面打包構(gòu)建后直接丟給 Nginx 托管就行。如果是以 Vue 或 React 工程形式開發(fā)構(gòu)建完會(huì)生成dist目錄里面是index.html和一堆靜態(tài)資源。Nginx 配置大致如下server { listen 80; server_name your.domain.com; root /var/www/leaflet-app/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }注意try_files這一行的作用很重要前端路由如果是 history 模式刷新頁面時(shí) Nginx 會(huì)按路徑去找文件。不加這行子路徑刷新就會(huì) 404。雖然 Leaflet 本身是純頁面地圖不一定用路由但工程化項(xiàng)目基本都會(huì)用到框架路由寫上這行更保險(xiǎn)。另外建議 Gzip 壓縮開啟尤其對(duì) JS、CSS、JSON 這類文本資源能明顯減小傳輸體積gzip on; gzip_types text/plain text/css application/json application/javascript image/svgxml;6.4 GeoServer 本身部署時(shí)的 JVM 參數(shù)項(xiàng)目上線前GeoServer 的 JVM 堆內(nèi)存設(shè)置值得檢查一下。GeoServer 是 Java 應(yīng)用默認(rèn)啟動(dòng)腳本可能只給了 256M 或 512M一旦遇到大規(guī)模 WFS 請(qǐng)求或大量瓦片并發(fā)很容易觸發(fā)內(nèi)存溢出。在啟動(dòng)腳本或環(huán)境變量里調(diào)整export JAVA_OPTS-Xms1024M -Xmx2048M -XX:MaxPermSize256m具體數(shù)值根據(jù)機(jī)器內(nèi)存來定一般-Xmx設(shè)置到物理內(nèi)存的一半左右比較合理但別超過物理內(nèi)存否則也會(huì)導(dǎo)致系統(tǒng)整體變慢。7. 一個(gè)完整的小型實(shí)踐案例7.1 場(chǎng)景描述與數(shù)據(jù)準(zhǔn)備說了這么多理論最后用一個(gè)完整的小例子把流程串起來。假設(shè)我們手頭有一批全國(guó)主要城市的點(diǎn)數(shù)據(jù)存在public.cities表里字段有name城市名、province省份、pop人口數(shù)量、geomPoint 幾何字段。目標(biāo)是在 Leaflet 地圖上把這些城市展示出來點(diǎn)擊城市彈窗顯示名稱和人口并且支持輸入關(guān)鍵字篩選。先把數(shù)據(jù)準(zhǔn)備好確認(rèn)字段如下SELECT name, province, pop, ST_AsText(geom) FROM public.cities LIMIT 5;如果輸出的 geom 是坐標(biāo)點(diǎn)數(shù)據(jù)基本可用。7.2 GeoServer 發(fā)布操作記錄我在 GeoServer 里的操作流程是這樣新建工作區(qū)gisdb。添加 PostGIS 數(shù)據(jù)存儲(chǔ)連接gisdb數(shù)據(jù)庫(kù)。發(fā)布cities圖層設(shè)置 SRS 為EPSG:4326邊界從數(shù)據(jù)計(jì)算。在“圖層預(yù)覽”里驗(yàn)證選OpenLayers預(yù)覽方式能看到散點(diǎn)圖即表示發(fā)布成功。編輯樣式用 SLD 自定義點(diǎn)顏色和大小。開啟 Tile Caching對(duì) 0-10 級(jí)做預(yù)切片。這套流程熟練之后十分鐘左右就能完成前期慢主要是因?yàn)閷?duì)界面布局不熟。7.3 Leaflet 頁面實(shí)現(xiàn)交互前端頁面我寫了兩個(gè)核心功能塊。第一塊是常規(guī)的地圖初始化和點(diǎn)標(biāo)記加載用 WFS 加載 GeoJSON 點(diǎn)數(shù)據(jù)第二塊是關(guān)鍵字查詢城市。查詢功能本身可以用瀏覽器端過濾 GeoJSON 數(shù)據(jù)來做但如果數(shù)據(jù)量大我建議直接走后端 CQL 過濾實(shí)現(xiàn)方式是在請(qǐng)求 WFS 時(shí)加上CQL_FILTERfunction queryCity(keyword) { geojsonLayer.clearLayers(); $.ajax({ url: http://localhost:8080/geoserver/gisdb/ows, type: GET, data: { service: WFS, version: 1.0.0, request: GetFeature, typeName: gisdb:cities, srsName: EPSG:3857, outputFormat: application/json, CQL_FILTER: name LIKE % keyword % }, success: function (res) { geojsonLayer.addData(res); } }); }這個(gè)實(shí)現(xiàn)方案在中小數(shù)據(jù)量下表現(xiàn)很好響應(yīng)時(shí)間基本在幾百毫秒以內(nèi)用戶體驗(yàn)非常流暢。8. 項(xiàng)目目錄結(jié)構(gòu)與體積優(yōu)化備注如果你下載的 zip 解壓之后是一個(gè)完整的前端工程里面通常包含index.html主頁面js/Leaflet 及相關(guān)插件css/樣式data/本地?cái)?shù)據(jù)緩存或離線瓦片目錄本文還有配套的精品資源點(diǎn)擊獲取