feat 优化 lngLatMap 提取出来 canvas+Map公用

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -7,8 +7,10 @@ import { delay } from "@screen/utils/common";
 import { Message } from "element-ui";
 import { EventTopics } from "@screen/utils/enum.js";
 import { debounce } from "lodash";
+import Vue from "vue";
 
 import { markerClusterIns } from "./map";
+const canvasCtx = Vue.prototype.canvasCtx;
 
 const cameraIcon = {
   // 球机
@@ -75,6 +77,7 @@ export const DeviceForMap = {
   },
 };
 
+export const lngLatMap = {}; //优化  缩略图 + 地图 复用lngLatmap
 export function getHandleDeviceType(item) {
   if (DeviceForMap[item.title]) return "地图路测设备/map";
   if (EventTopics[item.title]) return "地图事件专题/map";
@@ -153,11 +156,13 @@ export const eventMap = {
       "font-size:15px; background:#83c806; color:#c7ff4a;",
       removeData
     );
-
+    addDataPreHandle(removeData);
     markerClusterIns.addData(removeData);
 
-    cacheRemoveFunc[`地图路测设备/${item.title}`] = () =>
+    cacheRemoveFunc[`地图路测设备/${item.title}`] = () => {
+      removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
+    };
   },
   "地图路测设备/map_close"(item) {
     cacheRemoveFunc[`地图路测设备/${item.title}`]?.();
@@ -204,11 +209,13 @@ export const eventMap = {
         isDefault
       )
     );
-
+    addDataPreHandle(removeData);
     markerClusterIns.addData(removeData);
 
-    cacheRemoveFunc[`地图事件专题/${item.title}`] = () =>
+    cacheRemoveFunc[`地图事件专题/${item.title}`] = () => {
+      removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
+    };
   },
   "地图事件专题/map_close"(item) {
     cacheRemoveFunc[`地图事件专题/${item.title}`]?.();
@@ -249,15 +256,57 @@ export const eventMap = {
     let removeData = data.map((item) =>
       resolveDataOptions.call(this, item, options, "PerceiveEvent", isDefault)
     );
-
+    addDataPreHandle(removeData);
     markerClusterIns.addData(removeData);
 
     loadingMessage?.close();
 
-    cacheRemoveFunc[`事件专题/${item.title}`] = () =>
+    cacheRemoveFunc[`事件专题/${item.title}`] = () => {
+      removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
+    };
   },
   "事件专题/感知事件_close"(item) {
     cacheRemoveFunc[`事件专题/${item.title}`]?.();
   },
 };
+
+function lngLatMapHandle(markers, cb) {
+  markers.forEach((markerData) => {
+    const lnglat = markerData.lnglat;
+    if (lnglat) {
+      const getLatAndLng = () => {
+        if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
+        else return lnglat;
+      };
+      const { lat, lng } = getLatAndLng();
+      const lngLatStr = `${lng}/${lat}`;
+      cb(lngLatStr, markerData);
+    }
+  });
+}
+
+function addDataPreHandle(markers) {
+  const cb = (lngLatStr, markerData) => {
+    if (lngLatMap[lngLatStr])
+      !lngLatMap[lngLatStr].includes(markerData) &&
+        lngLatMap[lngLatStr].push(markerData);
+    else lngLatMap[lngLatStr] = [markerData];
+  };
+  lngLatMapHandle(markers, cb);
+}
+
+function removeDataPreHandle(markers) {
+  const cb = (lngLatStr, markerData) => {
+    if (lngLatMap[lngLatStr]) {
+      if (lngLatMap[lngLatStr].length < 2) delete lngLatMap[lngLatStr];
+      else {
+        const findIndex = lngLatMap[lngLatStr].findIndex(
+          (removeData) => removeData === markerData
+        );
+        lngLatMap[lngLatStr].splice(findIndex, 1);
+      }
+    }
+  };
+  lngLatMapHandle(markers, cb);
+}

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -1,6 +1,7 @@
 import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.js";
 // import { Message } from "element-ui";
 import Vue from "vue";
+import { lngLatMap } from "./buttonEvent";
 /**
  * @typedef {Object} Point
  * @property {number} weight - The weight of the item.
@@ -32,8 +33,6 @@ export class MarkerCluster {
   markerCluster;
   infoWindow;
 
-  lngLatMap = {};
-
   data = [];
 
   constructor() {}
@@ -74,7 +73,7 @@ export class MarkerCluster {
     map.setZoom(10);
 
     setTimeout(() => {
-      map.setFitView([...this.markerCluster.U], false, [0, 0, 0, 0], 10);
+      map.setFitView([...this.markerCluster.U], false, [0, 0, 0, 0], 10); //自适应. 覆盖物数组, 动画过渡到指定位置, 周围边距，上、下、左、右,  最大 zoom 级别
     }, 150);
   }
 
@@ -268,19 +267,14 @@ export class MarkerCluster {
         context.marker.setContent(div);
       },
       renderMarker: (context) => {
+        const markerData = context.data[0];
         const {
           extData,
           lnglat: { lat, lng },
-        } = context.data[0];
-
+        } = markerData;
         const lngLatStr = `${lng}/${lat}`;
 
-        if (this.lngLatMap[lngLatStr])
-          !this.lngLatMap[lngLatStr].includes(context.data[0]) &&
-            this.lngLatMap[lngLatStr].push(context.data[0]);
-        else this.lngLatMap[lngLatStr] = [context.data[0]];
-
-        context.marker.setContent(this.getContent(this.lngLatMap[lngLatStr]));
+        context.marker.setContent(this.getContent(lngLatMap[lngLatStr]));
 
         context.marker.setAnchor("bottom-center");
 
@@ -292,7 +286,7 @@ export class MarkerCluster {
         context.marker.on("click", (e) => {
           hasClick = true;
 
-          const data = this.lngLatMap[lngLatStr];
+          const data = lngLatMap[lngLatStr];
           if (data.length > 1) {
             this.showInfoWindow(data);
             return;
@@ -325,19 +319,6 @@ export class MarkerCluster {
         (removeData) => removeData === item
       );
 
-      const lngLatStr = `${item.lnglat.lng}/${item.lnglat.lat}`;
-
-      if (this.lngLatMap[lngLatStr]) {
-        if (this.lngLatMap[lngLatStr].length < 2)
-          delete this.lngLatMap[lngLatStr];
-        else {
-          const findIndex = this.lngLatMap[lngLatStr].findIndex(
-            (removeData) => removeData === item
-          );
-          this.lngLatMap[lngLatStr].splice(findIndex, 1);
-        }
-      }
-
       if (findIndex > -1) this.data.splice(findIndex, 1);
     });
 

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue

@@ -5,6 +5,7 @@
 <script>
 import { getScaleByActualData } from "./utils"
 import { onceObserver } from "@screen/utils/resizeObserver";
+import Vue from "vue";
 
 function setFont(size, bold = "normal", family = "微软雅黑") {
   return `${bold} ${size}px ${family}`;
@@ -41,6 +42,7 @@ export default {
       content.appendChild(canvas);
 
       const ctx = canvas.getContext("2d");
+      Vue.prototype.canvasCtx = ctx;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       var imgbg = await this.loadImage(require("./images/bg.png"));