AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:37
自定义HTML图层
简介

为了支持更丰富多样的地图覆盖物类型,提供自定义覆盖物图层类 CustomHtmlLayer 和自定义覆盖物CustomOverlay,支持开发者自定义DOM覆盖物叠加到地图上,比如实现自定义的Canvas、SVG、DOM元素,常用于叠加自定义的表格、图片、文字、GIF动画、视频等。
其中自定义覆盖物CustomOverlay支持自定义单个覆盖物,自定义覆盖物图层类CustomHtmlLayer是对自定义覆盖物的统一管理,支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。

DEMO详情
自定义canvas图层
自定义gif动画
类参考

(1)构造函数

名称说明

CustomHtmlLayer(createDOM, options)

创建自定义html图层,统一承载管理多个自定义覆盖物

参数说明:

参数名类型说明

createDOM

function

创建自定义DOM函数

options

point

Point

覆盖物的经纬度,必填

offsetX

Number

覆盖物水平偏移量

offsetY

Number

覆盖物垂直偏移量

MinZoom

Number

最小显示层级

MaxZoom

Number

最大显示层级

coordinate

String

坐标系类型

enableDraggingMap

Boolean

是否可以在覆盖物上拖拽地图

(2)方法

方法名参数返回值说明

show()

none

显示自定义覆盖物图层

hide()

none

隐藏自定义覆盖物图层

setData(datas)

Object <Feature | FeatureCollection>

none

设置自定义覆盖物图层的数据,包含每个元素的点位置以及自定义模板所需的属性。

updateData(newData)

Object<Feature | FeatureCollection>

none

更新当前自定义覆盖物图层数据

removeOverlay(cusItem)

<CustomOverlay | string>

none

移除指定的自定义覆盖物或根据cusId移除

removeAllOverlays()

none

none

删除该图层上所有的覆盖物(不释放图层实例)

removeLayer(layer)

none

删除该图层(会注销释放内存),在Map中调用,不对外

getCustomOverlays()

Array<CustomOverlay>

获取当前图层所有的自定义覆盖物

map.addCustomHtmlLayer(cusLayer)

CustomLayer

none

在地图上添加自定义覆盖物图层

map.removeCustomHtmlLayer(cusLayer)

CustomLayer

none

在地图上移除自定义覆盖物图层

(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 cusLayer = new BMapGL.CustomHtmlLayer(createDOM, {
offsetX: 0,
offsetY: 0,
minZoom: 5,
maxZoom: 17,
enablePick: true,
});
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [116.27882, 39.71164],
},
properties: { prop0: 'value0' },
},
],
};
// 设置图层数据
cusLayer.setData(data);
// 将自定义html图层添加到地图上
map.addCustomHtmlLayer(cusLayer);
// 覆盖物绑定点击事件
cusLayer.addEventListener('click', function (e) {
console.log('e:', e);
});

数据格式:

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
116.27882,
39.71164
]
},
"properties": {
"prop0": "value0"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
116.28882,
39.72164
]
},
"properties": {
"prop0": "value0"
}
}
]
}

上一篇

面图层

下一篇

交通流量图层

本篇文章对您是否有帮助?