缘起

之前分享了mapboxgl 互联网地图纠偏插件,插件当时只集成了高德地图。

文章发布后,有小伙伴在后台留言,希望插件也能支持百度地图。

刚好国庆假期有时间就研究了一下。

插件加载瓦片原理

首先,插件之所以能够正确的加载互联网地图瓦片,关键是依托经纬度和瓦片编号的互转算法。

有了经纬度和瓦片编号的互转算法,插件就能根据当前地图窗口4个角的经纬度坐标,算出需要请求的瓦片编号。

再根据瓦片编号转经纬度的算法,算出请求到的每一个瓦片在地图上摆放的经纬度位置。

这样瓦片就能正确的显示在地图上了。

然后再监听地图范围的改变,当范围改变时,重复上述步骤,更新地图瓦片。

瓦片编码方式

经纬度和瓦片编号的互转算法,在不同地图中是不一样的,这取决于不同地图的瓦片编码方式。

瓦片编码方式总结下来,可以分为4大类:谷歌XYZ、TMS、QuadTree、百度XYZ。

我们之前集成的高德地图瓦片,采用的就是谷歌xyz编码方式,这种编码方式,瓦片的坐标原点在世界地图的左上角,西经180 º北纬85 º左右,瓦片编号规则如下图所示:

谷歌xyz编码方式的经纬度和瓦片编号互转算法是公开的,详见:Slippy map tilenames,插件之前就是用的这个。

百度地图采用的是自己的百度XYZ方式,瓦片坐标的原点在本初子午线和赤道的交汇处,瓦片编号规则如下图所示:

网上有人研究了这4类瓦片编码方式的,经纬度坐标与瓦片编号互转算法,并在github上分享了源码

我们把百度的那部分互转算法拿来,加入到我们的纠偏插件中,这样纠偏插件就能支持百度地图了。

纠偏后效果如下:

插件升级

插件这次升级,除了新增百度地图以外,顺带把平时常用的天地图、OSM和GEOQ也加了进来。

天地图是大地2000坐标系,可以在wgs84坐标地图上直接使用,误差很小。OSM地图直接是wgs84坐标,不需要纠偏。

所以它两个在插件中直接使用 mapboxgl 的原生接口,其它地图则使用我们写的自定义图层接口。

GeoQ地图瓦片的编码方式和高德相同,改个瓦片请求地址就可以。

把它们都收集到一起,看效果,真是爽歪歪

最后,在 mapboxgl 中还是推荐使用矢量瓦片,展示效果会好很多,上面的栅格瓦片推荐作为补充使用。

目前网上还没有免费的矢量瓦片地图资源,这个问题可以通过本地发布OSM地图矢量瓦片的方式解决。

本地发布OSM地图矢量瓦片的方式可以参考之前写的文章 OSM地图本地发布-环境搭建OSM地图本地发布-如何生成各省市矢量地图

插件地址

mapboxgl互联网地图纠偏插件

在线示例:http://gisarmory.xyz/blog/index.html?demo=mapboxglMapCorrection4

代码地址:http://gisarmory.xyz/blog/index.html?source=mapboxglMapCorrection3

总结

  1. 之前分享的mapboxgl互联网地图纠偏插件只集成了高德地图,有小伙伴留言希望支持百度地图。
  2. 插件加载互联网地图瓦片的原理是基于经纬度和瓦片编号的互转算法。
  3. 因为不同地图使用的瓦片编码规则不同,所以不同地图的经纬度和瓦片编号的互转算法也会不同。
  4. 网上有人分享了不同地图中,经纬度和瓦片编号的互转算法,我们把百度地图的互转算法拿来使用,这样插件就能支持百度地图瓦片的纠偏了。
  5. 本次插件升级除了增加百度地图外,还增加了天地图、OSM地图和GeoQ地图。

参考资料

瓦片地图原理:

https://segmentfault.com/a/1190000011276788

国内主要地图瓦片坐标系定义及计算原理:

https://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/

Slippy map tilenames:

https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames


原文地址:http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection4

关注《GIS兵器库》, 只给你网上搜不到的GIS知识技能。

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名《GIS兵器库》(包含链接:  http://gisarmory.xyz/blog/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

mapboxgl 纠偏百度地图的更多相关文章

  1. 百度地图坐标纠偏和转换工具和DLL

    百度一直以来都是个即想装出一副拥抱互联网开放的样子,又为了短期商业利益封闭自己的公司,模仿谷歌地图,开放了自己的百度地图 API,为了防止别人盗用其数据和用户自由迁移,地图相比于火星坐标,又更加封闭, ...

  2. openlayers应用“四”:百度地图纠偏续

    续前一篇,上一篇提到百度地图纠偏的基本思路,经过经过一天的努力,实现了百度地图坐标偏移参数的提取,步骤以及实现效果如下: 1.数据来源:四川省的省道矢量数据 2.提取坐标偏移参数的过程如下: A.将四 ...

  3. openlayers应用“三”:百度地图纠偏

    前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图,页面上能够正常显示.地图加载后在地图上显示一条GPS轨迹,发现离实际位置相差太远,如下图所示: 轨迹形状和实际形状相同,但是位移太远, ...

  4. Java百度地图经纬度纠偏

    在国内使用电子地图获取到的经纬度都不是真实的经纬度,而是经过一定的算法在真实的经纬度上添加了一个偏移量,且不同的地图有不同的算法.现在告诉大家在java中怎样对百度地图进行纠偏,主要实现将真实的经纬度 ...

  5. 百度地图API应用实践(一) —— 栅格图(草稿)

    概述 运用百度地图JS API,实现了在百度地图上绘制栅格并按统计值渲染栅格颜色.实现的过程是不断补习的过程,其中用到一些技术,是个人首次尝试.包括:(1)简单的jQuery语法,并实现Ajax:(2 ...

  6. 百度地图 iOS SDK - 坐标转换方法

    百度地图 Android SDK 要么 iOS SDK 或各种 API 工具产品,我们使用百度自己的加密坐标系. 员在使用过程中,位置点都是通过 GPS 或者其它途径获取的.所以与百度地图所使用的坐标 ...

  7. 百度API实例——google地图数据转化为百度地图数据

    前段时间做的项目前端都是用Google地图,最近在一个地方需要用到百度地图,因为不同地图都有自己的处理,同一个经纬度在不同地图上显示的位置并不相同,因此,要把以前的数据直接拿过来用需要做一个转换.查阅 ...

  8. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值

    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...

  9. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

随机推荐

  1. sparksql的三种join实现

    join 是sql语句中的常用操作,良好的表结构能够将数据分散在不同的表中,使其符合某种范式,减少表冗余,更新容错等.而建立表和表之间关系的最佳方式就是Join操作. sparksql作为大数据领域的 ...

  2. freeswitch新增模块

    概述 freeswitch的架构由稳定的核心模块和大量的外围插件式模块组成.核心模块保持稳定,外围模块可以动态的加载/卸载,非常灵活方便. 外围模块通过核心提供的 Public API与核心进行通信, ...

  3. 关于IDEA无法加载main方法的bug

    问题现象 main方法没有run按钮 问题解决 发现args显示灰色未调用,原来是之前莫名其妙调用了sun包下的String 删除调用问题解决!

  4. JS 之 每日一题 之 算法 ( 划分字母区间 )

    题目详解: 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 例子: 示例 1: 输入:S = &quo ...

  5. SpringBoot2.x+mybatis plus3.x集成Activit7版本

    最近在写一个开源项目ruoyi-vue-pro,暂时负责Activiti7工作流的搭建,接这个任务一个原因,是比较好奇Activiti7版本与先前的5.6版本究竟有什么区别,因为先前在工作当中,最开始 ...

  6. 致敬mentohust,路由器使用Socket认证华科校园网

    致敬mentohust,路由器使用Socket认证华科校园网 前言: 上一篇文章中,为了解决ESP32华科无线网认证的问题,我成功把网页认证机制用Python+Socket复现.但痛点依然存在,无线网 ...

  7. CentOS7系统搭建FTP服务器

    创建FTP服务器1.安装FTP服务 yum install -y vsftpd 默认的FTP服务的配置文件路径为/etc/vsftpd cd /etc/vsftpd[root@test924 vsft ...

  8. Python - //和/的区别

    / 表示浮点数除法,返回浮点结果; // 表示整数除法,返回不大于结果的一个最大的整数 print("6 // 4 = " + str(6 // 4)) print("6 ...

  9. 7-31 堆栈操作合法性 (20 分) PTA

    7-31 堆栈操作合法性 (20 分)   假设以S和X分别表示入栈和出栈操作.如果根据一个仅由S和X构成的序列,对一个空堆栈进行操作,相应操作均可行(如没有出现删除时栈空)且最后状态也是栈空,则称该 ...

  10. 命令行解析函数:getopt_long、getopt

    一.前言 在学习一些项目代码时,尤其涉及到命令行传参的代码,经常遇到getopt相关的函数,对这一类函数可以说是既陌生又熟悉.陌生是因为不知道它是干啥的,熟悉呢,是因为经常遇到.于是乎在追踪了多天ip ...