地图瓦片制作

百度地图切图工具只能切<=18级别的瓦片，但是百度移动端地图已经到21级了，所以本文主要分析地图瓦片的制作流程，以及如何制作19/20/21级的瓦片

工作流程

• UI团队按照百度瓦片规则制作18，19，20，21级底图。
• UI团队给出18，19级底图的左上角、右下角瓦片坐标。
• 手机团队用百度切图工具制作18，19级瓦片。（中心点经纬度坐标可根据中心点瓦片坐标换算出来）
• 20，21，级瓦片先用dzt或者百度切图工具切成瓦片（中心点设置为(0,0)），再根据如下示意图推导出20，21级瓦片的命名规则。

百度web地图可以通过修改百度地图js，将18修改为21，从而让百度web地图可以放大到21级。

比例尺

缩放级别	比例尺	底图制作方式	底图要求
18	50米	百度瓦片	按照瓦片规则制作（256x256）， 提供完整图片 提供左上角、右下角瓦片坐标
19	20米	百度瓦片（18级放大2倍）	按照瓦片规则制作（256x256）， 提供完整图片 提供左上角、右下角瓦片坐标
20	10米	19级放大2倍	提供完整图片
21	5米	20级放大2倍	提供完整图片

18/19级别问题

级别	瓦片
18	18级图片
19	左上角 右上角 左下角 右下角

结论：18级放大到19级时，1张瓦片被分成了4张瓦片，也就是说像素比是2倍的关系；而不是2.5倍的关系

20级瓦片命名

像素坐标/瓦片坐标都是以瓦片左下角为(0,0)原点，每个瓦片的像素都是(256x256)

• 以19级瓦片为基准，计算左上角瓦片上的像素坐标(5,246)点对应的经纬度坐标
• 以19级瓦片为基准，计算右下角瓦片上的像素坐标(246,5)点对应的经纬度坐标
• 通过左上角、右下角经纬度坐标计算出20级下相应的瓦片坐标，再推导出每个瓦片的坐标

19级瓦片推导20级瓦片坐标

21级瓦片命名

跟20级瓦片命名步骤类似，只不过最好以20级瓦片为基准。

瓦片计算

tile-lnglat-transform

// 根据经纬度计算该点在level级别下的瓦片坐标
var tile_baidu = TileLnglatTransformBaidu.lnglatToTile(lnglat.lng, lnglat.lat, level);
console.log('to tile result:', tile_baidu);

// 计算瓦片上像素点的坐标（前2个参数是像素坐标，中间2个参数是瓦片坐标，level是缩放级别）
var lnglat_baidu = TileLnglatTransformBaidu.pixelToLnglat(246, 5, 194283, 77212, level);
console.log('to lnglat result:', lnglat_baidu);

19/20/21级别切图

dzt 切图

# 注意 dzt切的瓦片(0,0)原点坐标在左上角，而百度的在左下角
$ dzt slice 底图.png --output tiles --tilesize 256 --format png

百度切图工具

百度切图工具只能切<=18级的瓦片，对于19，20，21级别的瓦片，在切图的时候：

• 原图级别选择18
• 目标级别选择18
• 中心点选择(0,0)

代码片断

重命名dzt切的瓦片
由18级瓦片推导19/20/21级瓦片范围