(以“{{jspopularV3-sidebar}} <div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">JavaScript API v3.0 的Overlay中...”为内容创建页面) |
|||
第1行: | 第1行: | ||
{{jspopularV3-sidebar}} | {{jspopularV3-sidebar}} | ||
− | <div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir=" | + | <div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbsyun.baidu.com/cms/jsapi/demo/jsapi3/canvaslayer.html"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#canvaslayer DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">创建Canvas2D覆盖物</div></div><div class="serve-explain-text">CanvasLayer类提供了在地图上进行Web前端canvas绘制的功能。具体的canvas绘制方法和逻辑可以参考canvas的相关资料。<br/>使用CanvasLayer的简单示例如下:</div><pre class="prettyprint codestyle">var mp = new BMap.Map("allmap"); |
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10); | mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10); | ||
2021年5月8日 (六) 13:10的版本
简介
JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。
创建Canvas2D覆盖物
CanvasLayer类提供了在地图上进行Web前端canvas绘制的功能。具体的canvas绘制方法和逻辑可以参考canvas的相关资料。
使用CanvasLayer的简单示例如下:
使用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);