缘起

之前分享了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. mysql主要的两个索引Innodb和MyIASM。

    参考:https://www.cnblogs.com/xiaohaillong/p/6079551.html 1. a.Innodb引擎,Innodb引擎提供了对数据库ACID事务的支持.并且还提供了 ...

  2. 再过五分钟,你就懂 HTTP 2.0 了!

    Hey guys ,各位小伙伴们大家好,这里是程序员 cxuan,欢迎你收看我最新一期的文章. 这篇文章我们来聊一聊 HTTP 2.0,以及 HTTP 2.0 它在 HTTP 1.1 的基础上做了哪些 ...

  3. Spring系列之事物是如何管理的

    前言 我们都知道Spring给我们提供了很多抽象,比如我们在操作数据库的过程中,它为我们提供了事物方面的抽象,让我们可以非常方便的以事物方式操作数据库.不管你用JDBC.Mybatis.Hiberna ...

  4. uniapp 封装 request 并 配置跨域,( 本地 + 线上 + 封装 )

    找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. &qu ...

  5. 机械硬盘换到SSD后系统引导报错代码0xc000000e

    由于机械硬盘IO不够用,系统使用起来非常的缓慢,特意购买了新的SSD进行了替换.机械硬盘的IO在70左右,SSD的IO在1000-4000左右指普通消费SSD. 由于不想安装系统,就直接把机械硬盘的数 ...

  6. MySQL——MySQL用户管理

    1.MySQL用户定义:用户名+主机域/ip/.. 2.用户作用: 1.登录 2.管理数据库及数据 3.权限: 读和写操作 4.角色: 数据库定义好的一组权限的定义 5.权限范围: 全库:*.* 单库 ...

  7. shell条件语句if

    1.单分支语句 if [ ];then 命令 fi if [ ] then 命令 fi 2.双分支语句 if [ ] then echo cmd1 else echo cmd2 fi 3.多分支语句 ...

  8. Hexo+Butterfly主题美化

    前言 本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn ...

  9. JVM-调优-命令

    目录 jps 命令格式 option参数 示例 jstat 命令格式 参数 option 参数总览 option 参数详解 -class -compiler -gc -gccapacity -gcut ...

  10. 批量ip段/子网转换

    #coding=utf-8 import re import struct from sys import argv class CIDRHelper(object): def ipFormatChk ...