自定义覆盖物

更新时间：2023年02月21日

简介

为了支持更丰富多彩的地图覆盖物类型，提供自定义覆盖物类 CustomOverlay，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等
该自定义覆盖物一次只能创建一个覆盖物，如果想要批量创建同类型的覆盖物，可以移步自定义Html覆盖物图层类CustomHtmlLayer，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。

自定义canvas覆盖物

自定义DOM覆盖物

DEMO详情

类参考

（1）构造函数

名称	说明
CustomOverlay(createDom, options: Object)	创建单个自定义DOM覆盖物

参数说明：

参数名		类型	说明
createDom		HTMLElement	用户自定义创建DOM函数
options	point	Point	覆盖物的经纬度，必填
	offsetX	Number	覆盖物水平偏移量
	offsetY	Number	覆盖物垂直偏移量
	MinZoom	Number	最小显示层级
	MaxZoom	Number	最大显示层级
	properties	Object	自绑定属性
	enableMassClear	Boolean	是否能被统一清除掉覆盖物
	enableDraggingMap	Boolean	是否可以在覆盖物位置拖拽地图

（2）方法

方法名	参数	返回值	说明
show()	none	none	显示自定义覆盖物
hide()	none	none	隐藏自定义覆盖物
setPoint	point	none	设置覆盖物新坐标
getPoint	none	point	获取自定义覆盖物坐标
setProperties	object	none	设置覆盖物属性，与初始化的属性增量修改或合并
getProperties	none	object	获取自定义覆盖物的属性

（3）事件
  通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：  

事件名	说明
click	鼠标点击事件
mouseover	鼠标悬浮事件
mouseout	鼠标移出事件

图层示例

// 创建自定义覆盖物DOM
function createDOM(feature) {
    const img = document.createElement('img');
    img.style.height = '240px';
    img.style.width = '80px';
    img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
    img.draggable = false;
    return img;
}
  
// 创建自定义覆盖物
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
    point: new BMapGL.Point(116.40342230333138, 39.92498414216742),
    opacity: 0.5,
    map: map,
    offsetY: -10,
    properties: {
        title: 'this is a title',
        size: '100'
    }
});
  
// 将自定义覆盖物添加到地图上
map.addOverlay(customOverlay);
  
// 绑定鼠标事件
customOverlay.addEventListener('click', function (e) {
    console.log('eeee', e);
});