山东大学项目实训8

界面实现（3）

瓦片地图（2）

将之前获取到的瓦片展示在界面（仅用于测试）

showTiles: function () {
    var $this = this;
    $.each(this.tiles, function (i, item) {
        var image = $this.drawTileRect(item);
        $this.addTileToMap(item, image);
    });
},

通过drawTileRect（）绘制出瓦片的范围，采用百度地图中规定瓦片的大小，即256*256，根据上篇文章中得出的tiles[]进行绘制，最后调用toDataURL()返回一个包含图片展示的 data URI
具体方法如下所示：

//tileCoord:瓦片坐标，如{x:122,y:244}
drawTileRect: function (tileCoord) {

    var w = 256, h = 256;
    var canvas = $("<canvas width='" + w + "' height='" + h + "' ></canvas>");
    var context = canvas[0].getContext("2d");
    //随机背景颜色
    context.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * Math.random() * 10) + ',' + Math.floor(255 - 42.5 * Math.random() * 10) + ',' + Math.floor(255 - 42.5 * Math.random() * 10) + ')';
    context.globalAlpha = this.opacity;
    context.strokeStyle = "black";
    context.fillRect(0, 0, w, h);
    //文字颜色
    context.fillStyle = "white";
    context.fillText(tileCoord.x + "," + tileCoord.y, w / 2 - 30, h / 2);

    //画边线
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, w);
    context.lineTo(w, h);
    context.lineTo(w, 0);
    context.lineTo(0, 0);
    context.closePath();
    context.stroke();
    var image = canvas[0].toDataURL();
    canvas = null;
    return image;
},

将调用上述方法获取到image作为参数传入addTileToMap(tileCoord, image)，将绘制的瓦片添加到地图中，其中要添加下述代码，删除瓦片已经加载的图片，避免重叠渲染

if (this.tileLayers[key]) {
            $this.map.removeOverlay(this.tileLayers[key]);
        }

绘制结果如图所示：