fix：图例设置联调，线段增加弹窗展示数据

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-12 09:21:59
+ * @LastEditTime: 2024-12-18 09:46:30
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -10,6 +10,10 @@
 <template>
   <div class="map-container">
     <div ref="container" :id="`map-${mapId}`"></div>
+    <!-- 地图弹窗 -->
+    <div ref="mapPopup" class="ol-popup">
+      <div ref="popupContent"></div>
+    </div>
     <div ref="mapController" :style="controlStyle" class="control-container">
       <!-- 绘制线段 -->
       <div class="draw-line" v-if="showLine">
@@ -55,6 +59,8 @@ import { Vector as VectorSource } from "ol/source";
 import { Draw, Modify, Select, Snap } from "ol/interaction";
 import * as styleExports from "ol/style";
 import { Polygon, LineString } from "ol/geom";
+import Overlay from "ol/Overlay";
+import { throttle } from "lodash";
 
 export default {
   name: "FssmMap",
@@ -149,6 +155,8 @@ export default {
       drawLineMarkers: [],
       // 绘制线段图层layer
       drawLineLayer: null,
+      // 绘制弹窗图层
+      overlayDialog: null,
     };
   },
   watch: {
@@ -304,6 +312,15 @@ export default {
         }),
         visible: false,
       });
+      // 弹窗图层
+      const overlays = new Overlay({
+        element: this.$refs.mapPopup,
+        autoPan: {
+          animation: {
+            duration: 250,
+          },
+        },
+      });
       const map = new Map({
         target: `map-${this.mapId}`,
         controls: defaultControls({
@@ -311,6 +328,8 @@ export default {
           attribution: false,
           rotate: false,
         }),
+        // 弹窗图层数组
+        overlays: [overlays],
         view: new View({
           center: this.centerPoint, //中心点经纬度
           zoom: this.zoom, //图层缩放大小
@@ -352,25 +371,43 @@ export default {
         }
       });
       // 鼠标移入事件
-      // map.on("pointermove", (e) => {
-      //   const feature = map.forEachFeatureAtPixel(
-      //     map.getEventPixel(e.originalEvent),
-      //     (mapFeature) => {
-      //       return mapFeature;
-      //     }
-      //   );
-      //   // 线、面要素不做鼠标移入样式修改
-      //   if (feature) {
-      //     if (feature.getGeometry()?.getType() === "Point") {
-      //       map.getTargetElement().style.cursor = "pointer";
-      //       this.$emit("pointer-move", feature);
-      //     } else {
-      //       map.getTargetElement().style.cursor = "auto";
-      //     }
-      //   } else {
-      //     map.getTargetElement().style.cursor = "auto";
-      //   }
-      // });
+      map.on("pointermove", (e) => {
+        const feature = map.forEachFeatureAtPixel(
+          map.getEventPixel(e.originalEvent),
+          (mapFeature) => {
+            return mapFeature;
+          }
+        );
+        // 获取弹窗图层
+        const [dislogLay] = map.getOverlays().getArray();
+        // 打印或处理经纬度
+        // this.$emit("pointer-move", { feature, coordinate });
+        if (feature && feature.getGeometry().getType() === "LineString") {
+          // 获取鼠标当前位置的像素坐标
+          const pixel = e.pixel;
+          // 将像素坐标转换为地理坐标（经纬度）
+          const coordinate = map.getCoordinateFromPixel(pixel);
+          // 获取弹窗数据
+          const popupData = feature.get("data");
+          // 获取弹窗内元素并赋值
+          this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData}</span><br/><span>起始桩号：</span><span>${popupData}</span><br/><span>终止桩号：</span><span>${popupData}</span>`;
+          dislogLay.setPosition(coordinate);
+        } else {
+          dislogLay.setPosition(undefined);
+        }
+        // 线、面要素不做鼠标移入样式修改
+        // if (feature) {
+        //   if (feature.getGeometry()?.getType() === "Point") {
+        //     map.getTargetElement().style.cursor = "pointer";
+        //     this.$emit("pointer-move", feature);
+        //   } else {
+        //     map.getTargetElement().style.cursor = "auto";
+        //   }
+        // } else {
+        //   map.getTargetElement().style.cursor = "auto";
+        // }
+      });
+
       // 地图缩放级别事件
       map.on("moveend", (e) => {
         const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
@@ -787,6 +824,18 @@ export default {
     width: 100%;
     height: 100%;
   }
+
+  // 地图弹窗样式
+  .ol-popup > div {
+    padding: 0.5rem;
+    box-sizing: border-box;
+    background: rgba(79, 79, 79, 0.7);
+    border-radius: 0.2rem;
+    border: 1px solid #3976f1;
+    font-size: 0.7rem;
+    color: #ffffff;
+  }
+
   // 放大缩小控件
   .control-container {
     display: flex;