最近遇到个需求,使用mapboxgl绘制行政区划图层,要求把行政区划拔高做出立体效果,以便突出显示。
拿到这个需求后,感觉很简单呀,只需要用fill-extrusion方式绘制就可以啦,实现出来是这个样子的
效果有点丑,并且这里有个问题就是我的数据是区县数据,而绘制出的效果却没有区分出各个区县的边界 于是从下面两个方向做优化处理:
首先尝试不同区县按颜色区分。这个简单,只需要设置fill-extrusion-color即可
设置完效果如下
效果好多了。
接下来继续尝试添加区县边界,之前也看到过类似效果,感觉应该也好实现
然鹅。。。
经过一番查找,发现发现mapboxgl可以对面进行拔高处理,但没有对线做拔高处理的方法,也就是说不支持绘制3D线。这可如何是好
既然线数据不能做拔高处理,那么把线处理成面总可以吧
于是从这个思路出发,按下面两步来操作
嗯,效果还不错
在绘制边线缓冲面时,需要注意下面两点:
其实,这里还有个问题,由于这里的边界是按缓冲面的方式绘制,所以在地图缩放的时候边界的宽度不会像线那样按固定像素宽度显示,会出现放大地图的时候边线越来越宽,缩小地图的时候边线变越来越窄的问题
解决思路:按各层级分辨率分别对行政区划边界做缓冲计算,然后再分别对应显示在各个层级
各层级的resolutions,也就是各比例尺下地图分辨率,也就是一个像素代表的地图单位,这里要按米为单位进行缓冲,用的是EPSG:900913的分辨率,也就是各比例尺下一个像素代表多少米
核心代码如下
由于拿到数据的只有行政区划的geojson格式面数据,而缓冲时需要用的是线数据,因此需要做面转线处理。
最终效果如下
总结
在线示例
在线示例: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/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。
页面更新:2024-05-01
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号