openlayers：overlay的使用

使用定义：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