为了支持更丰富多样的地图覆盖物类型,提供自定义覆盖物图层类 CustomHtmlLayer 和自定义覆盖物CustomOverlay,支持开发者自定义DOM覆盖物叠加到地图上,比如实现自定义的Canvas、SVG、DOM元素,常用于叠加自定义的表格、图片、文字、GIF动画、视频等。
其中自定义覆盖物CustomOverlay支持自定义单个覆盖物,自定义覆盖物图层类CustomHtmlLayer是对自定义覆盖物的统一管理,支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。
(1)构造函数
参数说明:
(2)方法
(3)事件
通过addEventListener(event, callback)方法进行事件绑定,支持如下事件:
// 创建自定义覆盖物DOMfunction 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"}}]}
上一篇
下一篇
本篇文章对您是否有帮助?