JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。
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);
上一篇
下一篇
本篇文章对您是否有帮助?