得鹿梦鱼 得鹿梦鱼

地图瓦片在Canvas上的拼接显示原理

任意瓦片屏幕坐标的计算

offSetX、offSetY:最左上角瓦片的屏幕坐标

clipX、clipY:目前瓦片的行列号

fixedTileLeftTopNumY、fixedTileLeftTopNumY:最左上角瓦片的行列号

tileSize:瓦片大小(一张瓦片的像素)

coord:目前瓦片的屏幕坐标

coord.x = offSetX + clipX - fixedTileLeftTopNumX* tileSize;

coord.y = offSetY + clipY - fixedTileLeftTopNumY* tileSize;

瓦片拼接流程

遍历x轴上瓦片    遍历y轴上的瓦片      获得当前遍历到的瓦片的屏幕坐标,通过瓦片URL下载后,添加到canvas对应的坐标