使用定义:overlay放置创建的dom,通过setPosition定位
1.overlay放置单个图片(png、iconfont)
//添加overlay
static addOverlay(divMapId) {
// 添加一个用于显示鼠标跟随效果的 Overlay (png样式)
// let mouseDom=document.createElement("div")
// mouseDom.style.width = '32px'; // 设置图标宽度
// mouseDom.style.height = '32px'; // 设置图标高度
// mouseDom.style.backgroundImage = `url("http://211.157.132.19:48095/shanxidemo/qing/1.png")`; //只能使用绝对路径
// mouseDom.style.backgroundSize = '100% 100%'; // 设置背景图片填充方式,这里是填充整个 div
// mouseDom.style.backgroundPosition = 'center'; // 可选:使背景图片居中显示
// 添加一个用于显示鼠标跟随效果的 Overlay (iconfont)
let mouseDom = document.createElement("i");
mouseDom.className = "el-icon-position";
mouseDom.style.transform = "rotate(270deg)"
mouseDom.style.fontSize = '24px';
mouseDom.style.color = '#ffffff'; // 设置图标颜色,可以根据需要自行调整
mouseDom.id = divMapId + '_overlay';
const overlay = new Overlay({
id: divMapId + "_overlay", //可通过map.getOverlayById获取
element: mouseDom,
positioning: null
});
window[divMapId + "_map"].addOverlay(overlay);
}
2. overlay:通过innerHtml直接添加html
let divElement = document.createElement('div');
divElement.id = 'overlay_' + item["seq"];
divElement.style.padding = '10px';
divElement.style.backgroundColor = '#3b70ec';
divElement.style.borderRadius = '6px';
divElement.style.color = '#ffffff';
divElement.style.position = 'absolute';
divElement.style.fontSize = '14px';
divElement.style.fontFamily = 'pingfang-xi';
divElement.style.top = '-113px';
divElement.style.left = '-100px';
divElement.style.width = 'max-content';
divElement.innerHTML = `<strong>值1:</strong> ${item.valueImport}
<br><strong>值2:</strong> ${item.value}
<br><span>[经度:${item.lon} 纬度:${item.lat}]</span>`;
let overlay = new Overlay({
position: [item.lon, item.lat],
element: divElement
})
this.map.addOverlay(overlay)
this.overlayPoint.push(overlay)
3.overlay:通过appendChild动态构建dom(表格)
static addTableOverlay(){
let infoList=[
{
name:"boy",
age:"12"
},
{
name:"girl",
age:"10"
},
]
let table=document.createElement("table")
table.style.backgroundColor = "#2f5886";
table.style.color = "white"; // 添加颜色,以便在深色背景下看得清楚
table.style.borderCollapse = "collapse"; // 确保边框合并
infoList.forEach(info=>{
let tr=document.createElement("tr")
Object.values(info).forEach(val=>{
let td=document.createElement("td")
td.innerHTML=val
td.style.border = "1px solid #ffffff"; // 添加单元格边框
td.style.width="50px"
td.style.textAlign="center"
td.style.padding="4px 0px"
tr.appendChild(td)
})
table.appendChild(tr)
})
let overlay=new Overlay({
id:"tableOverlay",
element:table,
position: [115.23,39.38]
})
this.map.addOverlay(overlay)
}
二、应用
2.1 多屏联动鼠标+鼠标移动监听
2.2 同时显示多个overlay