GroundOverlay
构造函数
创建地面叠加层覆盖物
参数 类型 说明 boundsBounds叠加层显示的矩形区域 opts可选GroundOverlayOptions可选参数 属性 类型 说明 displayOnMaxLevelnumber图层显示的最大缩放级别，默认值为 21 displayOnMinLevelnumber图层显示的最小缩放级别，默认值为 3 drawHookFunction自定义绘制回调，type 为 'canvas' 且开启 isReDraw 时每帧渲染前调用。 enableClickingboolean是否响应鼠标事件 enableMassClearboolean是否允许在调用 map.clearOverlays() 时清除此覆盖物 imageURLstring图层图片地址，兼容旧版 imageURL 配置，新代码请使用 GroundOverlayOptions#url isReDrawboolean是否开启循环重绘，type 为 'canvas' 时生效。 开启后每帧渲染前都会调用 drawHook 并重新采集 canvas 内容作为贴图，用于实现动态效果（如雷达扫描、水波动画）； 关闭则 canvas 内容仅在初始化时采集一次，作为静态贴图 opacitynumber图层透明度，取值范围0 - 1 topboolean是否在普通覆盖物之上绘制 type"image" | "video" | "canvas"叠加内容类型 urlstring | HTMLCanvasElement叠加内容来源。type 为 'image' 时传图片地址，'video' 时传视频地址，'canvas' 时直接传 canvas 元素 返回值 GroundOverlay
示例代码1：图片覆盖物
const bounds = new BMap.Bounds(
new BMap.Point(116.390, 39.910),
new BMap.Point(116.420, 39.925)
);
const groundOverlay = new BMap.GroundOverlay(bounds, {
url: 'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_all.png',
opacity: 0.8,
});
map.addOverlay(groundOverlay);
方法
- #addEventListener<K extends keyof GroundOverlayEventMap>(
event: K,
handler: (e: GroundOverlayEventMap[K]) => void,
): void添加事件监听函数
参数 类型 说明 eventK事件名称 handler(e: GroundOverlayEventMap[K]) => void事件处理函数 返回值 void
禁止覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
draw
- draw(): void
抽象生命周期方法，当地图状态发生变化时调用，对覆盖物进行绘制。
仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现，用户无需调用也无需重写。
返回值 void
允许覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
返回图层显示的矩形区域
返回值 Bounds
返回图层显示的最大缩放级别
返回值 number
返回图层显示的最小缩放级别
返回值 number
获取图层内容来源，图片或视频类型的结果为资源地址，Canvas 类型的结果为 Canvas 元素
返回值 string | HTMLCanvasElement
返回覆盖物所在的地图实例
返回值 Map
返回图层透明度
返回值 number
hide
- hide(): void
隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none
返回值 void
initialize
抽象生命周期方法，用于初始化覆盖物，当调用map.addOverlay时，API内部将调用此方法。
仅在自定义覆盖物时需要实现此方法，并返回覆盖物对应的HTML元素。 内置覆盖物（
Marker、Polyline、Polygon等）已在内部实现，用户无需调用也无需重写。参数 类型 说明 mapMap返回值 HTMLElement
示例代码1
class MyOverlay extends BMap.Overlay {
initialize(map: BMap.Map) {
const div = document.createElement('div');
div.textContent = '自定义覆盖物';
map.getPanes().markerPane.appendChild(div);
return div;
}
draw() {}
}
is
- isVisible(): boolean
判断覆盖物是否可见
返回值 boolean
- #removeEventListener<K extends keyof GroundOverlayEventMap>(
event: K,
handler: (e: GroundOverlayEventMap[K]) => void,
): void移除事件监听函数
参数 类型 说明 eventK事件名称 handler(e: GroundOverlayEventMap[K]) => void事件处理函数 返回值 void
设置图层显示的矩形区域
参数 类型 说明 boundsBounds矩形区域 返回值 void
示例代码1
groundOverlay.setBounds(new BMap.Bounds(
new BMap.Point(116.380, 39.900),
new BMap.Point(116.430, 39.930)
));
设置图层显示的最大缩放级别
参数 类型 说明 levelnumber最大级别 返回值 void
示例代码1
groundOverlay.setDisplayOnMaxLevel(18);
设置图层显示的最小缩放级别
参数 类型 说明 levelnumber最小级别 返回值 void
示例代码1
groundOverlay.setDisplayOnMinLevel(10);
设置图层图片地址
参数 类型 说明 urlstring图片URL bounds可选Bounds可选，同时更新叠加的地理范围 返回值 void
示例代码1
groundOverlay.setImage('https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_9.png');
设置图层透明度
参数 类型 说明 opacitynumber透明度，取值范围0 - 1 返回值 void
示例代码1
groundOverlay.setOpacity(0.5);
show
- show(): void
显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
返回值 void
此类表示地图上的地面叠加层，支持图片、视频和 Canvas 内容