- 博客(35)
- 收藏
- 关注
RSS订阅原创 mapboxgl 中插值表达式的应用场景
文章目录一、前言二、语法三、对地图颜色进行拉伸渲染2.1 热力图2.2 轨迹图2.3 模型网格渲染三、**随着地图缩放对图形属性进行插值**四、interpolate的高阶用法五、总结一、前言interpolate是mapboxgl地图样式中用于插值的表达式，能对颜色和数字进行插值。它的应用场景有两类：1、对地图数据进行颜色拉伸渲染。常见的应用场景有：热力图、轨迹图、模型网格渲染等。2、在地图缩放时对图形属性进行插值。具体为，随着地图的缩放，在改变图标大小、建筑物高度、图形颜色等属性时，对属性
2022-04-26 17:12:11
1956
5
原创 mapboxgl 地图样式 - 重分类渲染
上回，我们在《mapboxgl 地图样式 - 唯一值渲染》中了解到case、match、get等表达式，通过表达式来完成了唯一值渲染。在实际情况下，我们还经常需要进行重分类渲染，将某范围的值重分为一类，并将另一个范围重分为其它类。今天我们继续了解新的表达式来实现重分类渲染。重分类效果图：方式一：使用 case 表达式case表达式类似js里的if判断语句。表达式的实现效果比较依赖于属性值，通常我们先使用get表达式去获取属性值，再去判断这个属性值，以此达到在同一图层上实现不同的展示效果。"fi
2022-02-09 17:33:12
1737
原创 mapboxgl 地图样式 - 唯一值渲染
mapboxgl 中提供了强大的地图样式编辑功能，样式表达式是其一大特色。唯一值渲染是GIS中常见的专题图渲染方式，今天我们来看一下如何用 mapboxgl 中的样式表达式实现这一效果。在网上找了一份北京市的行政区划图，目标是各个区设置上不同的颜色。效果如下：方式一：使用 case 表达式这种做法的好处是可以灵活修改每个区的颜色。"fill-color":[ 'case', ['boolean',['==',['get','name'],'怀柔区'],false],'#FFFFC
2022-01-20 16:54:45
2027
2
原创 GISer如何突破二次开发瓶颈
年初时，我写的《一个GISer的使命》那篇文章中，提出了GISer的技术提升路径可以分为四个大的阶段：阶段一，能使用商业GIS软件去解决问题。阶段二，能使用开源GIS软件去解决问题。阶段三，有能力去解决开源GIS中的问题。阶段四，有能力去解决GIS行业前沿问题。在阶段一、阶段二中，我们属于GIS二次开发人员，在阶段三、阶段四中我们开始慢慢转向GIS底层开发人员。这种转变不是天天做项目就会自然的实现的，天天做项目会让我们成为一名GIS二次开发老司机，但永远不会成为GIS底层开发的赛车手，他们之
2021-12-05 19:25:16
791
3
原创 geoserver控制服务访问权限-类似百度地图的key
文章目录缘起带着问题上路如何实现key验证访问身份验证过滤器验证链如何控制key能访问哪些地图服务基础版访问权限设置高级版访问权限控制自动化配置如何实现服务器ip白名单流程梳理申请key访问地图总结缘起如题，想要用geoserver实现一个互联网地图那样的key验证，来控制地图的访问权限。最终想要的效果就是类似百度地图那样，申请个key，可以设置这个key能访问哪些地图资源，可以设置服务器ip白名单，然后把key放到地图API中，就能访问的指定的地图资源。带着问题上路要使用geoserver
2021-11-04 18:15:15
2046
4
原创 微信小程序添加外部地图服务数据
先上效果：缘起使用微信小程序做地图相关功能的时候，有个需求是需要接入已发布的地图服务。查看微信小程序地图组件文档，发现它对地图相关的支持很少，只有一些基础功能，比如添加点、线、面、气泡和一些常规的地图事件监听，并没有添加地图服务相关的支持。不过有了需求，也要想办法解决呀。图层查询既然小程序不能直接添加地图服务，那就把图层数据查出来，然后通过添加点线面方式添加到地图，具体要怎么实现呢？首先想到的是通过图层查询接口把所有数据查出来。但是既然数据是按图层发布的，一般数据量都比较大，把所有数据查询出
2021-10-26 15:44:42
1766
10
原创 mapboxgl 纠偏百度地图
缘起之前分享了mapboxgl 互联网地图纠偏插件，插件当时只集成了高德地图。文章发布后，有小伙伴在后台留言，希望插件也能支持百度地图。刚好国庆假期有时间就研究了一下。插件加载瓦片原理首先，插件之所以能够正确的加载互联网地图瓦片，关键是依托经纬度和瓦片编号的互转算法。有了经纬度和瓦片编号的互转算法，插件就能根据当前地图窗口4个角的经纬度坐标，算出需要请求的瓦片编号。再根据瓦片编号转经纬度的算法，算出请求到的每一个瓦片在地图上摆放的经纬度位置。这样瓦片就能正确的显示在地图上了。然后再监听地图
2021-10-10 10:53:52
1289
4
原创 GIS常用算法
文章目录1、常用算法1.1、计算两经纬度点之间的距离1.2、根据已知线段以及到起点距离，求目标点坐标1.3、已知点、线段，求垂足1.4、线段上距离目标点最近的点1.5、点缓冲1.6、点和面关系1.7、线段与线段的关系1.8、线和面关系1.9、geojson 面转线2、在线示例作为一个GISer，在日常WebGIS开发中，会常用到的turf.js，这是一个地理空间分析的JavaScript库，经常搭配各种GIS JS API使用，如leaflet、mapboxgl、openlayers等；在后台Java开发
2021-09-09 16:23:27
2903
原创 发布 mbtiles 存储的矢量瓦片
之前我们分享过如何 在本地发布OSM矢量瓦片地图，里面介绍了生成的矢量瓦片会存放在 .mbtiles 文件中，然后用 tileserver-gl 软件发布。mbtiles 是基于sqllite数据库存储地图瓦片数据的标准规范，.mbtiles文件就是实现了这个规范的sqllite数据库。最近遇到个相关的问题，项目上需要将这份.mbtiles格式的矢量瓦片部署到客户服务器上并发布。之前分享过我在用的 开源GIS解决方案，里面将 postgis、geoserver、tomcat 都搞成了绿色版，并且可
2021-08-31 18:51:45
2981
原创 mapboxgl 互联网地图纠偏插件（三）
先说结论，结论当然是：大功告成，喜大普奔。看效果图：好了，接下来说一下过程先回顾一下这个系列的 第一篇 和 第二篇 第一篇是直接改的 mapboxgl 源码，在源码里面对瓦片的位置进行纠偏，遇到的问题是，地图旋转时会有错位，还有瓦片纠偏后屏幕边缘会有空白。第二篇是写了一个 mapboxgl 自定义图层，遇到的问题是，地图在大比例尺时，瓦片会疯狂抖动。这两篇文章发出后，有两位大牛针对上面的问题，给出了建设性的意见。一个是思否上的网友“undefined”（这个不是bug，是它的名称），他在看了第
2021-08-15 20:03:23
2161
3
原创 mapboxgl 互联网地图纠偏插件（二）
前端时间写的mapboxgl 互联网地图纠偏插件（一）存在地图旋转时瓦片错位的问题。这次没有再跟 mapboxgl 的变换矩阵较劲，而是另辟蹊径使用 mapboxgl 的自定义图层，重新写了一套加载瓦片的方法来实现地图纠偏。下面把我这次打怪升级的心路历程分享一下，或许对你也有启发。文中涉及一些 webgl 的知识细节，没有接触过 webgl 的同学，可以参考看上一次给大家推荐的电子书 《WebGL编程指南》，这次再附上一个包含书中所有示例的 github 库，会很有帮助。书接上回在研究偏移矩阵问题
2021-07-06 13:24:21
1273
原创 mapboxgl绘制3D线
最近遇到个需求，使用mapboxgl绘制行政区划图层，要求把行政区划拔高做出立体效果，以便突出显示。拿到这个需求后，感觉很简单呀，只需要用fill-extrusion方式绘制就可以啦，实现出来是这个样子的效果有点丑，并且这里有个问题就是我的数据是区县数据，而绘制出的效果却没有区分出各个区县的边界于是从下面两个方向做优化处理：各区县按不同颜色区分添加区县边界首先尝试不同区县按颜色区分。这个简单，只需要设置fill-extrusion-color即可[外链图片转存失败,源站可能有防盗链机制,
2021-07-01 17:29:44
1961
2
原创 mapboxgl 互联网地图纠偏插件（一）
之前写过一个 leaflet 互联网地图纠偏插件，引用插件后一行代码都不用写，就能解决国内互联网地图瓦片的偏移问题。最近想对 mapboxgl 也写一个这样的插件。原因是自己发布的OSM矢量瓦片地图精度不够高，当需要放大地图查看详细信息时，就可以拿百度、高德的栅格瓦片做个补充。而使用它们的第一步就是要先纠偏。去研究了 mapboxgl 的底层代码，发现很多都看不懂。于是去恶补了 webgl 的知识，再去看 mapboxgl 的源码，哈哈，万变不离其宗，GIS知识还是那些，只是计算机绘制图形的方式变了而
2021-06-18 10:34:29
2189
原创 geoserver发布的wms标签图层显示不全问题
最近有客户反馈：在查看地图数据时，本来显示的点位名称，在地图放大时有些不显示了，是不是数据有问题？排查问题后发现，数据是没问题的，可确实出现了客户描述的情况，如下图所示：通常GIS服务器会为了解决标签重叠显示的问题，默认使用标签自动避让功能，但~这样不应该是放大地图后显示的标签会越来越多吗，怎么还更少了呢？地图是用geoserver发布的，熟悉geoserver的同学都知道，geoserver图层的显示主要是用图层样式来控制的，包括图层的显示层级、标签自动避让等。于是从这个思路入手，经过一番查找。
2021-05-21 17:45:44
2339
3
原创 如何不改源码让maputnik支持geoserver
前段时间分享了如何让矢量瓦片配图神器maputnik支持 geoserver，文章中的解决方案是，通过修改maputnik源码，在界面上增加tms协议选项，从而让maputnik支持geoserver发布的矢量瓦片。前两天工作时，又有了新发现，不修改maputnik源码，也能让它支持geoserver矢量瓦片。原理如下：maputnik本质上是mapboxgl style文件的编辑器，style文件是个json格式数据。mapboxgl本身是支持geoserver tms协议矢量瓦片的，在styl
2021-05-04 15:28:39
1791
6
原创 PostGIS管网连通性分析
GIS在管网数据中的很重要的一个应用方向就是”管网空间分析“，其中包括连通性分析、上下游分析、爆管分析等等。下面是我使用postgis来实现该“管网连通性分析”的解决方案，分享给大家，以便相互学习。使用该分析之前确保已添加扩展postgis、pgroutingCREATE EXTENSION postgis;CREATE EXTENSION pgrouting;导入数据将数据导入到postgreSQL数据库，我是从ArcGIS直接导入的，导入方式参考https://blog.csdn.net/e
2021-04-27 10:45:39
2572
6
原创 我的开源GIS解决方案之路
好久没更新了，因为我在–憋--大–招--，对，就是今天这篇。今天跟大家分享一下我的开源GIS解决方案经历。–额-- 考虑到单聊技术解决方案你可能会很快睡着，所以我今天会把重点放在我封装地图API这个事情上，以封装地图API的经历为线索，穿插着讲一些当时用到的开源GIS架构。文章稍微有点长，如果你只是想了解一下最新的开源GIS架构，可以直接跳过前面，去看第五版和最后的总结，但我建议你还是从第一版开始看，因为没有前面的 4 个版本就不会有第五版，只看总结就和读名言警句效果一样，看的时候觉得有道理，过后就忘
2021-03-31 06:48:22
3343
15
原创 Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker
前面写了篇文章，mapboxgl实现带箭头轨迹线，介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果。下图是我基于leaflet实现的效果。接下来分享一下在我基于leaflet实现该效果时一些思路以及踩到的坑。轨迹线添加箭头效果leaflet无法像mapboxgl似的直接通过样式实现轨迹箭头效果，需要通过引用L.polylineDecorator扩展实现。核心代码如下。注意：此处添加箭头图层应在轨迹线和实时轨迹线之后，不然箭头会被覆盖。沿轨迹线带方向动态marker实现该效果首先想
2021-03-02 17:35:10
7752
62
原创 2021给自己立个Flag
方向一：机器学习定个小目标（挖个坑），使用机器学习技术，用开源库实现，根据影像地图自动提取建筑物轮廓的功能。方向二：地图可视化研究 WebGL 技术，切入点 MapboxGL、Three.js、deck.gl这个暂时还没有想好该如何挖坑，就先插个旗子，遇坑填坑以上两个方向，有阶段性成果，或填坑心得时，会写出来和大家分享。最后祝大家在新的一年里，写代码没有bug，牛气冲天，工资翻倍！原文地址：http://gisarmory.xyz/blog/index.html?blog=GISer2.
2021-02-18 17:36:27
333
2
原创 一个GISer的使命
GISer有自己的技术提升路径，如果想在GIS这条路上一直走下去，请不要忘记抬头看路。不同于java工程师、前端工程师等有明确的编程语言，GISer的工作更像一个全栈工程师。js、java、C#、Android、python好像都要会一些，但好像哪个都不是很精通。这时候GISer经常会迷茫，我应该深入学习哪个，我应该向哪个方向努力，我应该如何提升自己。身边有很多GIS专业的朋友，很多都不再做GIS了，有去做Java的，有去搞前端的。一个已经转Java的朋友，在聚会时抱怨，毕业后去搞GIS就是个错误.
2021-02-02 12:28:10
721
1
原创 如何创建 mapbox 精灵图
前面文章介绍了如何在本地发布OSM数据，并使用 maputnik 自定义 mapbox 格式的地图样式。在使用 maputnik 配图时，如果想要使用自己的图片作为地图符号，就需要制作精灵图。mapbox 对精灵图的要求是要有精灵图和说明精灵图中图片信息的json配置文件。精灵图的制作工具有很多，在线网站就有一大堆，但普遍存在一个问题：只能生成精灵图，没有json配置文件。mapbox开源了一个精灵图制作工具 spritezero，这个工具可以生成精灵图和对应的json文件。gi..
2021-01-06 18:19:15
963
4
原创 mapboxgl实现带箭头轨迹线
最近在使用mapboxgl实现轨迹展示时，想实现类似高德地图导航轨迹效果，然而并未在网上找到类似示例。经一番研究与尝试，最终解决，效果如下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FQxKI34o-1609406406875)(https://blogimage.gisarmory.xyz/202012310104.gif)]添加箭头核心代码如下，只需在配置layout中添加symbol-placement和symbol-spacing属性即可：// 添加箭头图层
2020-12-31 17:20:24
5727
6
原创 OSM地图本地发布-如何生成各省市矢量地图
文章目录1、缘起2、问题3、分析4、生成自定义地区矢量瓦片4.1、启动docker4.2、启动postGIS容器4.3、设置不清理上次的结果4.4、删除默认切图范围4.5、修改切图层级和范围4.6、生成瓦片4.7、重复操作5、总结1、缘起openmaptiles提供了一套OSM数据使用的完整解决方案，在前面文章如何实现OSM地图本地发布并自定义配图中，我们详细介绍了如何安装openmaptiles，并生成了一个阿尔巴尼亚地区的“helloworld”。参照上篇文章的内容，输入下面的命令，就可以
2020-12-22 13:43:47
2132
1
原创 leaflet如何优雅的展示重叠点位的气泡窗口
话不多说，先上效果：效果一：效果二：在平时工作中，经常遇到这种问题，两个或者多个点位完全重合了，鼠标无法点击到被遮盖的点位，从而无法查看其气泡信息。之前看到有些同学的处理方式是，直接修改点位坐标，让点位不再重合，从而可以点击到每个点位。在此我们暂不评论此方式是否可取。今天我们从另外两个维度来讨论，如何解决此问题。方案一 PopupListLayer：此方案的处理方式是，点击时获取与该点位重合的所有点位，然后整合需要在气泡中展示的内容，添加切换功能，达到切换展示所有气泡信息的效果核心代码如
2020-12-10 17:19:01
2299
4
原创 如何实现OSM地图本地发布并自定义配图
文章目录1、缘起2、准备环境2.1、安装linux系统2.2、安装docker2.3、安装Docker Compose2.4、安装git3、发布地图3.1、拉取代码3.2、测试网络3.3、处理数据3.4、发布矢量瓦片服务3.5、自定义地图样式3.6、注意4、总结1、缘起OpenStreetMap（简称OSM）不仅可以免费在线使用，还可以免费下载原始数据，数据格式有.osm.pbf和shp。我们将OSM原始数据下载下来，处理成矢量瓦片，发布成服务，就可以实现OSM地图的本地发布和自定义配图。OSM对
2020-12-09 17:30:24
4820
14
原创 H5时代leaflet中还在用DivIcon？
前段时间写了篇《leaflet如何加载10万数据》的文章，有同学反应其中的Canvas-Markers插件不支持DivIcon。我们今天就来聊一聊，为什么这个插件不支持DivIcon，以及如何用H5的Canvas特性，做出以前用DivIcon才能实现的 标签 和 文字标注 功能。老规矩，先上效果图：标签功能文字标注功能为什么不支持DivIconCanvas-Markers插件的创作目的是为了解决，大批量数据展示的性能问题，它通过使用H5中Canvas的绘图方式绘制Marker，提升了展示性能。
2020-11-25 12:05:26
2325
7
原创 leaflet如何加载10万条数据
作为一名GIS开发者，你工作中一定遇到过这种问题，根据业务设计，需要在地图上添加1万+条数据，数据或是点、或是线、或是面。但不管哪种，当你添加到5000条时，地图操作就会出现明显的卡顿。当你添加超过1万条时，数据加载就会卡顿，浏览器出现卡死的状态，地图加载后，每挪动一下地图，都要耐心的等待上几秒钟。这种交互体验，用户是肯定接受不了的，解决方法通常分两种，一种是去做深入的用户需求分析，看用户想一次性加载这么多数据是为了看什么，想看的这个东西，通过其它技术方式能不能实现。另一种就是死磕技术，研究如何提升地图性
2020-11-13 12:09:40
6087
30
原创 你真的会用PostGIS中的buffer缓冲吗？
buffer - 图形缓冲区分析，GIS中最基本的空间分析之一。实现buffer的工具有很多种，例如前端的truf.js、服务端的ArcGISserver、桌面端的ArcMap、数据库端的PosrGIS等都可以实现。但最近在用 PostGIS 对点进行buffer分析时，得到的却是个椭圆。为什么是椭圆，不应该是正圆吗？为了搞清楚这个问题，我去研究buffer的原理。buffer的构建方法有两种：欧式方法 和 测地线方法。欧式方法是在二维平面地图上做缓冲计算，这个二维平面地图是地球经过投影后得
2020-11-12 16:18:34
2415
5
原创 支持Canvas的Leaflet.Path.DashFlow动态流向线
通过对leaflet以及其插件的学习，我们了解到使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示、河流流向动态展示等，达到增强可视化展示的效果。该插件使用方式非常简单，只需在正常添加线的时候，加入dashArray和dashSpeed参数即可。核心代码如下：注意，在dashSpeed为负时，线是正向流动。效果如下：但是在使用的过程中，发现该插件有个弊端，就是当使用Canvas方式绘制地图（初始化地图preferCanvas参数为true）时，动态效果不可用
2020-11-10 17:19:11
2084
1
原创 leaflet中如何通过透明度控制layerGroup的显示隐藏
最近在leaflet开发过程中，遇到地图数据需要按时序播放的需求，处理思路是将每个时间节点的要素添加到layerGroup中，然后通过切换layerGroup的显示隐藏来实现效果。翻看leaflet的API文档，发现leaflet中没有直接控制layerGroup显示隐藏的方法，那如何来实现layerGroup的显示和隐藏呢？通常有如下两种思路：第一种，通过map.addLayer()、map.removeLayer()添加、移除图层组的方式来实现，当数据量较小，并且不需要频繁切换图层显示隐藏时，使用这
2020-10-22 18:09:59
2750
原创 如何让矢量瓦片配图神器maputnik支持 geoserver
关键词：maputnik、geoserver、矢量地图、矢量瓦片、mapbox、mapboxgl、地图配图、地图配色一直想搞一个类似百度、高德地图那样的矢量地图配图工具百度个性化地图配图工具：高德自定义地图配图工具：在网上找过几次，都没有找到。无意中从这个博客了解到了Maputnik，一阵摆弄后，感觉相见恨晚。对！就是我要找的东西。Maputnik是啥？有啥用？Maputnik是Mapbox样式规范的开源可视化编辑器，它和Mapbox的mapbox studio、百度地图的个性化地图编
2020-10-14 12:57:18
3720
7
原创 leaflet中如何优雅的解决百度、高德地图的偏移问题
话不多说，先上效果图以前在做项目时，经常会听到客户说，你们这个地图是哪来的，太丑了，能不能换成百度地图……高德也行……大家生活中，基本上都已经习惯了使用百度地图和高德地图，而在做项目时，用这两个地图做为底图，也基本成为了标配。但在开发中使用这两个地图，会遇到一个拦路虎，坐标偏移问题。全球现在用的最多的坐标，是wgs84坐标，专业GPS设备和手机GPS定位得到的坐标，通常都是这个坐标。我们国家为了保密需要，要求在国内发布的互联网地图，必须要在这个基础上进行加密偏移。加密后的坐标叫做国测局坐标，俗称火星
2020-09-24 17:23:21
7452
11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人