很多做地图开发的朋友们应该都习惯了使用成熟的地图引擎去渲染一幅地图，有的引擎可以做到简单的几行代码，就可以渲染出一幅漂亮的地图；地图引擎做的再好，也不能完全覆盖了多样化的需求。掌握其原理才能跳出诸多限制。今天和大家聊聊几行代码渲染地图背后的奥妙，研究一下浏览器是如何计算当前屏幕范围内瓦片坐标并绘制到屏幕上，阅读文章前最好了解下瓦片坐标计算原理，或者可阅读历史文章《栅格瓦片坐标计算》。
计算当前地图范围内瓦片数量
为了地图容器范围内能铺满瓦片以及拖动地图不至于边界留白，地图边界外多加载2-3行/列瓦片，下边以地图等级为10级(resolution=152.87405657035256)，地图中心点经纬度116.3, 39.85，地图容器大小1920*800为例，详细介绍瓦片坐标计算及屏幕坐标转换过程。本例设定边界瓦片冗余行列数padding为2，地图中心瓦片坐标为842, 388。
1 计算瓦片列数
瓦片列数cols = 容器宽度 / 256 + 2 * padding;
cols = 1920 / 256 + 2 * 2 = 11.5;向上取整后为12列
2 计算瓦片行数
瓦片行数rows = 容器高度 / 256 + 2 * padding;
rows = 800 / 256 +2 * 2; 向上取整后为8行
结果为12 * 8 = 96片瓦片
计算中心瓦片左上角屏幕坐标
中心瓦片左上角屏幕坐标是整个地图瓦片转换屏幕坐标的关键，其他瓦片的坐标和中心瓦片坐标x,y方向差值为n * 256。 中心瓦片左上角距离切图原点的距离为（单位/米）
centerTileMeterx = 842 * 256 * resolution = 32952308.641852636
centerTileMetery = 388 * 256 * resolution = 15184674.29101998
地图中心点距离切图原点的距离为（单位/米）
将经纬度转换为web墨卡托投影坐标xy = { x: 12946456.779257717, y: 4844168.570470275}
centerMeterx = 12946456.779257717– (-20037508.342789244) = 32983965.122046962;
centerMetery = 20037508.342789244 - 4844168.570470275 = 15193339.772318969;
计算中心瓦片左上角坐标和地图中心点坐标像素差
dx = (centerTileMeterx – centerMeterx) / resolution = -207.0755555554856;
dy = (centerTileMetery – centerMetery )/ resolution = -56.68379248509596;
中心瓦片左上角屏幕坐标为
centerTilex = 1920 / 2 + dx = 753;
centerTiley = 800 / 2 + dy = 343;
地图范围内其他瓦片屏幕坐标计算
其他瓦片屏幕坐标和中心瓦片屏幕坐标是相差n个256关系，计算较为简单，根据第一步计算出的瓦片行列数rows和cols可计算出相对中心瓦片的差值，下边给出图中红色框选位置瓦片计算方法。
x = centerTilex – 2 * 256 = 241;
y = centerTiley – 1 * 256 = 87;
