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