MapBox
文章平均质量分 58
GIS开发者
辽宁工程技术大学硕士研究生毕业,长期从事WebGIS、移动GIS开发工作,全栈 (前端、后端、Android、小程序、H5),现任某地理信息公司研发部经理,叩叩965894265
展开
-
MapBox GL JS出现“Unimplemented type: 7”问题的解决办法
Mapbox GL JS在矢量瓦片的渲染方面有独特的优势,可以支持动态的样式,支持字体切片,快速加载各种字体。使用起来十分方便,但是在很长的一段时间内,经常遇到出现大量“Unimplemented type: 7”的控制台错误提示,也看不出来是什么原因,并且无法定位错误发生原因。可能这种情况,不影响使用,地图还能正常显示,但是控制台有这么多错误,总是不好。不过最近终于找到了问题原因与解决办法。原创 2023-09-27 13:54:15 · 452 阅读 · 0 评论 -
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错。在Mapbox GL JS这块,其实关于地图的背景没有太多的设置。但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里我从三方面介绍一下,如何实现炫酷的Mapbox GL JS地图背景,建议使用第三种。原创 2023-03-29 08:33:36 · 1612 阅读 · 0 评论 -
Mapbox GL JS多个地图同步移动效果实现
我们可能经常遇到一个效果,多个地图同步移动,展示不同的数据内容。这里我使用Mapbox GL JS 实现了这种效果。本来觉得很简单,捕捉一下不同地图之间的和事件,并且同步移动就可以了。但是发现,还是想的简单了,实现出来效果并不好,最后通过组件很简单就实现了,并且效果如下所示。原创 2022-10-19 20:41:24 · 800 阅读 · 0 评论 -
Mapbox GL JS 地图英文转中文的解决办法
地图框架的使用者已经越来越多了。不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图。对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源,Mapbox的底图是非常好的选择。令国内开发者困扰的是,它的地图是英文的,部分地图放大到中国一定等级之后,才显示中文。最近查到一种解决方案,可以将Mapbox的底图转成中文的。原创 2022-10-19 21:15:00 · 1379 阅读 · 1 评论 -
Mapbox Android 加载图片到指定坐标范围
在前面的中,介绍了在web端使用Mapbox如何加载图片到指定坐标范围。后来就遇到了一个网友提的问题,如何在移动端(Mapbox SDK for Android)实现加载图片到指定的坐标范围。Android端无法使用对应的Vue插件,这个就比较麻烦了。查阅了相关资料后发现,Mapbox Style中有一种source类型为image,支持指定四至坐标,通过Raster Layer就可以渲染到地图上。原创 2022-10-12 13:00:00 · 1196 阅读 · 0 评论 -
Mapbox GL JS加载图片到指定坐标范围
最近在实现一个功能,已知一个图片的四至坐标,需要将这个图片(我用的是卫星影像预览图)按照对应的坐标,加载到Mapbox的地图上。查阅了相关资料,通过这个库就可以实现,但是关于它的API和完整的代码非常少,这里我也是做了一些尝试,分享给大家。原创 2022-09-29 19:26:13 · 966 阅读 · 0 评论 -
Mapbox GL JS主动刷新地图的方法
Mapbox使用的矢量瓦片技术有很多的有点,如可以动态设置样式、在不同比例尺下清晰显示,数据量小等。但在Web开发时,有一个诟病就是矢量瓦片的刷新问题。我们更改了一个矢量瓦片后,如何让浏览器主动去请求新的瓦片,而不是周期性地去请求。数据源更新后,如何快速显示,是一个影响用户体验的东西。Mapbox有自己的缓存机制,与完全靠浏览器的缓存机制不同。...原创 2022-07-18 17:23:56 · 2300 阅读 · 0 评论 -
Mapbox GL JS 面图层斜线填充效果实现
Mapbox GL JS开发时,各种地图样式都需要通过改变style来实现。Mapbox GL JS中,面图层默认就是一个颜色和透明度的填充,有时候,在显示面积图层(fill)时,需要显示斜线填充,这里来简单介绍一下如何实现这种效果。最初样式一般的面图层样式如图所示:实现斜线填充斜线现充,首先需要准备45度的斜线png图片,而且宽高相等,都是偶数,如下图斜线所示:我这里是line.png,并且放到项目里,具体代码如下,最好加到load事件里,数据源这里我就不展示了: map.loadImag原创 2022-05-23 18:33:37 · 1024 阅读 · 0 评论 -
MapboxGL 折线图的绘制与展示
前言前面的博文中介绍了一下如何在地图上展示饼状图和柱状图,下面简单介绍一下如何在地图上绘制折线图:使用方式下载依赖npm install mapbox-map-tool --save引入组件import {LineCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入代码中使用let chartLayer = new原创 2021-09-01 19:11:01 · 616 阅读 · 0 评论 -
MapboxGL 柱状图的绘制与展示
前言前面的博文中介绍了一下如何在地图上展示饼状图,下面简单介绍一下如何在地图上绘制柱状图:使用方式下载依赖npm install mapbox-map-tool --save引入组件import {BarCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入代码中使用let chartLayer = new BarCu原创 2021-08-31 18:21:39 · 858 阅读 · 0 评论 -
自研MapboxGL罗盘控件
前言最近看到了一个Cesium的罗盘插件,可以用于操作视图。博主这边直接将开发了一个适用于MapboxGL的罗盘组件,用户体验上和Cesium的罗盘插件基本是一致的,支持旋转和倾斜地图,并封装发布到了NPM,需要的同学们可以参考一下。使用方式下载依赖npm install mapbox-map-tool --save引入组件import {CompassControl} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/m原创 2021-08-30 18:40:32 · 606 阅读 · 1 评论 -
MapboxGL饼状图绘制与展示
前言之前在网上看了一个MapboxGL与Echarts集合的例子,个人感觉用处不大,效果就是相当于把Echarts的一些地图demo地图换成了Mapbox,无法实现根据坐标在地图上动态渲染饼图的功能,这里我自己封装了一个工具,下面简单介绍一下用法使用方式下载依赖npm install mapbox-map-tool --save引入组件import {PieCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist原创 2021-08-29 10:27:47 · 609 阅读 · 1 评论 -
Turf.js多边形合并(union)报non-noded intersection between错误的解决方案
问题turf.js 是由Mapbox提供的一个控件分析库,非常适合WebGIS开发者使用,里面有丰富的空间分析与计算函数、数据转换函数。最近在使用turf.js 进行多边形合并时,遇到一个问题如下,意思时多边形的两条线之间没有交点,但是后面跟的坐标全是在同一个多边形里面,自己怎么会跟自己没有交点呢?Polygon的数据格式肯定是没有问题的。found non-noded intersection between LINESTRING ( 121.54630780220032 49.5325202383原创 2021-06-30 19:09:34 · 5410 阅读 · 1 评论 -
自研MapboxJs图形绘制控件,支持撤销重做功能
背景最近需要做一个机遇Mapbox的绘制功能,虽然mapbox-gl-draw这个插件很好,但是不支持撤销和重做功能,于是自己封装了一个Mapbox控件,方便大家使用。主要是练习一下如何封装Mapbox的控件。实现了如下功能:多边形绘制 撤销点 重做点 双击地图完成绘制 右键地图完成绘制代码使用方法安装依赖npm install gykj-map-core --save代码引用 import {DrawAreaControl} from "gykj-map-core".原创 2021-04-15 20:11:46 · 926 阅读 · 0 评论 -
在uniapp的webview组件引用的网页内如何实时定位
背景本人使用uniapp开发了一个app,其中App有个页面是地图界面(Mapbox开发),因为uniapp无法直接实现地图,最后用Webview组件嵌套了一个vue开发网页。其中有一个定位功能,最开始是用uniapp的getLocation方法,在非地图界面进行定位,然后把定位结果以url参数的方法传递到地图界面。后来客户就开发反馈了,说地图界面的定位不会更新。为了解决在Webview里定位定位更新的问题,做了很多尝试,最开始以为因为uniapp打包成App时,其实所有的页面都是在Android的原创 2021-04-13 21:08:32 · 2297 阅读 · 4 评论 -
vue 使用location-map-image插件生成坐落图
开发中经常遇到,需要把一些多边形坐标信息,显示在地图上,并标注关键节点,并且可以导出为图片。这里将这些功能封装为具体的组件,并发布到了npm,以后就可以直接npm install ,直接使用了。这里简单介绍一下这个组件如何使用,可以达到何种效果。location-map-image可以将geoJson格式数据,展示再地图上,并展示坐标信息。部署按钮命令cnpm install location-map-image --save不了解的,可以参考官方文档https://www.npmj.原创 2021-02-02 16:20:35 · 851 阅读 · 0 评论 -
python调用tippecanoe实现矢量切片
前言mapbox提供的官方的切片工具tippecanoe,可以快速进行矢量切片,生成pbf格式切片或者mbtiles。也可以将矢量瓦片反向合成为具体数据。这里主要实现,用python调用tippecanoe实现将geojson转换为pbf切片。环境部署可以参考我之前的博文https://hanbo.blog.csdn.net/article/details/113172570实现代码import osif __name__ == '__main__': command =原创 2021-02-02 07:53:03 · 1948 阅读 · 1 评论 -
在Macbook上安装Tippecanoe切片库
前言Tippecanoe是Mapbox官方提供的切片库,基于C++开发而来,只能在OSX或者Ubuntu系统上进行安装部署,相比两种部署方法,还是在OSX上部署比较方便,命令也只有一行。环境准备1.Homebrew安装Homebrew的安装可以参考我的上一篇博文https://hanbo.blog.csdn.net/article/details/113172430。2.优化Git设置在后期安装Tippecanoe的过程中,会经常遇到网络超时挂起,或者其他失败的问题,总结起来,就是g原创 2021-01-26 09:05:10 · 749 阅读 · 0 评论 -
mapbox-gl-draw改造,支持绘制时实时显示面积
在Mapbox的开发过程中,需要使用mapbox-gl-draw来进行多边形的绘制、编辑与状态控制,用起来还是非常方便的。最近有需求,需要再绘制时实时显示绘制的面积,这个确实比较麻烦,因为绘制都是这个插件在控制的。最后找到了一个解决办法,把mapbox-gl-draw插件改了,绘制和修改多边形时,实时回调,触发新的事件。插件改动首先克隆mapbox-gl-draw的代码https://github.com/mapbox/mapbox-gl-draw.git,然后constants.js中增加事件名称原创 2020-12-09 19:15:33 · 4152 阅读 · 2 评论 -
Mapbox GL JS 地图上动态加载饼状图
最近要在地图上动态展示各行政区的统计数据,要求是饼图。因为同时存在多个饼图,所以Mapbox的echartsLayer插件没办法用。但是和Mapbox的官方一个实例有些类似,博主改造了一下。实现了下面的效果:效果原理给Mapbox添加自定义的Marker,其中的内容使用svg填充,根据数据动态计算svg内的path。代码<template> <div id="map"> </div></template><scr原创 2020-11-12 17:28:42 · 1432 阅读 · 0 评论 -
Mapbox GL JS实现移动端H5实时多边形(涂鸦)绘制
关于使用MapBox GL进行图形绘制,很多人都在使用mapbox-gl-draw。但是它只是封装了一些简单的点、线、面的绘制功能。最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制,要求实时记录点。开始一直使用mapbox-gl-draw来做,但是始终无法实现手指拖动绘制的功能。最后,通过监听touch事件,实时改变source实现了这个效果。效果如下图:代码如下:注意,这里使用的监听事件,仅适合移动端使用,或者将Chrome调成移动端模式<template>原创 2020-11-11 20:34:00 · 2510 阅读 · 0 评论 -
MapboxJs在vue项目中使用时出现矢量样式渲染错误的问题解决
现象在vue项目中使用MapboxJs进行开发时,会出现一个问题,style是正常的,但是渲染的各图层的线都是同一个颜色,而设定style的颜色也是正常的。错误原因因为需要将map对象存进data里,而使用了如下代码: map.on("load", (e) => { this.map = map;})解决方案将map放入data的操作放到load事件的外面 this.map = map; map.on("load", (e原创 2020-08-20 19:56:07 · 991 阅读 · 0 评论 -
MapboxJS前端 计算与多边形相交的要素
需求:在Mapbox地图上绘制一个多边形,需要计算与多边形相交的村有哪些。现状:地图上的村界市线图层计算相交,在postgresql数据库里很简单,但是数据量大的时候就有点效率低了。使用Mapbox在前端直接计算屏幕内要素的相交,计算量就比较小了。这里采用的是先把屏幕内的目标要素全查出来,然后使用turf进行相交的判断具体实现1.添加村界面图层 //村界转polygon map.addLayer(原创 2020-08-11 19:57:26 · 1020 阅读 · 0 评论 -
Android 开发GPS定位、网络定位、卡尔曼滤波优化结果对比
作为Android开发者可能会经常遇到定位的问题,在获取位置信息的时候就会遇到使用网络定位、GPS定位等种类。其实、百度和高德等还对定位结果进行了优化,其中包括卡尔曼滤波。卡尔曼滤波怎么推导的我也不是很清楚,引用了一个github上的库开发工作我的代码在码云地址主要是将GPS、网络定位、经过卡尔曼滤波优化的三种定位结果以不同颜色的图标展示在MapBox地图上,并记录在txt文件上。...原创 2020-01-02 20:45:06 · 2304 阅读 · 4 评论 -
Mapbox矢量瓦片pbf文件信息解析
Mapbox由于配合其矢量瓦片pbf格式文件,有突出的渲染性能,被很多公司和开发者所使用。矢量瓦片的格式有很多种,其中pbf格式是一种二进制文件,直接把数据信息压缩位二进制了。矢量瓦片优势主要优势有数据传输量小 相对与栅格瓦片数据量大大缩小 不受分辨率影响 矢量瓦片无论在地图放大到各种级别都是清晰的,都不会出现栅格放大后显示像元的问题。 动态样式 矢量瓦片会根据用户的定制的样...原创 2019-12-05 15:35:12 · 11878 阅读 · 22 评论 -
MapBox加载TMS栅格瓦片地图
在官网没有找到加载加载TMS地图的代码,在百度大概搜一下也没有看到,这里就展示一下代码,比加载WMSd地图服务更简单一点,直接把url替换了就可以了。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MapBox原创 2019-03-08 16:52:24 · 7835 阅读 · 14 评论 -
GeoServer发布MapBox使用的矢量切片服务
在最近的WebGIS方面,矢量瓦片已经越来越多的被使用,这里就主要介绍一下用GeoServer发布矢量瓦片的过程。前期准备jdk安装1.8.0 GeoServer2.15.0安装插件安装GeoServer发布适合MapBox的矢量瓦片安服务使用需要安装插件的 geoserver-2.15.0-vectortiles-plugin点击即可下载(注意和GeoServer版本对应)...原创 2019-03-12 16:33:29 · 1947 阅读 · 0 评论 -
MapBox调用GeoServer发布的矢量瓦片服务WMTS、TMS
在使用MapBox调用GeoServer发布的矢量瓦片服务时,在网上看到了很多文章,但是始终不显示,最终解决了这个问题。三个问题跨域访问问题,GeoServer跨域网上已经有了很多的解决方案 在GeoServer的首页点击右侧TMS下的1.0.0即可查看已发布的TMS服务地址 访问使用EPSG:4326-Gridsets制作的WMTS\TMS切片服务时,矢量切片无法显示,使用EPSG:...原创 2019-03-12 16:59:53 · 10324 阅读 · 10 评论 -
微信小程序嵌入MapBox地图方法研究
最近微信小程序比较火,MapBox在地图前端框架里也比较热门,微信小程序内置的map是腾讯地图,这对于一个GIS开发者来说是远远不能满足的。自己也想了一下Mapbox与微信小程序集成的几种方法1.直接放到微信小程序中肯定不行,因为小程序里没有div标签2.借助第三方框架腾讯的WePy的框架肯定不行,同样不支持div。美团的mpvue框架,亲自测试了一下,同样不行,虽说mapvue可...原创 2019-04-12 17:54:16 · 5530 阅读 · 3 评论 -
MapBox在Vue中显示是样式错乱问题
在使用MapBox和Vue进行开发时,发现了一个问题,设置地图容器宽高均为100%,但是地图的宽度却只占屏幕的一半大小,各类空间的位置却非常正确。情况如下图所示,在IE浏览器中却正常显示。最后在经过多番查找发现,是CSS样式的问题,在vue中引发了样式问题添加如下代码就解决了: .mapboxgl-canvas { position: relative !import...原创 2019-04-16 18:00:59 · 1537 阅读 · 1 评论 -
MapBox定位与离线地图下载Android
因为业务需要,在Android实现Mapbox离线地图下载和实时定位,仿照着官方的例子实现,网上的demo也比较少,主要代码如下所示:public class MainActivity extends MapActicity implements OnLocationClickListener, PermissionsListener, OnCameraTrackingChange...原创 2019-05-23 08:32:14 · 7814 阅读 · 6 评论 -
MapBox.js地图缩放回调事件
使用MapBox的queryRenderedFeatures进行地图查询的时候,会遇到一个问题,就是只能查询当前屏幕范围内渲染的要素,没有渲染出来的要素就查询不到。MapBox的fitBounds是一个过程,地图会进行缩放,如果在开始的时候,fitBounds后面直接进行要素查询,就会产生查询不到的结果,因为目标要素还没有渲染。这时候就需要给fitBounds加一个回调,MapBox.js加回调的...原创 2019-07-30 17:50:57 · 4212 阅读 · 2 评论 -
MapboxGL设置地图背景透明
最近遇到需求,需要把MapBoxGL放置在Leflet 之上,需要把Mapbox的背景设置成透明的,最后发现这个很简单,只要在MapBox的Style里添加一个background类型的图层,设置其背景色为透明即可。可以在style.json中设置,也可以在代码中添加,下面的我的代码是在style.json中加入的 { "id": "背景", "type": "b...原创 2019-09-24 19:13:31 · 4869 阅读 · 2 评论 -
Leaflet 加载Mapbox studio pbf格式矢量切片(一)
矢量切片数量小,传输速度快,不受分辨率影响,可以动态调整样式,有着不可替代的优点。最近在研究如何使用Leaflet加载Mapbox studio生成的pbf格式的切片。主要用了两种方案。这里讲第一种,使用Leaflet.VectorGrid插件。代码<!DOCTYPE html><html lang="zh-cn"><head> <met...原创 2019-09-24 20:21:45 · 2688 阅读 · 1 评论 -
Leaflet 加载Mapbox studio pbf格式矢量切片(二)
关于使用加载加载Mapbox studio pbf格式矢量切片,还有一种方案,使用leaflet-mapbox-gl。这个插件的本质是在leaflet上添加一个div图层,把这个div给mapbox作为容器进行渲染。可以简单的理解为两个div的叠加,当你移动地图时,两个地图同步移动。注意把Mapbox的地图背景设置成透明的MapboxGL设置地图背景透明,否则永远看不到leaflet图层。...原创 2019-09-24 21:00:35 · 3242 阅读 · 1 评论 -
MapBox加载GeoServer发布的WMS地图服务
使用MapBox加载GeoServer发布的WMS地图服务,测试一下成功,但是发现好像不支持4326坐标系,只支持3857坐标系,最终没有找到怎么加载4326坐标系的WMS服务。加载代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2019-03-08 16:17:48 · 6341 阅读 · 5 评论