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

发表于

更新于

阅读量

左上角瓦片起始点屏幕坐标的计算

公式：

offSetX = ((realMinX- minX )/resolution);

offSetY = ((maxY - realMaxY )/resolution);

其中，realMinX、realMaxY:请求的左上角瓦片对应的真实地理坐标（geoX,geoY）

minX、maxY:屏幕可视范围的左上角对应的真实地理坐标（geoScreenX,geoScreenY）

resolution:当前地图级别里屏幕一像素代表的实际地理单位长度。

因为可视范围里，左上角屏幕坐标为（0,0）。

所以offSetX和offSetY便为左上角瓦片的起始点屏幕坐标（offSetX，offSetY）。

任意瓦片屏幕坐标的计算

公式：

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

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

其中,offSetX、offSetY：最左上角瓦片的屏幕坐标

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

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

tileSize：瓦片大小（一张瓦片的像素）

coord:目前瓦片的屏幕坐标

瓦片拼接流程

瓦片的拼接需要通过遍历X轴和Y轴。依次获取瓦片屏幕坐标后拼接。这里涉及到X轴和Y轴时的遍历个数，其实就是请求到的所有瓦片，在X轴上的个数以及Y轴上的个数。