GeoServer 多級地圖發佈流程

事情起因

最近參與了一個是以地圖爲主的項目（見下圖）。

其中有個功能是框選截圖功能，功能是比較簡單。結合html2canvas和地圖自身的畫矩形工具很快就實現了截圖功能。但是發現加載在線第三方的地圖底圖資源（智圖）存在不允許跨域的問題。載圖完成後圖片沒有底圖。所以就打算本地發佈瓦片底圖，解決跨域的問題同時爲後期發佈自定義底圖做準備。

準備工作

1. 服務選擇： 因爲之前接觸過ArcServer的地圖發佈服務和ArcGis前端組件。本項目中對地圖服務的要求並不高，只是單純的用來發布瓦片底圖。同時項目中的地圖前端組件庫選用的是Leaflet開源組件。所以決定用同樣開源的GoeServer服務來發布地圖。
2. 下載安裝：GeoServer下載地址。選擇 “Production”版本下對應平臺的安裝包。安裝流程本文就不講了，請自行搜索（GeoServer運行需要java環境）。
3. 登錄GeoServer： 在地址中輸入 http://localhost:你的端口號/geoserver/web/，輸入帳號：admin，密碼：geoserver。登錄成功後跳轉到（如下圖所示頁面）後，GeoServer的準備工作就完成了。接下來我們去準備發佈地圖所用的資源文件。
   
4. 地圖文件下載器：網上有很比如：水經注萬能下載器、太樂地圖下載器、LVS地圖下載器（免費）、BIGEMAP下載器等等，基本功能和能下載的底圖資源都差不太多。本文使用的是太樂地圖下載器，選擇了Arcgis暖色圖[0-7]級來作爲本次地圖發佈的底圖。

由於用的是標準版下載器（不花錢），所以只能先下載成庫文件，再通過下載器轉成tif文件。下圖中的LXX.tif就是GeoServer發佈地圖要使用的資源文件。到此我們的地圖發佈的準備工作就完成了。接下來進入到本文的重點：地圖發佈。

地圖發佈

以上地圖發佈的準備工作就做完了。接下來我們開始發佈地圖，發佈地圖的幾個流程大致如下：創建工作區——>數據存儲——>創建圖層——>發佈地圖——>地圖切片——>切片合併，一共六個步驟。

1. 創建工作區：
   選擇數據中的:工作區–>新建工作區–>命名–>URI–>開啓需要的服務
   
   

2. 數據存儲：
   選擇數據中的:數據存儲–>添加新的數據存儲–>柵格數據源：GeoTIFF–>工作區：blue–>數據源名稱：最好和tif文件相同，方便後期管理 -->連接參數:下載到本地的LXX.tif文件這裏先選擇L00.tif。
   
   
   

3. 創建圖層：
   選擇數據中的:圖層–>添加新的資源–>添加圖層：blue：blue_00–>發佈
   
   

4. 發佈地圖：
   發佈圖層中:座標參考系統–>定義SRS:選擇和要發佈的地圖一致的座標系，本文選擇的是EPSG：3857。–>邊框：Compute from SRS bounds。一定要重新計下邊界–>保存：圖層發佈完成。
   

5. 地圖切片：
   Tile Caching中:Tile Layers–>Seed/Truncate–>Grid set: 選擇的圖層一致的座標系–>Format: image/png–>Zoom start: 當前圖層一致：00–>Zoom stop: 當前圖層一致：00–>Submit。
   
   
   

當 List 中的切片進程完成後。在GeoServer\2.13.1\data_dir\gwc\blue_L00\EPSG_3857_00\0_0目錄下，可以看到已經切片好的底圖。

6. 切片合併：
   現在把2、3、4、5步驟重複幾次，把餘下的1-7級地圖tif文件都發布並切片。把切好的瓦片圖都複製到gwc\blue_L00目錄下（如下圖）。這樣我們在訪問blue:blue00時就可以加載出0-7級的所有層級的地圖。
   

本地加載

1. 加載WMS服務：現在我們來測試下地圖是否發佈成功，本文使用的是Leaflet地圖組件庫V1.6.0版本。代碼如下：

	const map = L.map('map',{
		center: [36.00, 120.00],
		zoom:5,
		minZoom:1,
		maxZoom:7，
		crs:L.CRS.EPSG3857    								// 這裏要和發佈的地圖CRS保持一致 
	})
	const wms = L.titleLayer.WMS(
	'http://localhost:9000/geoserver/gwc/service/wms?', 	// 本地發佈地圖的WMS服務地址
	{ 
		layer:'blue:L00', 									// 圖層名稱必須和發佈的圖層名一致
		format: 'image/png',								// 地圖切片的格式
        transparent: true,							
	}).addTo(map)
	

嗯。本地加載成功，並可以在0-7級之間進行縮放。

2. 跨域：地圖發佈完成了。現在只是前端可以正常加載，但進行截圖時還是會存在不允許跨域的問題，所以還要對GeoServer的web.xml文件做如下的修改：
   
   把上圖中兩處位置代碼的註釋放開。即允許跨域的訪問地圖。

3. 截圖：接下來我們截圖測試下看看效果
   
   

OK。在前端跨域訪問的情況下。截圖後是有地圖底圖的，到此爲止我們的目標就完成了。至於底圖的加載速度嘛，比第三方是要快那麼一點點。

結束語

通過GeoServer來發布多層級地圖的流程就基本完成了。一些進階的應用比如：瓦片圖的緩存GeoWebCache等內容等有空再寫。

感謝您的閱讀，希望本文對您有所幫助。 —— chysxslt