mapboxGL
关注
分享
扫一扫
文章平均质量分 66
mapboxGL相关
牛老师讲GIS
12年毕业于兰州大学GIS专业，现就职于丰图科技。毕业后一直从事GIS与WebGIS相关工作，精通leaflet，openlayers，mapboxgl等框架。csdn博客专家，csdn讲堂和腾讯课程签约讲师，开发并录制了《开源GIS开发入门》、《mapboxGL开发入门》、《2023新版WebGIS开发》、《QGIS操作课程》、《Geoserver操作课程》等课程。
展开
-
PMTiles介绍与MapboxGL中使用
本文介绍PMTiles以及PMTiles在MapboxGL中的使用。原创 2024-08-12 21:40:21 · 1071 阅读 · 0 评论 -
基于Martin实现MapboxGL自定义底图
本文分享基于Martin实现MapboxGL底图的自定义。原创 2024-08-10 20:12:34 · 1065 阅读 · 1 评论 -
一种基于高德Web API实现沿路画面的实现
在mapboxGL框架下，分享一种基于高德Web API实现沿路画面的实现原创 2024-05-29 21:42:36 · 695 阅读 · 0 评论 -
记mapboxGL实现鼠标经过高亮时的一个问题
mapboxGL实现鼠标经过高亮可通过注册图层的mousemove和moveout事件来实现，在mousemove事件中可以拿到当前经过的要素，但是当使用该要素时，发现在某个地图级别下会有展示不全的情况。究其原因，发现是mapboxGL在绘图的时候为提升效率也会进行切片，所以图层事件返回的要素时切片后的，当数据范围比较大、地图级别比较大的时候，必然会分成多块。原创 2024-05-27 20:05:09 · 559 阅读 · 0 评论 -
mapboxGL中山体背景＋边界阴影的一种实现方案
mapboxGL中实现山体背景＋边界阴影的效果原创 2024-05-26 15:28:20 · 556 阅读 · 0 评论 -
mapboxGL中区域掩膜的实现
区域掩膜的功能也是比较常见的功能呢，本文分享在mapboxGL中结合canvas如何实现。原创 2024-01-10 20:19:37 · 667 阅读 · 0 评论 -
ubuntu中安装tippecanoe并切片
如何在ubuntu中用tippecanoe制作矢量切片原创 2022-12-17 17:19:23 · 742 阅读 · 1 评论 -
mapboxGL中多图标加载的实现
mapboxGl中多图标的实现可以在style中指定sprite来实现，但是在实际使用的时候会出现sprite之外的图标需要引用，此时通过map.addImage()来实现，但是如果存在多个图标的时候，因为map.addImage()需要先通过map.loadImage()先加载图标，而map.loadImage()是一个异步的，使用起来就有点麻烦。本文希望通过再再加sprite来实现一次性添加图标。原创 2022-09-16 10:36:39 · 1646 阅读 · 0 评论 -
mapboxGL中3D行政区划的实现
很多时候我们会遇到3D行政区划的展示，在mapboxGL中，面状的3D展示比较容易，我们可以通过fill-extrusion来实现，但是没法实现其边界线在上面的浮动展示。本文借助QGIS，实现边界线在上面的浮动展示。原创 2022-08-21 20:37:06 · 1560 阅读 · 0 评论 -
mapboxGL实现旋转的地球
许久未更新，这一篇是凑数的，用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。原创 2022-08-09 09:51:53 · 1255 阅读 · 0 评论 -
mapbox尝鲜值之云图动画
mapbox尝鲜值之云图动画原创 2022-07-01 22:56:51 · 1348 阅读 · 0 评论 -
geoserver矢量切片加密与调用
本文，讲的是有关安全的话题。概述GIS的数据一直是比较敏感的，所以数据安全也是一个“老生常谈”的话题。本文利用geoserver的矢量切片插件对数据进行发布，通过自己写的中间接口实现矢量切片的加密，并修改mapboxGL源码，添加数据的解密与展示。实现效果实现1. MapboxGL 2.X离线时候的token强认证2.X的mapboxGL是有token的强制认证的，离线的时候我们可以通过修改源码取消这个强制认证。2. geoserver矢量切片加密大致流程如下：修改vect.原创 2022-04-26 12:45:38 · 1284 阅读 · 0 评论 -
websocket实现GPS数据的实时推送与地图的展示(优化)
概述前两天，发布了一片文章websocket实现GPS数据的实时推送与地图的展示，文章发出后引来了不少读者的关注，也有不少读者要求做进步一优化。本文应大家的要求，对上文的内容做一个优化，优化地方包括：加入了GPS方向的展示；加入了GPS精度的展示；加入了GPS轨迹的展示；效果实现node模拟数据const io = require('nodejs-websocket')let connection = nulllet gps = {}for (let i = 0; i <原创 2022-03-29 20:05:44 · 4366 阅读 · 3 评论 -
websocket实现GPS数据的实施推送与地图的展示
概述实时展示GPS的数据是webgis中比较常见的一个需求，本文通过nodejs-websocket模拟GPS数据的更新，实现GPS数据的实施推送与地图数据的展示。效果实现nodejs-websocket模拟数据// websocket.js// websocket.jsconst ws = require('nodejs-websocket')const createServer = () => { let server = ws.createServer(connect原创 2022-03-27 23:02:21 · 4782 阅读 · 1 评论 -
mapboxGL轨迹展示与播放
历史轨迹回放是GIS很常见的一个功能，本文结合turf.js实现轨迹的展示与播放动画。原创 2021-12-20 22:12:43 · 3186 阅读 · 1 评论 -
mapboxGL2中Terrain的离线化应用
概述mapboxGL2中比较大的一个更新就是加入了Terrain，可以实现三维的立体效果，本文书接上文“mapboxGL2离线化应用”，说说Terrain的离线化应用。效果实现分析打开官方例子，F12打开调试工具；在网络请求里面查找terrain-dem,接口及返回数据格式如下：根据上面返回的数据，我们不难理解每个字段的含义，这里面核心的：description，里面描述的是dem到RGB的转换算法height = -10000 + ((R * 256 * 256 + G * 256原创 2021-09-17 00:04:33 · 1893 阅读 · 1 评论 -
mapboxGL2离线化应用
概述mapboxGL升级到2的版本之后，用官方的引用token是必须要有的，为了能够离线使用，我们需要对源码做一定的修改后编译，本文讲述如何进行mapboxGL的离线应用。效果实现clone代码git clone https://gitee.com/lzugis15/mapbox-gl-js.git安装依赖npm install-- 建议用cnpm，安装速度会快点cnpm i修改源码token强制认证是在文件src/ui/map.js中，注释掉2871行的代码this.原创 2021-09-15 07:38:05 · 3178 阅读 · 2 评论 -
topojson转换与应用
概述topojson很早就问其大名，但日常用的比较多的还是geojson为主，最近在项目里面开始用到了，所以就写此文记录一下。topojsonGeoJSON是用于描述地理空间信息的数据格式。github上对TopoJSON的解释是： GeoJSON 按拓扑学编码后的扩展形式。TopoJSON 消除了冗余，允许将相关几何图形有效地存储在同一文件中。对比1.文件大小2.渲染效率转换以及在mapboxGL中的使用1.转换借助topojson-client，可方便的实现topojson到原创 2021-07-17 18:45:30 · 1549 阅读 · 0 评论 -
mapboxGL中sprite的前端生成
概述在前面的文章讲述了mapboxGL中的sprite以及其java中的生成方式，本文将结合Promise讲讲其前端的生成方式。效果实现思路通过新建一个Image，并拿到image的宽和高，动态的计算canva的大小；结合Promise.all实现sprite.json的输出；实现1. 生成图标库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2021-05-26 21:02:14 · 699 阅读 · 1 评论 -
mapboxGL列表和地图联动
概述列表和地图联动是webgis中一个非常常见的功能，本文讲一下在mapboxGL中结合vue如何实现此功能。效果实现思路1. 获取数据获取数据并将数据保存起来；2. 列表展示列表简单的用ul、li来实现。3. 地图展示数据获取之后，通过document.createElement()的方式创建marker，将结果在地图上展示。4. 列表地图联动联动存在两个交互：鼠标移动和点击选中，所以需要两个变量用来记录当前鼠标经过的和点击选中的，如果鼠标经过的和点击选中发生变化的时候，去设置对应原创 2021-05-10 22:39:09 · 807 阅读 · 0 评论 -
mapboxGL多图对比
概述前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePw9Y5iC-1620480677395)(https://upload-images.jianshu.io/upload_images/6826673-3942ed8f06523194.gif?imageMogr2/auto-orient/strip)]实现思路注册map的mouseover事件，原创 2021-05-08 21:31:58 · 530 阅读 · 0 评论 -
mapboxGL卷帘实现
概述卷帘对比是webgis中常见的一种对比方式，本文讲述一下如何在mapboxGL中实现卷帘对比。效果实现思路通过input[range]实现卷帘的操作；通过地图的事件实现两个地图的联动操作。实现代码<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge原创 2021-05-07 18:56:26 · 1086 阅读 · 0 评论 -
qgis切片下载与本地部署以及调用
概述关于切片下载以及切片的本地部署的问题，本来我觉得挺简单的，但是一直会有有好多童鞋问我，所以借此文章，将这件事情在此说明清楚一下。工具1. qgis借助qgis的插件QMetaTiles插件实现第三方地图的切片下载。2. nginx通过nginx，将下载的切片提供xyz的服务出来。3.mapboxGL通过mapboxGL调用发布的切片服务。实现效果操作1.qgis中添加xyz服务浏览器——>XYZ Tiles——>右键——>新建连接，输入连接名称，在URL框中输原创 2021-03-23 22:32:47 · 3848 阅读 · 2 评论 -
通过view实现实时监测数据的实时更新展示
概述在做项目的时候，经常会有实时监测数据的地图展示，本文通过view实现实时监测数据的实时更新展示。分析对于实时监测数据，有以下两个特点：1、监测设备的空间信息不发生变化；2、监测数据会实时发生变化。基于以上两特点，在实际的服务发布中我们可以：1、将监测设备存储为一张表；2、实时监测数据存储为另外一张表；3、创建view，将设备和实时监测数据关联起来；4、通过geoserver将view以图层的方式发布出来。实现china_province（监测设备）province_people（监测值）原创 2020-11-26 17:15:44 · 1477 阅读 · 1 评论 -
mapboxGL中popup遮挡的优化
概述在MapboxGL中，使用popup弹窗时，弹窗会出现超出范围的情况，本文就此问题做了点优化，共享记录下，一做自用，一做共享。实现效果实现代码结合popup的open事件，实现位置的调整。实现代码如下：// 调整popup位置that.popup.on('open', function(){ var ele = $(that.popup.getElement()); var offset = ele.offset(); var top = offset.top; var l原创 2020-07-28 11:53:43 · 2644 阅读 · 0 评论 -
mapboxGL中sprite生成与引用
概述用过mapboxGL的都知道里面有个叫做sprite的配置，它的主要用途就是地图上渲染图标的，但是大多数情况下我们需要自定义图标的，我们该怎么办呢，莫着急，牛老师有招，本文告诉你如何通过几行简单的java代码实现，用引用到我们的地图中。效果生成的json文件如下：{ "zgyh": { "visible": "true", "pixelRatio": 1, "x": 0, "width": 32, "y"原创 2020-06-10 23:05:52 · 2583 阅读 · 3 评论 -
GPX数据在mapboxGL中轨迹动画
概述喜欢跑步的人都会选择一款APP来自己跑步的，常用的有keep、悦跑圈、华为健康等等，每次跑完步，会根据跑步的轨迹绘制轨迹动画。今天咱们讲讲技术，不扯淡，讲一下在mapboxGL中如何实现类似的效果。效果数据本文中的数据是我跑步的实测数据，数据导出于Garmin运动手表，格式为GPX。实现1.解析处理数据gpx数据解析用到了gpxparse.js，具体请移步GPXParser.js。loadPgxData() { $.get('../data/route.gpx', function原创 2020-06-07 23:34:17 · 2159 阅读 · 0 评论 -
结合d3.js实现气象数据的可视化
概述本文将结合d3.js实现在mapboxGL中格点气象数据的展示。效果实现1.数据格式说明需要将格点气象数据实现前端的展示，数据传输的方式有三种：1、json；2、二进制；3、灰度图。三种方式各有优劣，这个需要在实际的项目中去酌情选择，本文为方便理解，选用json的格式，数据格式如下：{ "header": { "la1": 54, "lo1...原创 2020-05-02 09:53:27 · 5625 阅读 · 32 评论 -
mapboxGL测量实现
概述讲真，MapboxGL里面虽然有测量的功能，但是不太好用，于是就萌生了自己实现的方法。本文几个turf.js来说说mapboxGL中测量的实现。效果实现1、实现思路按照绘制的流程，需要涉及到map的三个事件：click，dblclick，mousemove，其中click为绘制，dblclick为结束绘制，mousemove为绘制中。这样，定义一个状态标识isMeasure，在...原创 2020-04-21 22:54:32 · 3470 阅读 · 16 评论 -
mapboxGL和高德API结合实现路径规划
概述本文将mapboxGL和高德地图API结合起来，实现路径规划。效果实现高德地图路径规划API说明如上图，有行走、公交、驾车等多种路径，本文以行走为例来说明。添加点、线图层map.on('load', function() { var geojson = { 'type': 'FeatureCollection', 'features': [] };...原创 2020-04-05 16:31:58 · 3583 阅读 · 1 评论 -
进阶mapbox GL之paint和filter
概述通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识，本节结合一些示例，重点讲述一下mapbox GL里面的filter和paint的用法。说明本文中的示例数据源是北京的区边界数据，格式为geojson，数据字段与详情如下：filterfilter是layer里面的一个属性，通过一些条件表达式实现仅显示与过滤器匹配的要素，即图层的过滤显示，其官方说...原创 2020-03-28 10:48:26 · 6117 阅读 · 4 评论 -
初识mapbox GL
一、概述最近由于项目的需求，借此机会对mapbox GL做了一个系统的学习，同时也对整个学习过程做一个记录，一方面留作自用，另一方面也希望看到此文的人在学习mapbox GL的时候，能够有所启发、有所收获。二、快速认识很多人在学习一个新的webis框架的时候，表示狗咬刺猬——无从下口。对于这一点，我的建议是快速认识。1.目的快速认识的目的有两个：1、对框架有一个认知性的理解；2、甄别框架...原创 2020-03-24 20:04:04 · 4093 阅读 · 1 评论 -
mapbox GL台风路径的播放实现
概述前面的文章中写了基于openlayers4的台风路径播放，最近用到mapbox GL，也要实现相似的功能，网上找了好久都没有找到，于是就放弃了“拿来主义”的想法，只能自己动手了。经过一下午的努力，终于有了一个雏形，在此分享出来，希望对你有用！效果实现1、数据获取测试数据是从温州台风网，抓取了201929号台风数据作为测试数据。2、添加台风编号和名称到地图addTyphoonLa...原创 2020-03-22 22:46:23 · 2208 阅读 · 4 评论