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

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

• 选定转换的经纬度坐标与瓦片坐标（这里选4326地理坐标与谷歌XYZ规范的瓦片坐标：Z表示缩放层级，从0开始；XY的原点在左上角，X从左向右，Y从上向下）

• 将地理坐标系转为投影坐标系（单位：经纬度=>米）例如将4326=>web墨卡托3857，该坐标系的范围（米为单位）x[-20037508.3427892, 20037508.3427892]，范围y同样是[-20037508.3427892, 20037508.3427892]
  $$\begin{gathered} WebMercatorX=lng(\frac{\pi }{180})r \\ WebMercatorY=\frac{r}{2lo{g}_{\frac{1+sin(lat\ast (\frac{\pi }{180}))}{1-sin(lat\ast (\frac{\pi }{180}))}}} \end{gathered}$$

  // 地球半径
  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$下的分辨率（分辨率：一个像素宽所代表的实际长度，这里假设每张瓦片的大小为$256\ast 256$）

  $$\begin{gathered} resolutionX=\frac{C}{256\ast 2^z} \\ rresolutionY=\frac{C}{256\ast 2^z} \end{gathered}$$

  // 地球周长
  const C = 2 * Math.PI * 6378137
  // 瓦片像素
  const titleSize = 256
  // 获取某一层级下的分辨率(X,Y方向适)
  const getResolution = (n) => {
      const tileNums = Math.pow(2, n)
      const tileTotalPx = tileNums * titleSize
      return C / tileTotalPx
  }
  

• 计算像素/屏幕坐标（以为web墨卡托默坐标原点在经纬度为0的地方，而屏幕坐标原点位于屏幕左上角，所以这里需要先进行转换）

$$\begin{gathered} pixelCoorX=\frac{WebMercatorX+C/2}{resolutionX} \\ pixelCoorY=\frac{C/2-WebMercatorX}{resolutionY} \end{gathered}$$

• 计算瓦片坐标（行列号）
  $$\begin{gathered} tileCoorX=\frac{pixelCoorX}{256} \\ tileCoorY=\frac{pixelCoorY}{256} \end{gathered}$$

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

• 根据上面的推导可得出经纬度坐标$（lng,lat）$互转瓦片坐标$（row，col）$总公式：
  

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

[2]瓦片服务准备

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

[3]前端瓦片拼接显示

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

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