MapboxGL坐标体系

ecef球坐标轴

ecef球的y轴朝上，跟cesium的z轴朝上不一样。x轴朝向经度90°，z轴朝向经度0°。坐标轴查看可以看这里。
地球半径是earthRadius，设置的是6371008.8。还有一个GLOBE_RADIUS，是一个像素单位，EXTENT / Math.PI / 2.0，大概是1303.797像素。

墨卡托坐标

MercatorCoordinate是mapboxgl中的墨卡托坐标，相较于3857的墨卡托坐标来说有两点不一样：

1. 通常墨卡托坐标范围是[-20037508，-20037508， 20037508， 20037508]，但是在mapboxgl中单位1的大小是整个投影世界的宽度，而不是以米为单位，所以它的范围就是[0, 0, 1, 1]；
2. 坐标空间的原点在西北角而不是中间，比如MercatorCoordinate(0, 0, 0)是西北角，MercatorCoordinate(1, 1, 0)是墨卡托世界的东南角。
3. 墨卡托坐标空间是一个立体空间，关于z维度，

将经纬度long/lat转换为谷歌mercator(或EPSG:4326转换为EPSG:900913)

var degrees2meters = function(lon,lat) {
        var x = lon * 20037508.34 / 180;
        var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
        y = y * 20037508.34 / 180;
        return [x, y]
}

x= -77.035974
y = 38.898717

console.log(degrees2meters(x,y))

// should result in: -8575605.398444, 4707174.018280

坐标在线调试计算工具

https://chrisloer.github.io/mapbox-gl-coordinates/#12.4/38.8651/-77.0875/0/5

Original Point：屏幕坐标
Lng/Lat：经纬度坐标
World Coordinates：世界坐标
TileCoordinates：瓦片坐标，范围8192，左上角（0, 0）
GL Coordinates：webgl中的坐标
NDC：NDC坐标，上面的GL坐标除以w

坐标计算

// worldSize，世界大小，单位像素，每一级都是不一样的
worldSize = tileSize * scale = 512 * 2^level;

// 垂直scele
verticalScale = worldSize / (circumferenceOfEarth * cos(lat * π / 180))

透视矩阵 * flipY矩阵 * 相机到瓦片中心的距离矩阵 * pitch(rotateX)矩阵 * angle(rotateZ)矩阵 * 平移矩阵 * 维度垂直scale矩阵 * 位置平移矩阵 * scale/zoom矩阵