vue2+OpenLayers 天地图上打点并且显示相关的信息（2）

上次是在地图上打点 这次鼠标移动在图标上面显示相关的信息
首先有两个事件 鼠标移入 和 鼠标移出事件
pointermove pointerout

鼠标放上去之前

放上去后

代码如下

<template>
  <div class="container">
    <div id="vue-openlayers" class="map-x"></div>
    <div
      id="info-box"
      class="info-box"
      style="width: 100px; height: 100px"
    ></div>
    <div id="canv" style="width: 100px; height: 100px"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import s40s from "@/assets/img/404.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";

export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
      draw: null,
      maskLayer: null,
      logo,s40s,
      layers: [],
    };
  },
  methods: {
    initMap() {
      let that = this;
      // 将图标样式应用到点要素
      const features = [];
      const point = new Point([108.56, 34.15]); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        custom: { data: "123", type: "icon" },
        type: "icon",
      });
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: this.logo,
            // size: [40, 40],
            scale: 0.2, // 图标缩放比例
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const source = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: source,
      });

      let map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",
            }),
          }),
          markLayerPoints, // 确保图层顺序正确
          // vectorLayers,
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [108.56, 34.15], // 修改中心坐标格式
          zoom: 6,
        }),
      });

      this.map = map;

      // 定义变量来跟踪是否鼠标悬停在图标上
      var infoBox = document.getElementById("info-box");
      let pointFeatures;
      var iconStyleDefault = new Style({
        image: new Icon({
          src: this.logo, // 图标图片的路径
          crossOrigin: "anonymous",
          scale: 0.2, // 图标缩放比例
        }),
      });
      map.on("pointermove", function (event) {
        if (pointFeatures) {
          infoBox.style.display = "none"; // 隐藏信息盒子
          pointFeatures.setStyle(iconStyleDefault);
        }
      map.forEachFeatureAtPixel(event.pixel, function (feature) {
          console.log("进入11111111111111111111");
          // 这里 feature 就是当前悬停的要素
          if (feature.values_.type == "icon") {
            var coord = feature.getGeometry().getCoordinates(); //地理坐标，也就是经纬度
            var pixel = map.getPixelFromCoordinate(coord); //像素是屏幕上的位置   像素坐标
            pointFeatures = feature; // 当前的图层
            // 设置文本样式，显示在图标旁边
            var textStyle = new Text({
              text: "文本", // 要显示的文本
              font: "14px sans-serif", // 字体样式
              fill: new Fill({
                color: "black", // 文本颜色
              }),
              stroke: new Stroke({
                color: "white", // 文本轮廓颜色，使文本更突出
                width: 2,
              }),
              // 将文本底部对齐到点的坐标位置
              textBaseline: "bottom",
              // 根据需要调整文本的水平对齐方式，'center' 表示文本居中对齐
              textAlign: "center",
            });
            var iconStyleHover1 = new Style({
              image: new Icon({
                src: that.s40s, // 图标图片的路径
                crossOrigin: "anonymous",
                // anchor: [0.5, 46], // 图标锚点，相对于图标大小的百分比
                scale: 0.2, // 图标缩放比例
                textBaseline: "top",
              }),
              text: textStyle,
            });
            pointFeatures.setStyle(iconStyleHover1);

            console.log(infoBox, "infoBoxinfoBox");
            infoBox.style.display = "block"; // 显示信息盒子
            infoBox.style.left = pixel[0] + 10 + "px"; // 设置信息盒子位置
            infoBox.style.top = pixel[1] - 5 - infoBox.offsetHeight + "px"; // 防止信息盒子被图标遮挡
            infoBox.innerHTML = "这里是信息+" + feature.values_.custom.data; // 设置信息盒子内容'; // 设置信息盒子内容
          }
        });
      });
      // 添加鼠标离开图层监听器
      markLayerPoints.on("pointerout", function (event) {
        if (pointFeatures) {
          pointFeatures.setStyle(iconStyleDefault);
          pointFeatures = null;
          infoBox.style.display = "none"; // 隐藏信息盒子
        }
      });
      
    },
},
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped lang="scss">
.input {
  position: fixed;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 5px;
  padding-bottom: 10px;

  > * {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
}
</style>

<style scoped lang="scss">
.container {
  position: relative;

  .btn {
    position: absolute;
    left: 4%;
    top: 1%;
  }
}

#vue-openlayers {
  width: 100vw;
  height: 100vh;
}

h3 {
  line-height: 40px;
}

/* 隐藏信息盒子的初始样式 */
#info-box {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid black;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>