mapboxgl
文章平均质量分 93
GIS兵器库
这个作者很懒,什么都没留下…
展开
-
mapboxgl加载tiff
mapboxgl通过添加tiff图层,解决小网格的fill图层在地图缩小时图层不显示问题原创 2022-09-28 17:03:21 · 2382 阅读 · 2 评论 -
mapboxgl实现带箭头轨迹线
最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例。经一番研究与尝试,最终解决,效果如下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FQxKI34o-1609406406875)(https://blogimage.gisarmory.xyz/202012310104.gif)]添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可:// 添加箭头图层原创 2020-12-31 17:20:24 · 5638 阅读 · 6 评论 -
如何创建 mapbox 精灵图
前面文章介绍了如何在本地发布OSM数据,并使用 maputnik 自定义 mapbox 格式的地图样式。在使用 maputnik 配图时,如果想要使用自己的图片作为地图符号,就需要制作精灵图。mapbox 对精灵图的要求是要有精灵图和说明精灵图中图片信息的json配置文件。精灵图的制作工具有很多,在线网站就有一大堆,但普遍存在一个问题:只能生成精灵图,没有json配置文件。mapbox开源了一个精灵图制作工具 spritezero,这个工具可以生成精灵图和对应的json文件。gi..原创 2021-01-06 18:19:15 · 934 阅读 · 4 评论 -
mapboxgl绘制3D线
最近遇到个需求,使用mapboxgl绘制行政区划图层,要求把行政区划拔高做出立体效果,以便突出显示。拿到这个需求后,感觉很简单呀,只需要用fill-extrusion方式绘制就可以啦,实现出来是这个样子的效果有点丑,并且这里有个问题就是我的数据是区县数据,而绘制出的效果却没有区分出各个区县的边界于是从下面两个方向做优化处理:各区县按不同颜色区分添加区县边界首先尝试不同区县按颜色区分。这个简单,只需要设置fill-extrusion-color即可[外链图片转存失败,源站可能有防盗链机制,原创 2021-07-01 17:29:44 · 1925 阅读 · 1 评论 -
mapboxgl 互联网地图纠偏插件(三)
先说结论,结论当然是:大功告成,喜大普奔。看效果图:好了,接下来说一下过程先回顾一下这个系列的 第一篇 和 第二篇 第一篇是直接改的 mapboxgl 源码,在源码里面对瓦片的位置进行纠偏,遇到的问题是,地图旋转时会有错位,还有瓦片纠偏后屏幕边缘会有空白。第二篇是写了一个 mapboxgl 自定义图层,遇到的问题是,地图在大比例尺时,瓦片会疯狂抖动。这两篇文章发出后,有两位大牛针对上面的问题,给出了建设性的意见。一个是思否上的网友“undefined”(这个不是bug,是它的名称),他在看了第原创 2021-08-15 20:03:23 · 2111 阅读 · 3 评论 -
mapboxgl 互联网地图纠偏插件(二)
前端时间写的mapboxgl 互联网地图纠偏插件(一)存在地图旋转时瓦片错位的问题。这次没有再跟 mapboxgl 的变换矩阵较劲,而是另辟蹊径使用 mapboxgl 的自定义图层,重新写了一套加载瓦片的方法来实现地图纠偏。下面把我这次打怪升级的心路历程分享一下,或许对你也有启发。文中涉及一些 webgl 的知识细节,没有接触过 webgl 的同学,可以参考看上一次给大家推荐的电子书 《WebGL编程指南》,这次再附上一个包含书中所有示例的 github 库,会很有帮助。书接上回在研究偏移矩阵问题原创 2021-07-06 13:24:21 · 1253 阅读 · 0 评论 -
mapboxgl 互联网地图纠偏插件(一)
之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题。最近想对 mapboxgl 也写一个这样的插件。原因是自己发布的OSM矢量瓦片地图精度不够高,当需要放大地图查看详细信息时,就可以拿百度、高德的栅格瓦片做个补充。而使用它们的第一步就是要先纠偏。去研究了 mapboxgl 的底层代码,发现很多都看不懂。于是去恶补了 webgl 的知识,再去看 mapboxgl 的源码,哈哈,万变不离其宗,GIS知识还是那些,只是计算机绘制图形的方式变了而原创 2021-06-18 10:34:29 · 2139 阅读 · 0 评论 -
mapboxgl 中插值表达式的应用场景
文章目录一、前言二、语法三、对地图颜色进行拉伸渲染2.1 热力图2.2 轨迹图2.3 模型网格渲染三、**随着地图缩放对图形属性进行插值**四、interpolate的高阶用法五、总结一、前言interpolate是mapboxgl地图样式中用于插值的表达式,能对颜色和数字进行插值。它的应用场景有两类:1、对地图数据进行颜色拉伸渲染。常见的应用场景有:热力图、轨迹图、模型网格渲染等。2、在地图缩放时对图形属性进行插值。具体为,随着地图的缩放,在改变图标大小、建筑物高度、图形颜色等属性时,对属性原创 2022-04-26 17:12:11 · 1936 阅读 · 5 评论 -
mapboxgl 地图样式 - 重分类渲染
上回,我们在《mapboxgl 地图样式 - 唯一值渲染》中了解到case、match、get等表达式,通过表达式来完成了唯一值渲染。在实际情况下,我们还经常需要进行重分类渲染,将某范围的值重分为一类,并将另一个范围重分为其它类。今天我们继续了解新的表达式来实现重分类渲染。重分类效果图:方式一:使用 case 表达式case表达式类似js里的if判断语句。表达式的实现效果比较依赖于属性值,通常我们先使用get表达式去获取属性值,再去判断这个属性值,以此达到在同一图层上实现不同的展示效果。"fi原创 2022-02-09 17:33:12 · 1722 阅读 · 0 评论 -
mapboxgl 地图样式 - 唯一值渲染
mapboxgl 中提供了强大的地图样式编辑功能,样式表达式是其一大特色。唯一值渲染是GIS中常见的专题图渲染方式,今天我们来看一下如何用 mapboxgl 中的样式表达式实现这一效果。在网上找了一份北京市的行政区划图,目标是各个区设置上不同的颜色。效果如下:方式一:使用 case 表达式这种做法的好处是可以灵活修改每个区的颜色。"fill-color":[ 'case', ['boolean',['==',['get','name'],'怀柔区'],false],'#FFFFC原创 2022-01-20 16:54:45 · 2008 阅读 · 2 评论 -
mapboxgl 纠偏百度地图
缘起之前分享了mapboxgl 互联网地图纠偏插件,插件当时只集成了高德地图。文章发布后,有小伙伴在后台留言,希望插件也能支持百度地图。刚好国庆假期有时间就研究了一下。插件加载瓦片原理首先,插件之所以能够正确的加载互联网地图瓦片,关键是依托经纬度和瓦片编号的互转算法。有了经纬度和瓦片编号的互转算法,插件就能根据当前地图窗口4个角的经纬度坐标,算出需要请求的瓦片编号。再根据瓦片编号转经纬度的算法,算出请求到的每一个瓦片在地图上摆放的经纬度位置。这样瓦片就能正确的显示在地图上了。然后再监听地图原创 2021-10-10 10:53:52 · 1256 阅读 · 4 评论