mapboxgl绘制3D线教程

设置完效果如下

效果好多了。

接下来继续尝试添加区县边界，之前也看到过类似效果，感觉应该也好实现

然鹅。。。

经过一番查找，发现发现mapboxgl可以对面进行拔高处理，但没有对线做拔高处理的方法，也就是说不支持绘制3D线。这可如何是好

既然线数据不能做拔高处理，那么把线处理成面总可以吧

于是从这个思路出发，按下面两步来操作

1. 对行政区划边界进行缓冲，这里需要用到turf.js的缓冲方法

2. 获取到缓冲后的边界面数据，再用fill-extrusion方式绘制

嗯，效果还不错

在绘制边线缓冲面时，需要注意下面两点：

1. fill-extrusion-height设置的值需要比面数据的稍微高出一些，否则显示时会有遮盖问题

2. fill-extrusion-base（底部高度）参数可以设置为与前面绘制面的fill-extrusion-height参数一致，如果也采用默认0的话，边线就像一面墙，会感觉很丑

其实，这里还有个问题，由于这里的边界是按缓冲面的方式绘制，所以在地图缩放的时候边界的宽度不会像线那样按固定像素宽度显示，会出现放大地图的时候边线越来越宽，缩小地图的时候边线变越来越窄的问题

解决思路：按各层级分辨率分别对行政区划边界做缓冲计算，然后再分别对应显示在各个层级

各层级的resolutions，也就是各比例尺下地图分辨率，也就是一个像素代表的地图单位，这里要按米为单位进行缓冲，用的是EPSG:900913的分辨率，也就是各比例尺下一个像素代表多少米

核心代码如下

由于拿到数据的只有行政区划的geojson格式面数据，而缓冲时需要用的是线数据，因此需要做面转线处理。

最终效果如下

总结

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
戳我获取！！**](https://bbs.csdn.net/topics/618164986)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！