jspopularGL

自定义HTML图层

更新时间：2023年02月21日

简介

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

自定义canvas图层

自定义gif动画

DEMO详情

类参考

（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"}
        }
    ]
  }

文档全面上新