经纬度坐标与瓦片坐标转换推导

[1]经纬度坐标与瓦片坐标的转换

选定转换的经纬度坐标与瓦片坐标（这里选4326地理坐标与谷歌XYZ规范的瓦片坐标：Z表示缩放层级，从0开始；XY的原点在左上角，X从左向右，Y从上向下）
将地理坐标系转为投影坐标系（单位：经纬度=>米）例如将4326=>web墨卡托3857，该坐标系的范围（米为单位）x[-20037508.3427892, 20037508.3427892]，范围y同样是[-20037508.3427892, 20037508.3427892]
W e b M e r c a t o r X = l n g ( π 180 ) r W e b M e r c a t o r Y = r 2 l o g 1 + s i n ( l a t ∗ ( π 180 ) ) 1 − s i n ( l a t ∗ ( π 180 ) ) WebMercatorX=lng(\frac{\pi}{180})r\\ WebMercatorY=\frac{r}{2log_{\frac{1+sin(lat * (\frac{\pi}{180}))}{1-sin(lat * (\frac{\pi}{180}))}}} WebMercatorX=lng(180π)rWebMercatorY=2log1−sin(lat∗(180π))1+sin(lat∗(180π))r
```
// 地球半径
const r = 6378137
// 4326转3857
const lngLatMercator = (lng, lat) => {//注意先转为为弧度制，弧度=角度*Math.PI/180，弧长=弧度*半径 let x = lng * (Math.PI / 180) * r;let rad = lat * (Math.PI / 180)let sin = Math.sin(rad)let y = r / 2 * Math.log((1 + sin) / (1 - sin))return [x, y]
}
```
计算任意层级 z z z下的分辨率（分辨率：一个像素宽所代表的实际长度，这里假设每张瓦片的大小为 256 ∗ 256 256*256 256∗256）

r e s o l u t i o n X = C 256 ∗ 2 z r r e s o l u t i o n Y = C 256 ∗ 2 z resolutionX=\frac{C}{256*2^{z}}\\ rresolutionY=\frac{C}{256*2^{z}} resolutionX=256∗2zCrresolutionY=256∗2zC
```
// 地球周长
const C = 2 * Math.PI * 6378137
// 瓦片像素
const titleSize = 256
// 获取某一层级下的分辨率(X,Y方向适)
const getResolution = (n) => {const tileNums = Math.pow(2, n)const tileTotalPx = tileNums * titleSizereturn C / tileTotalPx
}
```
计算像素/屏幕坐标（以为web墨卡托默坐标原点在经纬度为0的地方，而屏幕坐标原点位于屏幕左上角，所以这里需要先进行转换）

p i x e l C o o r X = W e b M e r c a t o r X + C / 2 r e s o l u t i o n X p i x e l C o o r Y = C / 2 − W e b M e r c a t o r X r e s o l u t i o n Y pixelCoorX=\frac{WebMercatorX+C/2}{resolutionX}\\ pixelCoorY=\frac{C/2-WebMercatorX}{resolutionY} pixelCoorX=resolutionXWebMercatorX+C/2pixelCoorY=resolutionYC/2−WebMercatorX

计算瓦片坐标（行列号）
t i l e C o o r X = p i x e l C o o r X 256 t i l e C o o r Y = p i x e l C o o r Y 256 tileCoorX=\frac{pixelCoorX}{256}\\ tileCoorY=\frac{pixelCoorY}{256} tileCoorX=256pixelCoorXtileCoorY=256pixelCoorY

// 根据像素坐标及缩放层级计算瓦片行列号
const getTileRowAndCol = (x, y, z) => \\因为3857与4326坐标原点位于经纬度为零的地方，而瓦片坐标原点位于左上角，所以需要将3857坐标原点转到左上角x += C / 2     y = C / 2 - ylet resolutionX = getResolution(z)//获取某一层级z下的分辨率let row = Math.floor(x / resolutionX / tileSize)let col = Math.floor(y / resolutionY / tileSize)return [row, col]
}

根据上面的推导可得出经纬度坐标（ l n g , l a t ）（lng, lat）（lng,lat）互转瓦片坐标（ r o w ， c o l ）（row， col）（row，col）总公式：

一些切片工具的工作原理也大致如此，输入你需要切片的数据及要切片的参数（如切片最大、最小层级，瓦片大小等），输出相应目录规范的XYZ切片数据，以供直接调用。

[2]瓦片服务准备

完成经纬度坐标转为瓦片坐标后便可以使用一些切片工具（geoserver等）切一些瓦片然后发布为服务或直接调用在线瓦片服务，在或者直接调用离线瓦片（注意命名规范）

[3]前端瓦片拼接显示

对于生成的栅格瓦片服务或离线瓦片，可以根据瓦片采用的规则以及切片的参数，采用canvas渲染拼接或采用基于canvas的地图库渲染即可。

可采用leaflet和opnelayers来调用瓦片服务并再前端渲染（openlayers不需要写经纬度坐标转瓦片坐标等代码实现，直接调用即可），不过为了学习的话可以使用canvas来实现瓦片地图的加载。但是使用canvas来渲染的话还会遇到许多需要优化东西：比如瓦片的加载顺序（怎么实现先加载屏幕中间的瓦片），缩放时瓦片的更新方式，平滑移动效果，瓦片的缓存机制等