fix 修复缩略图 bug

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

@@ -9,7 +9,7 @@ import { EventTopics } from "@screen/utils/enum.js";
 import { debounce, cloneDeep } from "lodash";
 import Vue from "vue";
 
-import { markerClusterIns, getContent } from "./map";
+import { markerClusterIns, getContent, getLatAndLng } from "./map";
 const cameraIcon = {
   // 球机
   "00": require("@screen/images/deviceType/ball_active.svg"),
@@ -273,11 +273,7 @@ function lngLatMapHandle(markers, cb) {
   markers.forEach((markerData) => {
     const lnglat = markerData.lnglat;
     if (lnglat) {
-      const getLatAndLng = () => {
+      const { lat, lng } = getLatAndLng(lnglat);
-        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);
     }

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

@@ -67,7 +67,6 @@ export class MarkerCluster {
       "font-size:15px; background:#641f14; color:#a86358;",
       data
     );
-    console.log();
     this.markerCluster.addData(data);
     console.log(
       "%c [ this.markerCluster ]-234-「map.js」",
@@ -254,8 +253,27 @@ export class MarkerCluster {
         (removeData) => removeData === item
       );
       const { stakeMark } = item.extData;
-      window.graphInstance.removeNode(stakeMark);
+      const existNode = graphInstance.getCellById(stakeMark);
-
+      const lnglat = item.lnglat;
+      if (lnglat) {
+        const { lat, lng } = getLatAndLng(lnglat);
+        const lngLatStr = `${lng}/${lat}`;
+        const lngLatArr = lngLatMap[lngLatStr]; //已是移除后的数据集
+        console.log(lngLatArr, lngLatArr?.length, "length");
+        if (existNode) {
+          window.graphInstance.removeNode(existNode.id);
+          if (lngLatArr) {
+            if (lngLatArr.length === 0) console.log();
+            // window.graphInstance.removeNode(stakeMark);
+            else {
+              //移除并重新添加
+              // window.graphInstance.removeNode(stakeMark);
+              console.log("重新ADD", lngLatArr);
+              // addInGraphHandle(lngLatArr);
+            }
+          } //else window.graphInstance.removeNode(stakeMark);
+        }
+      }
       if (findIndex > -1) this.data.splice(findIndex, 1);
     });
 
@@ -345,11 +363,7 @@ export function marksAddInGraph(data) {
   for (let markerData of data || []) {
     const lnglat = markerData.lnglat;
     if (lnglat) {
-      const getLatAndLng = () => {
+      const { lat, lng } = getLatAndLng(lnglat);
-        if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
-        else return lnglat;
-      };
-      const { lat, lng } = getLatAndLng();
       const lngLatStr = `${lng}/${lat}`;
       const data = lngLatMap[lngLatStr];
       addInGraphHandle(data);
@@ -370,7 +384,7 @@ export function addInGraphHandle(data) {
       ) -
         54.394) *
         window.canvasRatio +
-      window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
+      window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺
 
     const node = {};
     if (data.length === 1) {
@@ -408,4 +422,9 @@ export function addInGraphHandle(data) {
   }
 }
 
+export function getLatAndLng(lnglat) {
+  if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
+  else return lnglat;
+}
+
 export const markerClusterIns = new MarkerCluster();

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

@@ -248,6 +248,7 @@ export default {
       const ratio = ((width - width * 0.08 * 2) / allActualDis); //减去俩侧空白区域 才是画布要计算的比例
       window.canvasRatio = ratio;
       window.canvasWidth = width;
+      window.offsetRatio = 0.0755;
 
       this.list.forEach(item => this.allInstance += item.distance);
       for (let index in this.list) {
@@ -256,17 +257,17 @@ export default {
         await this.drawTag(info, graph);
       }
       //文字覆盖问题修复
-      graph.getCellById("K79+010").translate(-10, 0)
+      graph.getCellById("K79+010_底部文字").translate(-10, 0)
-      graph.getCellById("K83+885").translate(-10, 0);
+      graph.getCellById("K83+885_底部文字").translate(-10, 0);
-      graph.getCellById("K86+499").translate(10, 0);
+      graph.getCellById("K86+499_底部文字").translate(10, 0);
 
-      graph.getCellById("K114+405").translate(-10, 0);
+      graph.getCellById("K114+405_底部文字").translate(-10, 0);
-      graph.getCellById("K117+878").translate(10, 0);
+      graph.getCellById("K117+878_底部文字").translate(10, 0);
 
-      graph.getCellById("K159+156").translate(8, 0);
+      graph.getCellById("K159+156_底部文字").translate(8, 0);
 
-      graph.getCellById("K155+652").translate(-10, 0);
+      graph.getCellById("K155+652_底部文字").translate(-10, 0);
-      graph.getCellById("K190+495").translate(10, 0);
+      graph.getCellById("K190+495_底部文字").translate(10, 0);
 
     },
     async drayLine(text, graph, isFoot = false) {
@@ -333,14 +334,14 @@ export default {
       });
       imageNode.translate(width * 0.07, 0);
 
-      for (var i = 0; i < info.name.length; i++) {
+      for (var i = 0; i < info.name.length; i++) { //
         const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } });
-        imageLabelNode.translate(width * 0.0755, 50 + y);
+        imageLabelNode.translate(width * window.offsetRatio, 50 + y);
       }
 
       // 修改文字位置
-      const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code });
+      const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" });
-      buttomLabelNode.translate(width * 0.0755, 0);
+      buttomLabelNode.translate(width * window.offsetRatio, 0);
 
     },
     loadImage(url) {