共计 1789 个字符，预计需要花费 5 分钟才能阅读完成。
先说论断，论断当然是：功败垂成，喜大普奔。看效果图：
好了，接下来说一下过程
先回顾一下这个系列的 第一篇 和 第二篇
第一篇是间接改的 mapboxgl 源码，在源码外面对瓦片的地位进行纠偏，遇到的问题是，地图旋转时会有错位，还有瓦片纠偏后屏幕边缘会有空白。
第二篇是写了一个 mapboxgl 自定义图层，遇到的问题是，地图在大比例尺时，瓦片会疯狂抖动。
这两篇文章收回后，有两位大牛针对下面的问题，给出了建设性的意见。
一位是思否上的网友“undefined”（这个不是 bug，是他的名称），他在看了第一篇文章后，找出了地图旋转时瓦片错位的起因，并给出了解决办法。
依照下面的思路，我从新写了一个不蕴含旋转参数的 pixelMatrix 矩阵后，错位问题解决。
解决了错位后，接下来解决屏幕边缘呈现空白的问题。
我的思路是，在计算瓦片的显示范畴时，对显示范畴进行偏移，让程序按偏移的范畴去申请瓦片，这样后续瓦片纠偏后，就不会呈现空白区域了。
在二维地图中，瓦片显示的范畴是依据屏幕 4 个角的坐标间接计算的。但 mapboxgl 是三维地图，三维地图的显示范畴是依据相机的参数来计算的，须要判断相机视椎体和瓦片的相交关系，这里还没有整明确。
所以，这个计划就又卡这儿了。
另一位网友是 mapboxgl 技术交换群里的“可乐瓶里泡枸杞”，他指出了第 2 篇文章中，大比例尺时地图抖动问题的起因，并给出了解决思路。
上图的博客链接中具体阐明了地图抖动的起因，大略意思是：webgl 只反对 float32 精度，而 JS 默认是采纳 float64 精度，JS 中的高精度数字向 webgl 传输时会造成精度损失，这种损失带来的影响就是地图抖动，比例尺越大抖动的越厉害。
如何能防止精度的损失？博客中介绍了 deck.gl 的做法：
- 将经纬度坐标转墨卡托坐标这一步，放到 webgl 中来实现，目标是为了应用 GPU 计算
- 在比例尺大于 12 级时，不再间接应用墨卡托坐标，而是计算墨卡托坐标和屏幕中心点的绝对地位。应用 float32 的精度保留绝对地位是齐全没有问题的，这样就躲避了精度损失的问题
- 重写 view 和 Projection 矩阵
按这个思路，我将上次写的 mapboxgl 自定义图层纠偏插件进行了革新，最终大比例尺时地图不再抖动了。
但又很快遇到了新问题：拖动地图时，瓦片和鼠标的挪动间隔不统一。
返回去看那篇博客的在线示例，也有同样的问题
既然这样，那就解决问题吧，瞅了瞅代码，总感觉上面这两行不悦目，
不除 2 了试试，哈哈，一招命中，问题解决。
至此，mapboxgl 对高德地图瓦片纠偏的问题胜利解决，我把他封装成了插件，不便大家应用。GIS 兵器库中又多了一件趁手的兵器。
这个插件目前不仅仅是反对高德地图瓦片，所有 gcj02 坐标的地图瓦片都反对。
当然，作为插件来讲，它还不够完满，目前发现有这么几个能够欠缺的中央：
- 跟 mapboxgl 自带的瓦片图层相比，瓦片在缩放时有点发虚
- 地图缩放时，瓦片没有过渡成果
- 移除图层后，有时会莫名其妙的忽然呈现
- 在手机端显示有问题
这些问题，后续会缓缓欠缺。也欢送大家一起参加进来，多提 Issues 和 Pull requests
地址
在线示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglMapCorrection3
插件地址：http://gisarmory.xyz/blog/index.html?source=mapboxglMapCorrection3
总结
- 解决 mapboxgl 中高德地图瓦片偏移的问题有两个计划，计划一改源码，计划二写自定义图层
- 计划一有了冲破，解决了地图旋转时瓦片错位的问题，但偏移后屏幕边缘空白的问题没有解决
- 计划二在胜利解决了地图大比例尺上瓦片抖动的问题后，最终实现了瓦片的纠偏
- 将计划二的代码封装成了插件，不便大家应用
原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection3
关注《GIS 兵器库》，只给你网上搜不到的 GIS 常识技能。
本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。
