共计 2156 个字符，预计需要花费 6 分钟才能阅读完成。
之前写过一个 leaflet 互联网地图纠偏插件，援用插件后一行代码都不必写，就能解决国内互联网地图瓦片的偏移问题。
最近想对 mapboxgl 也写一个这样的插件。
起因是本人公布的 OSM 矢量瓦片地图精度不够高，当须要放大地图查看详细信息时，就能够拿百度、高德的栅格瓦片做个补充。而应用它们的第一步就是要先纠偏。
去钻研了 mapboxgl 的底层代码，发现很多都看不懂。于是去恶补了 webgl 的常识，再去看 mapboxgl 的源码，哈哈，万变不离其宗，GIS 常识还是那些，只是计算机绘制图形的形式变了而已。
钻研后，把指标锁定在了 transform.js 文件上，这个文件次要用来解决各种坐标转换问题，包含经纬度坐标、墨卡托坐标、屏幕坐标、webgl 坐标等，还负责生成瓦片的编号。
文件中的 coveringTiles 办法就是用来计算瓦片的 x、y、z 编号的，它会返回以后比例尺和可视范畴内的所有瓦片编号。
依据 x、y、z 瓦片编号申请到互联网地图瓦片后，会在 calculatePosMatrix 办法里计算瓦片显示的屏幕地位。
mapboxgl 和 leaflet 的显示原理不同，mapboxgl 是三维坐标系，应用 webgl 绘图，减少了一个维度后，多出了很多货色要解决，二维坐标系加载瓦片时，只须要思考瓦片的 x、y 地位，三维坐标系在此基础上还要思考歪斜和透视。
webgl 的坐标都是通过地位变换矩阵来示意的，这一点和 leaflet 的差异很大。
下面的 calculatePosMatrix 办法就是依据瓦片的 x、y、z 编号，计算出瓦片在 webgl 中显示的地位变换矩阵。这里别离将瓦片的平移矩阵、缩放矩阵和视图 + 投影矩阵进行了相乘，失去了最终的地位变换矩阵。
看这个办法时我有些纳闷，它是如何依据瓦片的 x、y、z 编号来计算地位变换矩阵的，去钻研了 xyz 协定后，才明确 xyz 坐标和经纬度坐标是有一套互转公式的，瓦片编号转经纬度时返回的坐标是瓦片左上角的经纬度。详见：https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
对于 webgl 变换矩阵的常识能够参考这篇文章 https://www.cnblogs.com/charlee44/p/11623502.html 或《WebGL 编程指南》，我更举荐后者，因为后者讲的更零碎更容易了解。
不得不说，webgl 的地位变换矩阵计算还是有一些简单的，所以就想看看 mapboxgl 中有没有内置经纬度坐标和 webgl 坐标互转的办法，查看后发现，只有经纬度坐标、墨卡托坐标和屏幕坐标三者互转的办法，没有 webgl 的。
那就曲线救国，先将经纬度转成屏幕坐标，再本人写个办法把屏幕坐标转成 webgl 坐标。
实现思路：
- 依据瓦片编号和经纬度的互转公式，计算出瓦片左上角的经纬度
- 对瓦片左上角的经纬度进行纠偏，失去 wgs84 坐标的经纬度
- 将纠偏前、后的经纬度别离转为屏幕坐标，再将转换后的屏幕坐标相减，得出瓦片屏幕坐标的偏移量
- 将瓦片屏幕坐标的偏移量换算成 webgl 坐标的偏移量
- 在瓦片的平移矩阵中加上方才计算出的 webgl 坐标偏移量，实践上就能实现对瓦片的纠偏
在实现过程中，将 1、2、3 步搞定当前，因为临时还没有想好怎么实现第 4 步，于是就先将第 3 步的后果屏幕坐标偏移量，间接加到了第 5 步的平移矩阵中，后果很让人意外。
实现代码：
实现成果：
以天安门国旗为参照，纠偏前
纠偏后
哈哈，难道就这么搞定了？
难道平移矩阵中的数值都是按屏幕像素来计算的？
至多目前看来是的。
正当我开心的不要不要时，咦？边上为什么会有空白，瓦片没有申请过去？我接着放大地图，白边越来越大了
嗯~ 这个好解决，应该是因为 mapboxgl 只显示以后范畴的瓦片，当屏幕边缘的瓦片被纠偏到屏幕两头时，边缘就会呈现空隙。
只有将以后显示范畴向外扩大一些就能搞定。
正当我在开心的钻研如何向外扩大显示范畴时，无心中把地图歪斜了一下，我的妈呀！这是什么鬼
看到这个，我过后的情绪霎时就不好了。
容我整顿下情绪
好了，集体猜测，起因可能是，在地图旋转时，瓦片依据 webgl 坐标的中心点计算要旋转的角度和挪动的间隔，当初瓦片纠偏后地位产生了偏移，但计算旋转坐标时，还是依据 webgl 的中心点，所以旋转时就出问题了。
具体我也没想明确呢，感觉还是对瓦片纠偏后，须要对某个中心点也须要纠偏一下。如果有技术大牛看到这篇文章也能够给留言领导一下。
总结：
- 目前搞定了垂直视角下的瓦片纠偏
- 后续须要解决纠偏后屏幕边缘呈现的空白区域问题。
- 地图歪斜和旋转时瓦片会呈现错位，须要持续钻研。
最初，mapboxgl 纠偏插件还没有齐全搞定，就不放代码了，后续有新进展会再跟大家分享，等齐全搞定当前再向以前一样跟大家分享插件。
原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection1
关注《GIS 兵器库》，第一工夫取得更多高质量 GIS 文章。
本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。
