浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
简介
JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。
创建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);
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消