缘起

之前分享了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. linux centos7 定时执行服务监控脚本

    2021-08-25 1. 需求 在服务挂掉之后我们要怎么做才能保证服务在短时间内开启?可以编写脚本监控服务的状态,在服务挂掉后及时将其开启,并定时执行该脚本. 2. 脚本编写 思路:平常我们可以通过 ...

  2. 如何在RHEL7或CentOS 7系统下修改网卡名称(亲测有效~!)

    亲测有效的更改RHEL7或CentOS 7的网卡名称的方法, 按照以下4步来操作就可以实现! Step 1 :网卡配置文件名称重命名为eth0[root@localhost ~]# ifconfige ...

  3. 性能测试工具JMeter 基础(五)—— 测试元件: 测试计划

    测试计划的定义: 测试计划是测试脚本的容器,定义了要执行什么.怎么执行对测试做总体的设置,且都是从线程组开始执行 在测试计划中可自定义用户变量(User Defined Variables),可通过A ...

  4. Redis哨兵机制的实现及与SpringBoot的整合

    1. 概述 前面我们聊过Redis的读写分离机制,这个机制有个致命的弱点,就是主节点(Master)是个单点,如果主节点宕掉,整个Redis的写操作就无法进行服务了. 为了解决这个问题,就需要依靠&q ...

  5. C语言学习笔记---1.C语言概述

    1.典型C程序结构 2.C程序细节 2.1#include指令和头文件 #include这行代码是一条C预处理器指令(preprocessor directive).通常,C编译器在编译前会对源代码做 ...

  6. 样式和模板快速入门Style,Template

    http://www.cnblogs.com/jv9/archive/2010/04/14/1711520.html 样式(Style)和模板(Template)的定义 在Silverlight中,样 ...

  7. 在 Docker 的 CentOS7 镜像 中安装 mysql

    在 Docker 的 CentOS7 镜像 中安装 mysql 本来以为是个很简单的过程居然折腾了这么久,之前部署云服务器时也没有好好地记录,因此记录下. 特别提醒:本文的操作环境是在 Docker ...

  8. Spring系列-SpringBase+IOC

    Spring 一.前言 Thinking is more important than learning 本文主要讲述spring 以及它的 IOC原理 代码地址:https://gitee.com/ ...

  9. 343 day08File类、递归

    day08[File类.递归] 主要内容 File类 递归 教学目标 [ ] 能够说出File对象的创建方式 [ ] 能够说出File类获取名称的方法名称 [ ] 能够说出File类获取绝对路径的方法 ...

  10. CodeForce-797C Minimal string(贪心模拟)

    Minimal string CodeForces - 797C Petya 收到一个长度不超过 105 的字符串 s.他拿了两个额外的空字符串 t 和 u 并决定玩一个游戏.这个游戏有两种合法操作: ...