基础知识

众所周知地球是个球体，而作为平面化形态呈现的地图，是将地球经纬度坐标通过特定的投影方式，转化为平面坐标后得到的地理数据图像。
腾讯地图JavaScript API所采用的投影方式是Web墨卡托投影，得到的地图是正方形图形。

投影方式示意（关于地图投影相关知识，请开发者自行学习了解。）：


地图在放大缩小时会显示不同精度的地理内容，为了加载速度考虑，每个缩放级别的一幅完整地图，会切分为若干个正文形小块，在显示时按需加载，地图放的越大，幅面面积也就越大，被切分成的小块就越多，这个小块称之为地图瓦片。
腾讯地图JavascriptAPI所采用的瓦片，是通过金字塔模型实现的，如下图所示。



缩放为1级（level 1）时，可显示完整世界地图，由4个瓦片组成。
随着放大到级别为N时，会将地图切割成4^N个区域，这些区域都是等大的正方形（一般为256px）。
每个瓦片具有特定的编号，一般以(x, y, z)进行表示，腾讯地图JavaScript API中以左上角为原点，x表示列号，y表示行号，z表示缩放等级。

自定义栅格图层

自定义栅格图层是指用户可以通过特定软件，将自定义的图像按照上文所述的方式切割为瓦片，并生成图片，然后按照瓦片坐标拼接形成地图的图层。常用于手绘地图、卫星图、地形图等。
腾讯地图JavaScript API提供ImageTileLayer用于加载自定义栅格图层，用户可以通过getTileUrl定义获取瓦片的方法，该方法的输入为x, y, z，返回String类型的瓦片地址：

实例说明：（注：以下示例不包含html部分） //设置中心点坐标 var center = new TMap.LatLng(26.870355,100.239704); //初始化地图 var map = new TMap.Map('mapContainer', { center: center, zoom: 15, maxZoom:16 }); //初始化imageTileLayer var imageTileLayer = new TMap.ImageTileLayer({ getTileUrl: function (x, y, z) { //拼接瓦片URL var url='http://localhost/javascript_gl/sample/img/tilelayer/' + z + '/' + x + '_' + y +'.png' ; return url; }, tileSize: 256, //瓦片像素尺寸 minZoom: 14, //显示自定义瓦片的最小级别 maxZoom: 16, //显示自定义瓦片的最大级别 visible: true, //是否可见 zIndex: 5000, //层级高度（z轴） opacity: 0.95 //图层透明度：1不透明，0为全透明 map: map, //设置图层显示到哪个地图实例中 }); 查看示例


效果截图（下图，丽江古城手绘效果为加截的自定义栅格图层，覆盖到了标准地图之上）：