基础知识

众所周知地球是个球体，而作为平面化形态呈现的地图，是将地球经纬度坐标通过特定的投影方式，转化为平面坐标后得到的地理数据图像。 腾讯地图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,       //设置图层显示到哪个地图实例中
});

查看示例

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