关于mapbox: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/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。