简介

JavaScript API v3.0 的Overlay中，新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样，会根据自己的经纬度贴合在地图上。

DEMO详情

创建Canvas2D覆盖物

CanvasLayer类提供了在地图上进行Web前端canvas绘制的功能。具体的canvas绘制方法和逻辑可以参考canvas的相关资料。
使用CanvasLayer的简单示例如下：

var mp = new BMap.Map("allmap");
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);

var canvasLayer = new BMap.CanvasLayer({
    update: update
});

function update() {
    var ctx = this.canvas.getContext("2d");

    if (!ctx) {
        return;
    }

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    var temp = {};
    ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
    ctx.beginPath();
    var data = [
    new BMap.Point(116.297047,39.979542),
    new BMap.Point(116.321768,39.88748),
    new BMap.Point(116.494243,39.956539)
    ];

    for (var i = 0, len = data.length; i < len; i++) {

        // 绘制时需要对经纬度进行转换
        var pixel = mp.pointToPixel(data[i]);

        ctx.fillRect(pixel.x, pixel.y, 30, 30);
    }
}

mp.addOverlay(canvasLayer);