mapboxgl繪制3D線

最近遇到個需求，使用mapboxgl繪制行政區划圖層，要求把行政區划拔高做出立體效果，以便突出顯示。

拿到這個需求后，感覺很簡單呀，只需要用fill-extrusion方式繪制就可以啦，實現出來是這個樣子的

效果有點丑，並且這里有個問題就是我的數據是區縣數據，而繪制出的效果卻沒有區分出各個區縣的邊界
於是從下面兩個方向做優化處理：

1. 各區縣按不同顏色區分
2. 添加區縣邊界

首先嘗試不同區縣按顏色區分。這個簡單，只需要設置fill-extrusion-color即可

設置完效果如下

效果好多了。

接下來繼續嘗試添加區縣邊界，之前也看到過類似效果，感覺應該也好實現

然鵝。。。

經過一番查找，發現發現mapboxgl可以對面進行拔高處理，但沒有對線做拔高處理的方法，也就是說不支持繪制3D線。這可如何是好

既然線數據不能做拔高處理，那么把線處理成面總可以吧

於是從這個思路出發，按下面兩步來操作

1. 對行政區划邊界進行緩沖，這里需要用到turf.js的緩沖方法
2. 獲取到緩沖后的邊界面數據，再用fill-extrusion方式繪制

嗯，效果還不錯

在繪制邊線緩沖面時，需要注意下面兩點：

1. fill-extrusion-height設置的值需要比面數據的稍微高出一些，否則顯示時會有遮蓋問題
2. fill-extrusion-base（底部高度）參數可以設置為與前面繪制面的fill-extrusion-height參數一致，如果也采用默認0的話，邊線就像一面牆，會感覺很丑

其實，這里還有個問題，由於這里的邊界是按緩沖面的方式繪制，所以在地圖縮放的時候邊界的寬度不會像線那樣按固定像素寬度顯示，會出現放大地圖的時候邊線越來越寬，縮小地圖的時候邊線變越來越窄的問題

解決思路：按各層級分辨率分別對行政區划邊界做緩沖計算，然后再分別對應顯示在各個層級

各層級的resolutions，也就是各比例尺下地圖分辨率，也就是一個像素代表的地圖單位，這里要按米為單位進行緩沖，用的是EPSG:900913的分辨率，也就是各比例尺下一個像素代表多少米

核心代碼如下

由於拿到數據的只有行政區划的geojson格式面數據，而緩沖時需要用的是線數據，因此需要做面轉線處理。

最終效果如下

總結

1. 當對行政區划面數據做立體展示時，僅用fill-extrusion方式繪制，效果不好，無法顯示邊線
2. mapboxgl可以對面進行拔高處理，但沒有對線做拔高處理的方法，也就是說不支持繪制3D線
3. 通過對邊線數據緩沖，獲取緩沖后面數據，當做邊線使用
4. 由於單次緩沖半徑固定，從而得到的緩沖面對大小固定，會出現地圖縮放邊線寬度也隨着縮放的問題
5. 通過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/），不得用於商業目的，基於本文修改后的作品務必以相同的許可發布。