mapboxgl绘制3D线
最近遇到个需求,使用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/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。
mapboxgl绘制3D线的更多相关文章
- 绘制3D的托卡马克位形图的matlab脚本文件 ThreeD.m
% 绘制3D的托卡马克位形图, (V 0.1 by Jiale Chan for Y. H. Huang) % Dee Formula % 特征参数 rzero = 2.0; rmax ...
- Python 使用 matplotlib绘制3D图形
3D图形在数据分析.数据建模.图形和图像处理等领域中都有着广泛的应用,下面将给大家介绍一下如何在Python中使用 matplotlib进行3D图形的绘制,包括3D散点.3D表面.3D轮廓.3D直线( ...
- Python绘制3D图形
来自:https://www.jb51.net/article/139349.htm 3D图形在数据分析.数据建模.图形和图像处理等领域中都有着广泛的应用,下面将给大家介绍一下如何使用python进行 ...
- 使用OpenGL ES绘制3D图形
如果应用定义的顶点不在同一个平面上,并且使用三角形把合适的顶点连接起来,就可以绘制出3D图形了. 使用OpenGL ES绘制3D图形的方法与绘制2D图形的步骤大致相同,只是绘制3D图形需要定义更多的 ...
- Python绘制3d螺旋曲线图实例代码
Axes3D.plot(xs, ys, *args, **kwargs) 绘制2D或3D数据 参数 描述 xs, ys X轴,Y轴坐标定点 zs Z值,每一个点的值都是1 zdir 绘制2D集合时使用 ...
- 【带着canvas去流浪(5)】绘制K线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
- 绘制3D的js库
有哪些值得推荐的绘制3D的js库? 4 个回答 默认排序 草皮子 HTML5/GAME 4 人赞同了该回答 只用过three.js,所以推荐这个.不清楚你打算用来做什么,总的来说,得看你的运 ...
- CAD交互绘制样条线(网页版)
在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...
- CAD交互绘制样条线(com接口)
在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...
随机推荐
- buaaoo_fourth_assignment
你轻轻地走了 一.架构设计 (1)第一次作业 类图 复杂度分析 如上图是本单元第一次作业的架构设计,由于本人最开始未发现可以直接继承官方的类,所以自己将所用到的各种type都重新建了类,于是这就导致了 ...
- 普里姆算法(Prim)
概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图(带权图)里搜索最小生成树.即此算法搜索到的边(Edge)子集所构成的树中,不但包括了连通图里的所有顶点(Vertex)且其所有边的权 ...
- linux服务之NTP及chrony时间同步
博客园 首页 联系 管理 linux服务之NTP及chrony时间同步 一.NTP时间同步 NTP(Network Time Protocol,网络时间协议)是由RFC 1305定义的时间同步 ...
- keepalived绑定单播地址、非抢占模式及LVS的TCP模式的高可用
背景:keepalived默认是组播地址进行播放,且默认地址是224.0.0.18,如果配置多个keepalived主机,会导致虚拟IP地址存在冲突问题,这种问题怎么解决呢? 解决办法:就是将keep ...
- 036.Python的TCP语法
TCP语法 1 建立一个socket对象 import socket sk = socket.socket() print (sk) 执行 [root@node10 python]# python3 ...
- Linux进阶之使用Oh-My-Zsh打造炫酷终端
Oh My Zsh是基于zsh命令行的一个扩展工具集,提供了丰富的扩展功能.除了功能增强之外,还提供非常丰富的主题.使用Oh-My-Zsh打造酷炫Shell终端的步骤(Deepin系统): 原始终端: ...
- Oracle和MySQL差异总结
常用功能差异 锁差异: • Oracle锁加在数据块上 • InnoDB 是在索引上加锁,所以MySQL锁的粒度没有Oracle 精细. 导入导出: • Oracle采用EXP /IMP ,EXPDP ...
- 图解 Redis | 不就是 AOF 持久化嘛
AOF 日志 试想一下,如果 Redis 每执行一条写操作命令,就把该命令以追加的方式写入到一个文件里,然后重启 Redis 的时候,先去读取这个文件里的命令,并且执行它,这不就相当于恢复了缓存数据了 ...
- 只需5分钟!一文读懂CSS布局(二) -- flex布局
目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...
- scrapy奇技淫巧1
Request传递值到callback回调函数 def parse(self, response): request = scrapy.Request('http://www.example.com/ ...