AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
简介

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);

上一篇

自定义叠加层

下一篇

事件处理
本篇文章对您是否有帮助?