最近遇到個需求，使用mapboxgl繪製行政區劃圖層，要求把行政區劃拔高做出立體效果，以便突出顯示。
拿到這個需求後，感覺很簡單呀，只需要用fill-extrusion方式繪製就可以啦，實現出來是這個樣子的
效果有點醜，並且這裡有個問題就是我的資料是區縣資料，而繪製出的效果卻沒有區分出各個區縣的邊界
於是從下面兩個方向做優化處理：
- 各區縣按不同顏色區分
- 新增區縣邊界
首先嚐試不同區縣按顏色區分。這個簡單，只需要設定fill-extrusion-color即可
設定完效果如下
效果好多了。
接下來繼續嘗試新增區縣邊界，之前也看到過類似效果，感覺應該也好實現
然鵝。。。
經過一番查詢，發現發現mapboxgl可以對面進行拔高處理，但沒有對線做拔高處理的方法，也就是說不支援繪製3D線。這可如何是好
既然線資料不能做拔高處理，那麼把線處理成面總可以吧
於是從這個思路出發，按下面兩步來操作
- 對行政區劃邊界進行緩衝，這裡需要用到
turf.js的緩衝方法 - 獲取到緩衝後的邊介面資料，再用
fill-extrusion方式繪製
嗯，效果還不錯
在繪製邊線緩衝面時，需要注意下面兩點：
fill-extrusion-height設定的值需要比面資料的稍微高出一些，否則顯示時會有遮蓋問題fill-extrusion-base（底部高度）引數可以設定為與前面繪製面的fill-extrusion-height引數一致，如果也採用預設0的話，邊線就像一面牆，會感覺很醜
其實，這裡還有個問題，由於這裡的邊界是按緩衝面的方式繪製，所以在地圖縮放的時候邊界的寬度不會像線那樣按固定畫素寬度顯示，會出現放大地圖的時候邊線越來越寬，縮小地圖的時候邊線變越來越窄的問題
解決思路：按各層級解析度分別對行政區劃邊界做緩衝計算，然後再分別對應顯示在各個層級
各層級的
resolutions，也就是各比例尺下地圖解析度，也就是一個畫素代表的地圖單位，這裡要按米為單位進行緩衝，用的是EPSG:900913的解析度，也就是各比例尺下一個畫素代表多少米
核心程式碼如下
由於拿到資料的只有行政區劃的geojson格式面資料，而緩衝時需要用的是線資料，因此需要做面轉線處理。
最終效果如下
總結
- 當對行政區劃面資料做立體展示時，僅用
fill-extrusion方式繪製，效果不好，無法顯示邊線 mapboxgl可以對面進行拔高處理，但沒有對線做拔高處理的方法，也就是說不支援繪製3D線- 通過對邊線資料緩衝，獲取緩衝後面資料，當做邊線使用
- 由於單次緩衝半徑固定，從而得到的緩衝面對大小固定，會出現地圖縮放邊線寬度也隨著縮放的問題
- 通過
resolutions，逐級對邊線處理，按層級顯示，可以得到較好的顯示效果
線上示例
線上示例：http://gisarmory.xyz/blog/index.html?demo=MapboxGL3DLine
程式碼地址：http://gisarmory.xyz/blog/index.html?source=MapboxGL3DLine
原文地址：http://gisarmory.xyz/blog/index.html?blog=MapboxGL3DLine
關注《GIS兵器庫》， 只給你網上搜不到的GIS知識技能
本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含連結： http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。