常见地图⽡⽚坐标系定义及计算原理
本⽂将介绍⽡⽚坐标相关知识，并提供⾼德地图、百度地图、⾕歌地图的经纬度坐标与⽡⽚坐标的相互转换⽅法和类库。
。最常见的地图⽡⽚是图⽚格式的，现在有的地图服务商也提供了⽮量的⽡⽚数据，然后在⽤户端使⽤Canvas渲染成图⽚，如。
在进⾏地图开发时，为获取特定经纬度所在区域的⽡⽚和获取⽡⽚上像素点对应的经纬度，经常需要进⾏经纬度坐标与⽡⽚坐标、像素坐标的相互转换。本⽂将介绍⽡⽚坐标相关知识，并提供⾼德地图、百度地图、⾕歌地图的经纬度坐标与⽡⽚坐标的相互转换⽅法和转换类库--。
库实现，误差在10⽶左右。
虽然各地图服务商经纬度坐标系不同，但某⼀互联⽹地图的经纬度坐标与⽡⽚坐标相互转换只与该地图商的墨卡托投影和⽡⽚编号的定义有关，跟地图商采⽤的⼤地坐标系标准⽆关。。
墨卡托投影⽰意图.jpg
据我了解，各⼤地图服务商都采⽤了进⾏投影，⽡⽚坐标系的不同主要是投影截取的地球范围不同、⽡⽚坐标起点不同。经纬度坐标（lng, lat）转⽡⽚坐标（tileX， tileY）:经纬度坐标（lng, lat）转像素坐标（pixelX, pixelY）
⽡⽚（tileX， tileY）的像素坐标（pixelX, pixelY）转经纬度坐标（lng, lat）
发现百度 API的⼀个bug:
经纬度坐标(lng， lat)转平⾯坐标（pointX, pointY）
百度经纬度坐标与百度平⾯坐标的相互转换，并没有公开的公式，需要通过百度地图的API实现。主要代码为：
// Bmap为百度JavaScript API V2.0的地图对象lnglatToPoint(longitude, latitude) {
let projection = new BMap.MercatorProjection();let lnglat = new BMap.Point(longitude, latitude);let point = projection.lngLatToPoint(lnglat); return {pointX: point.x,pointY: point.y};}
平⾯坐标（pointX, pointY）转经纬度坐标(lng， lat)也需要通过百度地图的API实现。主要代码为：
pointToLnglat(pointX, pointY) {
let projection = new BMap.MercatorProjection();let point = new BMap.Pixel(pointX, pointY);let lnglat = projection.pointToLngLat(point); return {
lng: lnglat.lng,lat: lnglat.lat};}
平⾯坐标（pointX, pointY）转⽡⽚坐标（tileX， tileY）
平⾯坐标（pointX, pointY）转像素坐标（pixelX, pixelY）
⽡⽚（tileX， tileY）的像素坐标（pixelX, pixelY）转平⾯坐标（pointX, pointY）
经纬度坐标与⽡⽚坐标、像素坐标的相互转换，以平⾯坐标为中间量进⾏转换。的代码⾮常奇葩，⾮常迷惑：
经纬度类是Point,平⾯坐标类是Pixel。
经纬度转平⾯坐标是lngLatToPoint，接收⼀个Point对象，返回⼀个Pixel对象。平⾯坐标转经纬度坐标是在pointToLngLat，接收Pixel对象，返回⼀个Point对象。WTF!
，各地图服务商的⽡⽚等级和链接如下：百度图⽚⽡⽚的层级是[3~18]百度主页的层级是[3~19]⾼德图⽚⽡⽚的层级是[1~19]⾼德地图官⽹介绍的：
获取当前地图缩放级别,在PC上，默认取值范围为[3,18]；在移动设备上，默认取值范围为[3-19]⾕歌地图⽡⽚层级是[0~21]
node-canvas实现百度地图个性化底图绘制tile-lnglat-transformcoordtransform地图投影的N种姿势Web MercatorSlippy map tilenames
百度地图API详解之地图坐标系统
百度JavaScript API中经纬度坐标转⽡⽚坐标bug⾼德地图层级