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 · 1075 阅读 · 0 评论 -
基于Martin实现MapboxGL自定义底图
本文分享基于Martin实现MapboxGL底图的自定义。原创 2024-08-10 20:12:34 · 1066 阅读 · 1 评论 -
一种基于高德Web API实现沿路画面的实现
在mapboxGL框架下,分享一种基于高德Web API实现沿路画面的实现原创 2024-05-29 21:42:36 · 696 阅读 · 0 评论 -
记mapboxGL实现鼠标经过高亮时的一个问题
mapboxGL实现鼠标经过高亮可通过注册图层的mousemove和moveout事件来实现,在mousemove事件中可以拿到当前经过的要素,但是当使用该要素时,发现在某个地图级别下会有展示不全的情况。究其原因,发现是mapboxGL在绘图的时候为提升效率也会进行切片,所以图层事件返回的要素时切片后的,当数据范围比较大、地图级别比较大的时候,必然会分成多块。原创 2024-05-27 20:05:09 · 562 阅读 · 0 评论 -
mapboxGL中山体背景+边界阴影的一种实现方案
mapboxGL中实现山体背景+边界阴影的效果原创 2024-05-26 15:28:20 · 563 阅读 · 0 评论 -
mapboxGL中区域掩膜的实现
区域掩膜的功能也是比较常见的功能呢,本文分享在mapboxGL中结合canvas如何实现。原创 2024-01-10 20:19:37 · 669 阅读 · 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 · 1647 阅读 · 0 评论 -
mapboxGL中3D行政区划的实现
很多时候我们会遇到3D行政区划的展示,在mapboxGL中,面状的3D展示比较容易,我们可以通过fill-extrusion来实现,但是没法实现其边界线在上面的浮动展示。本文借助QGIS,实现边界线在上面的浮动展示。原创 2022-08-21 20:37:06 · 1561 阅读 · 0 评论 -
mapboxGL实现旋转的地球
许久未更新,这一篇是凑数的,用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。原创 2022-08-09 09:51:53 · 1257 阅读 · 0 评论 -
mapbox尝鲜值之云图动画
mapbox尝鲜值之云图动画原创 2022-07-01 22:56:51 · 1349 阅读 · 0 评论 -
geoserver矢量切片加密与调用
本文,讲的是有关安全的话题。概述GIS的数据一直是比较敏感的,所以数据安全也是一个“老生常谈”的话题。本文利用geoserver的矢量切片插件对数据进行发布,通过自己写的中间接口实现矢量切片的加密,并修改mapboxGL源码,添加数据的解密与展示。实现效果实现1. MapboxGL 2.X离线时候的token强认证2.X的mapboxGL是有token的强制认证的,离线的时候我们可以通过修改源码取消这个强制认证。2. geoserver矢量切片加密大致流程如下:修改vect.原创 2022-04-26 12:45:38 · 1285 阅读 · 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 · 4785 阅读 · 1 评论 -
mapboxGL轨迹展示与播放
历史轨迹回放是GIS很常见的一个功能,本文结合turf.js实现轨迹的展示与播放动画。原创 2021-12-20 22:12:43 · 3190 阅读 · 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 · 1897 阅读 · 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 · 3182 阅读 · 2 评论 -
topojson转换与应用
概述topojson很早就问其大名,但日常用的比较多的还是geojson为主,最近在项目里面开始用到了,所以就写此文记录一下。topojsonGeoJSON是用于描述地理空间信息的数据格式。github上对TopoJSON的解释是: GeoJSON 按拓扑学编码后的扩展形式。TopoJSON 消除了冗余,允许将相关几何图形有效地存储在同一文件中。对比1.文件大小2.渲染效率转换以及在mapboxGL中的使用1.转换借助topojson-client,可方便的实现topojson到原创 2021-07-17 18:45:30 · 1550 阅读 · 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 · 1089 阅读 · 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 · 3855 阅读 · 2 评论 -
通过view实现实时监测数据的实时更新展示
概述在做项目的时候,经常会有实时监测数据的地图展示,本文通过view实现实时监测数据的实时更新展示。分析对于实时监测数据,有以下两个特点:1、监测设备的空间信息不发生变化;2、监测数据会实时发生变化。基于以上两特点,在实际的服务发布中我们可以:1、将监测设备存储为一张表;2、实时监测数据存储为另外一张表;3、创建view,将设备和实时监测数据关联起来;4、通过geoserver将view以图层的方式发布出来。实现china_province(监测设备)province_people(监测值)原创 2020-11-26 17:15:44 · 1478 阅读 · 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 · 2645 阅读 · 0 评论 -
mapboxGL中sprite生成与引用
概述用过mapboxGL的都知道里面有个叫做sprite的配置,它的主要用途就是地图上渲染图标的,但是大多数情况下我们需要自定义图标的,我们该怎么办呢,莫着急,牛老师有招,本文告诉你如何通过几行简单的java代码实现,用引用到我们的地图中。效果生成的json文件如下:{ "zgyh": { "visible": "true", "pixelRatio": 1, "x": 0, "width": 32, "y"原创 2020-06-10 23:05:52 · 2584 阅读 · 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 · 2162 阅读 · 0 评论 -
结合d3.js实现气象数据的可视化
概述本文将结合d3.js实现在mapboxGL中格点气象数据的展示。效果实现1.数据格式说明需要将格点气象数据实现前端的展示,数据传输的方式有三种:1、json;2、二进制;3、灰度图。三种方式各有优劣,这个需要在实际的项目中去酌情选择,本文为方便理解,选用json的格式,数据格式如下:{ "header": { "la1": 54, "lo1...原创 2020-05-02 09:53:27 · 5627 阅读 · 32 评论 -
mapboxGL测量实现
概述讲真,MapboxGL里面虽然有测量的功能,但是不太好用,于是就萌生了自己实现的方法。本文几个turf.js来说说mapboxGL中测量的实现。效果实现1、实现思路按照绘制的流程,需要涉及到map的三个事件:click,dblclick,mousemove,其中click为绘制,dblclick为结束绘制,mousemove为绘制中。这样,定义一个状态标识isMeasure,在...原创 2020-04-21 22:54:32 · 3471 阅读 · 16 评论 -
mapboxGL和高德API结合实现路径规划
概述本文将mapboxGL和高德地图API结合起来,实现路径规划。效果实现高德地图路径规划API说明如上图,有行走、公交、驾车等多种路径,本文以行走为例来说明。添加点、线图层map.on('load', function() { var geojson = { 'type': 'FeatureCollection', 'features': [] };...原创 2020-04-05 16:31:58 · 3586 阅读 · 1 评论 -
进阶mapbox GL之paint和filter
概述通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识,本节结合一些示例,重点讲述一下mapbox GL里面的filter和paint的用法。说明本文中的示例数据源是北京的区边界数据,格式为geojson,数据字段与详情如下:filterfilter是layer里面的一个属性,通过一些条件表达式实现仅显示与过滤器匹配的要素,即图层的过滤显示,其官方说...原创 2020-03-28 10:48:26 · 6126 阅读 · 4 评论 -
初识mapbox GL
一、概述最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发、有所收获。二、快速认识很多人在学习一个新的webis框架的时候,表示狗咬刺猬——无从下口。对于这一点,我的建议是快速认识。1.目的快速认识的目的有两个:1、对框架有一个认知性的理解;2、甄别框架...原创 2020-03-24 20:04:04 · 4095 阅读 · 1 评论 -
mapbox GL台风路径的播放实现
概述前面的文章中写了基于openlayers4的台风路径播放,最近用到mapbox GL,也要实现相似的功能,网上找了好久都没有找到,于是就放弃了“拿来主义”的想法,只能自己动手了。经过一下午的努力,终于有了一个雏形,在此分享出来,希望对你有用!效果实现1、数据获取测试数据是从温州台风网,抓取了201929号台风数据作为测试数据。2、添加台风编号和名称到地图addTyphoonLa...原创 2020-03-22 22:46:23 · 2214 阅读 · 4 评论