OpenLayers自定义Overlay内容+鼠标悬浮替换图片

OpenLayers V6.14.1 自定义点图标的Overlay内容，并且鼠标悬浮点图标上面时更改样式（替换图片）

<template>
    <div class="home">
        <div id="map" class="map"></div>
        <div id="popup2" style="color: #fff">
            <img src="img/2.jpg" width="50px" height="50px" />
            <span style="position: relative; left: -20px; top: -20px; color: #00ff00">popup自定义内容</span>
        </div>
    </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import XYZ from "ol/source/XYZ.js";
import Overlay from "ol/Overlay.js";
import Icon from "ol/style/Icon.js";
import Style from "ol/style/Style.js";

export default {
    name: "Popup",
    mounted() {
        // 创建地图
        const map = new Map({
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                    }),
                }),
            ],
            target: "map",
            view: new View({
                projection: "EPSG:4326",
                center: [120, 30],
                zoom: 3,
            }),
        });

        // 初始化点图标样式
        let style = new Style({
            image: new Icon({
                src: "img/p1.jpg",
                scale: 0.3,
            }),
        });

        // 创建要素，并添加到地图
        let point2 = new Point([120, 30]);
        let feature2 = new Feature({
            geometry: point2,
        });
        feature2.setStyle(style);
        feature2.setId("2");

        let source2 = new VectorSource({
            features: [feature2],
            projection: "EPSG:4326",
        });
        let layer2 = new VectorLayer({
            source: source2,
            // style: style,
        });
        map.addLayer(layer2);

        // 创建Overlay
        var popup2 = new Overlay({
            positioning: "bottom-left",
            // 图标相对于定位点的像素偏移
            offset: [-25, 5],
            element: document.getElementById("popup2"),
        });
        popup2.setPosition([120, 30]);
        map.addOverlay(popup2);

        // 监测鼠标移动事件，改变点图标的样式（更换图片）
        let selectedFeatureId = -1;
        map.on("pointermove", function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            let feature = map.forEachFeatureAtPixel(
                pixel,
                function (feature) {
                    return feature;
                },
                {
                    hitTolerance: 5,
                }
            );

            console.log(feature);
            if (feature === undefined) {
                map.getTargetElement().style.cursor = "default";
                if (selectedFeatureId != -1) {
                    source2.getFeatureById(selectedFeatureId).setStyle(style);
                    selectedFeatureId = -1;
                }
            } else {
                if (selectedFeatureId != -1) {
                    let fid = feature.getId();
                    if (fid == selectedFeatureId) {
                        return;
                    }
                }
                selectedFeatureId = feature.getId();
                map.getTargetElement().style.cursor = "pointer";
                let ns = new Style({
                    image: new Icon({
                        src: "img/p2.jpg",
                        scale: 0.3,
                    }),
                });
                feature.setStyle(ns);
            }
        });
    },
    methods: {},
};
</script>

<style scoped>
#map {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>