没有match的答案？试试对话大模型
（以“{{jspopularGL-sidebar}} <div class="h1-title">自定义HTML图层</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class...”为内容创建页面） |
|||
| 第1行： | 第1行： | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
| − | <div class="h1-title">自定义HTML图层</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">为了支持更丰富多样的地图覆盖物类型，提供自定义覆盖物图层类 CustomHtmlLayer 和[ | + | <div class="h1-title">自定义HTML图层</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">为了支持更丰富多样的地图覆盖物类型，提供自定义覆盖物图层类 CustomHtmlLayer 和[https://lbsyun.baidu.com/jsdemo.htm#customoverlay-canvas 自定义覆盖物CustomOverlay]，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等。<br/>其中[http://huanhuan.bcc-gzbh.baidu.com:8989/index.php?title=jspopularGL/guide/CustomOverlay 自定义覆盖物CustomOverlay]支持自定义单个覆盖物，自定义覆盖物图层类CustomHtmlLayer是对自定义覆盖物的统一管理，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbs.baidu.com/jsdemo.htm#customlayer-canvas"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbs.baidu.com/jsdemo/demo/customlayer-canvas.htm 自定义canvas图层]</div><div class="demo_btn" style="width:485px;">[https://lbs.baidu.com/jsdemo/demo/customlayer.htm 自定义gif动画]</div></div><div class="jsapi-demo-link">[https://lbs.baidu.com/jsdemo.htm#customlayer-canvas DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>类参考</span></div></div></div><div class="serve-explain-text"> |
（1）构造函数 | （1）构造函数 | ||
| − | </div> | + | </div><div class="customlayDom"> |
| − | <div class = | + | |
{| width="519" border="1" | {| width="519" border="1" | ||
|- | |- | ||
| 第17行： | 第16行： | ||
{| width="519" border="1" | {| width="519" border="1" | ||
|- | |- | ||
| − | | width="90" colspan="2"| '''参数名''' | + | | width="90" colspan="2" | '''参数名''' |
| width="90" | '''类型''' | | width="90" | '''类型''' | ||
| width="297" | '''说明''' | | width="297" | '''说明''' | ||
|- | |- | ||
| colspan="2" | createDom | | colspan="2" | createDom | ||
| − | | function | + | | function |
| 创建自定义DOM函数 | | 创建自定义DOM函数 | ||
|- | |- | ||
| − | | rowspan="7" | options | + | | rowspan="7" | options |
| point | | point | ||
| Point | | Point | ||
| 第48行： | 第47行： | ||
| coordinate | | coordinate | ||
| String | | String | ||
| − | | 坐标系类型 | + | | 坐标系类型 |
| − | |- | + | |- |
| enableDraggingMap | | enableDraggingMap | ||
| Boolean | | Boolean | ||
| − | | 是否可以在覆盖物上拖拽地图 | + | | 是否可以在覆盖物上拖拽地图 |
|} | |} | ||
| − | </div> | + | </div><div style="margin-top: 15px;margin-bottom: 20px;"> |
| − | <div style="margin-top: 15px;margin-bottom: 20px;"> | + | |
（2）方法 | （2）方法 | ||
</div> | </div> | ||
| 第70行： | 第68行： | ||
| 显示自定义覆盖物图层 | | 显示自定义覆盖物图层 | ||
|- | |- | ||
| − | | hide() | + | | hide() |
| | | | ||
| none | | none | ||
| 第76行： | 第74行： | ||
|- | |- | ||
| setData(datas) | | setData(datas) | ||
| − | + | | Object <Feature | FeatureCollection> | |
| none | | none | ||
| 设置自定义覆盖物图层的数据，包含每个元素的点位置以及自定义模板所需的属性。 | | 设置自定义覆盖物图层的数据，包含每个元素的点位置以及自定义模板所需的属性。 | ||
|- | |- | ||
| updateData(newData) | | updateData(newData) | ||
| − | + | | Object<Feature | FeatureCollection> | |
| none | | none | ||
| 更新当前自定义覆盖物图层数据 | | 更新当前自定义覆盖物图层数据 | ||
|- | |- | ||
| removeOverlay(cusItem) | | removeOverlay(cusItem) | ||
| − | | | + | | <CustomOverlay | string> |
| none | | none | ||
| 移除指定的自定义覆盖物或根据cusId移除 | | 移除指定的自定义覆盖物或根据cusId移除 | ||
|- | |- | ||
| removeAllOverlays() | | removeAllOverlays() | ||
| − | + | | none | |
| none | | none | ||
| 删除该图层上所有的覆盖物（不释放图层实例） | | 删除该图层上所有的覆盖物（不释放图层实例） | ||
| − | |- | + | |- |
| removeLayer(layer) | | removeLayer(layer) | ||
| | | | ||
| none | | none | ||
| 删除该图层（会注销释放内存），在Map中调用，不对外 | | 删除该图层（会注销释放内存），在Map中调用，不对外 | ||
| − | |- | + | |- |
| getCustomOverlays() | | getCustomOverlays() | ||
| | | | ||
| − | | Array | + | | Array<CustomOverlay> |
| 获取当前图层所有的自定义覆盖物 | | 获取当前图层所有的自定义覆盖物 | ||
| − | |- | + | |- |
| map.addCustomHtmlLayer(cusLayer) | | map.addCustomHtmlLayer(cusLayer) | ||
| CustomLayer | | CustomLayer | ||
| none | | none | ||
| 在地图上添加自定义覆盖物图层 | | 在地图上添加自定义覆盖物图层 | ||
| − | |- | + | |- |
| map.removeCustomHtmlLayer(cusLayer) | | map.removeCustomHtmlLayer(cusLayer) | ||
| CustomLayer | | CustomLayer | ||
| 第116行： | 第114行： | ||
|} | |} | ||
<div style="margin-top: 15px;margin-bottom: 20px;"> | <div style="margin-top: 15px;margin-bottom: 20px;"> | ||
| − | （3）事件 | + | （3）事件<br/><span style="font-size: 12px;"> 通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：</span> |
| − | <br/> | + | |
| − | <span style="font-size: 12px;"> 通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：</span> | + | |
</div> | </div> | ||
{| width="519" border="1" | {| width="519" border="1" | ||
| 第179行： | 第175行： | ||
<div> | <div> | ||
数据格式： | 数据格式： | ||
| − | </div> | + | </div><pre class="prettyprint codestyle" style="overflow-y: auto;">{ |
| − | <pre class="prettyprint codestyle" style="overflow-y: auto;">{ | + | |
"type": "FeatureCollection", | "type": "FeatureCollection", | ||
"features": [ | "features": [ | ||
2024年1月23日 (二) 18:23的版本
自定义HTML图层
更新时间：2023年02月21日
简介
为了支持更丰富多样的地图覆盖物类型，提供自定义覆盖物图层类 CustomHtmlLayer 和自定义覆盖物CustomOverlay，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等。
其中自定义覆盖物CustomOverlay支持自定义单个覆盖物，自定义覆盖物图层类CustomHtmlLayer是对自定义覆盖物的统一管理，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。
其中自定义覆盖物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"}
}
]
}