GroundOverlay

此类表示地图上的地面叠加层。

构造函数

构造函数	描述
GroundOverlay(bounds: Bounds, opts: GroundOverlayOptions)	创建地面叠加层

GroundOverlayOptions

属性名	类型	描述
opacity	Number	图层透明度
imageURL	String	图层地址
displayOnMinLevel	Number	图层显示的最小级别
displayOnMaxLevel	Number	图层显示的最大级别
isReDraw	Boolean	是否开启重绘，仅当 type 为 canvas 时有效，默认 false
drawHook	Function	回调方法，作用为生成 canvas 数据，仅当 type 为 canvas 时有效，默认 null。如果要启用回调，在初始化时就需要设置此值

方法

方法	返回值	描述
setBounds(bounds: Bounds)	none	设置图层显示的矩形区域
getBounds()	Bounds	返回图层显示的矩形区域
setOpacity(opacity: Number)	none	设置图层的透明度
getOpacity()	Number	返回图层的透明度
setImageURL(url: String)	none	设置图层地址
getImageURL()	String	返回图层地址
setDisplayOnMinLevel(level: Number)	none	设置图层显示的最小级别
getDisplayOnMinLevel()	Number	返回图层显示的最小级别
setDisplayOnMaxLevel(level: Number)	none	设置图层显示的最大级别
getDisplayOnMaxLevel()	Number	返回图层显示的最大级别

事件

事件	参数	描述
click	{type: string, target: any}	鼠标点击图层后会触发此事件
dblclick	{type: string, target: any}	鼠标双击图层后会触发此事件

示例

// 创建矩形范围
const bounds = new BMapGL.Bounds(
  new BMapGL.Point(116.380, 39.900),
  new BMapGL.Point(116.424, 39.930)
);

// 创建普通图片叠加层
const imageOverlay = new BMapGL.GroundOverlay(bounds, {
  opacity: 0.8,
  imageURL: 'https://example.com/overlay.png',
  displayOnMinLevel: 10,
  displayOnMaxLevel: 18
});

// 创建 Canvas 类型叠加层
const canvasOverlay = new BMapGL.GroundOverlay(bounds, {
  opacity: 0.8,
  type: 'canvas',
  isReDraw: true,
  drawHook: function(canvas, bounds) {
    const ctx = canvas.getContext('2d');
    // 自定义绘制逻辑
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
});

// 添加到地图
map.addOverlay(imageOverlay);
map.addOverlay(canvasOverlay);

// 添加事件监听
imageOverlay.addEventListener('click', function(e) {
  console.log('图层被点击');
});

常见用途

1. 图片叠加应用：

   • 历史地图对比
   • 卫星图片叠加
   • 规划图纸展示
   • 区域范围标注

2. Canvas 动态绘制应用：

   • 实时数据可视化
   • 动态热力图展示
   • 自定义图层效果
   • 动画效果实现

注意事项

1. 图层显示说明：

   • 图层会根据设定的矩形范围自动进行图片变形
   • 建议使用合适分辨率的图片，避免过度拉伸
   • 注意设置合适的显示级别范围

2. Canvas 模式使用建议：

   • drawHook 回调函数应避免重复创建对象
   • 绘制操作应注意性能优化
   • 建议使用 requestAnimationFrame 进行动画控制

3. 性能优化建议：

   • 大尺寸图片建议做分级处理
   • 适当调整透明度，避免遮挡底图
   • Canvas 绘制时注意控制重绘频率