mapbox 接入高德矢量地图实战

摘要:
Mapbox作为现如今比较流行的地图框架为我们提供了漂亮的个性化地图,在平常的使用过程中可以方便的接入高德/谷歌等矢量切片地图。由于Mapbox地图数据来源于OpenStreetMap等国外厂商,中国地图POI/道路等信息都不全,造成在实际项目中使用很不精细。解决了以上两个问题后,就可以进行PBF序列化数据新建javaweb项目,引入java-vector-tilejar包,编写相关代码,发布服务,再使用mapbox接入服务,此致mapbox成功接入了高德矢量化地图。

Mapbox 作为现如今比较流行的地图框架为我们提供了漂亮的个性化地图,在平常的使用过程中可以方便的接入高德/谷歌等矢量切片地图。由于Mapbox地图数据来源于Open Street Map等国外厂商,中国地图POI/道路等信息都不全,造成在实际项目中使用很不精细。对比国内互联网地图厂商,百度和高德都提供了自有格式的矢量地图,如何解析其数据,再将数据PBF化,就是我们重点研究的问题了。本文作为学术研究,将探讨下解析高德矢量地图,并PFB化。

  1. 打开高德地图,我们可以看到地图数据有以下两种请求格式:
    1. mapType=normal&v=2&style=5&rd=1&flds=poilabel,roadlabel&t=  
    2. mapType=normal&v=2&style=5&rd=1&flds=region,building,road&t=  
    

第一种格式是用来请求标志类的,包括POI 道路标注,第二种数据格式是用来请求区域、建筑面数据、道路信息的。

  1. url 参数t后面就是请求的行列号和地图层级。注意:这个行列号是经过加密的。
  2. 请求第一种格式的URL,通过分析返回的数据结构,可以得到每组JSON 数据是通过|连接的,从下标为1的数据进行JSON反序列化,得到的POI 和道路标注数据。如下图
    mapbox 接入高德矢量地图实战第1张

再进一步研究得出下标为0的就是POI数据,下标为1的是标注的颜色(也是加密的),下标为4的就是POI 的分类,分类为labels:pois的兴趣点,二级分类是下标为5的数据。
分析POI数据如下图
mapbox 接入高德矢量地图实战第2张
下标为0 的是标注名称,下标为1的是坐标信息(加密),下标为2 为文字偏移量,下标3为POI 的图片的位置和偏移量。
4. 过同样的分析手段,我们得到了高德地图的各个元素数据,接下来进行PBF序列化数据,在这之前先考虑下Mapbox的Style样式问题。
A) sprite Json 文件和图片文件。高德地图中POI 所有的图标都在一个文件中icon-normal-small.png,每个图标的大小为24×24,计算POI 图标生成sprite Json文件。
B) mapbox 图层大致可分为地图背景、region、road、building、poi、road_label,当然根据高德数据格式可以划分的更细,比如可以将poi 分为19个小类和区域标注、城市、区县乡镇,村庄等。这样的分类和高德提供的风格化地图样式一样的了。
同时我们可以加入自定义的行政区背景地图使得地图更加的漂亮。

解决了以上两个问题后,就可以进行PBF序列化数据
新建java web 项目,引入java-vector-tile jar 包,编写相关代码,发布服务,再使用mapbox 接入服务,此致mapbox成功接入了高德矢量化地图。
mapbox 接入高德矢量地图实战第3张

遗留问题:
1)高德地图中将道路和道路标注分开,且道路标注是多个文字,使得mapbox 中道路的文字显示不全。
2)道路数据不够精细,导致地图在大比例尺下道路与道路之间有间隙。
3)建筑物锯齿过于明显。
4)对于区县绘制矩形底图需要动态计算暂时未实现。

免责声明:文章转载自《mapbox 接入高德矢量地图实战》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Lodash数组篇去除MathType内联公式后自动生成的空格下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Apache POI Java读取100万行Excel性能优化:split vs indexOf+subString,谁性能好

使用Apache POI eventmodel实现一个Excel流式读取类,目标是100万行,每行46列,文件大小152MB的Excel文件能在20s读取并处理完。一开始实现的程序需要260s,离目标差太远了,使用jvisualvm分析各方法执行时间,结果如下: 可以看到,程序中的splitLine和getRowNum方法消耗了大量时间。这两个方法都特别...

Vue3.0中使用高德地图

VUE-CLI 3.0 中配置高德地图 在项目开发中,有时需要加载地图控件,这里记录下载vue-cli中引入地图控件的基本流程。 1、首先,需要注册高德开放平台的账号,并在【应用管理】页面【创建新应用】,为应用添加Key值 高德开放平台:https://lbs.amap.com/ 2、在Vue-Cli中public下的index.html加入script...

MATLAB中矢量场图的绘制 (quiver/quiver3/dfield/pplane) Plot the vector field with MATLAB

1.quiver函数  一般用于绘制二维矢量场图,函数调用方法如下: quiver(x,y,u,v)    该函数展示了点(x,y)对应的的矢量(u,v)。其中,x的长度要求等于u、v的列数,y的长度要求等于u、v的行数。在绘制图像的过程中,通常用 meshgrid 来生成所需的网格采样点。 下面举几个例子: 例1:一个最简单的例子,该二维矢量场图中的矢...

poi的各种单元格样式以及一些常用的配置

之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对。 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用但不是很完美。 这里找到网上一个比较全面的简单设置。这么做一个记录,之后就是参考这个单元格的样式配置自己需要的格式。 官方给出的api太难了,还是看中文的吧。...

解决react下找不到原生高德地图AMap类的问题

方法1. 使用注释 //eslint-disable-next-line写在每个出现AMap类的前面一行,如下所示 原理是告诉eslint:注释下面这一行您别管。 方法2.http - https <scripttype="text/javascript"src="http://t.zoukankan.com/https://api.map.ba...

面向对象:MATLAB的自定义类 [MATLAB]

  这几天刚刚开始学习MATLAB的面向对象编程。以前做的事情都是用MATLAB写一些简单的脚本或者函数,这方面MATLAB成熟的函数和直截了当的矩阵运算方法和语法都很容易上手,方便人专注于算法本身。前几天写代码的时候想到,在实际用MATLAB进行数值计算时,将数据和函数用一些方法组织起来也会带来很大的便利,否则零散的数据和函数总归看着不舒服。比如,我恰好...