浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

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

(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"}
        }
    ]
  }
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消