fix: 合并custom-html并使用updateData更新节点 避免x6多次remove后add的节点重复bug

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

@@ -2,6 +2,7 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.j
 // import { Message } from "element-ui";
 import Vue from "vue";
 import { lngLatMap } from "./buttonEvent";
+import { upperFirst } from "lodash";
 /**
  * @typedef {Object} Point
  * @property {number} weight - The weight of the item.
@@ -252,26 +253,24 @@ export class MarkerCluster {
       const findIndex = this.data.findIndex(
         (removeData) => removeData === item
       );
-      const { stakeMark } = item.extData;
+      let { stakeMark } = item.extData;
+      stakeMark = upperFirst(stakeMark); //统一格式 大写K
       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();
+            if (lngLatArr.length === 0)
-            // window.graphInstance.removeNode(stakeMark);
+              window.graphInstance.removeNode(existNode.id);
             else {
-              //移除并重新添加
+              //更新节点
-              // window.graphInstance.removeNode(stakeMark);
+              const updateNode = graphInstance.getCellById(stakeMark);
-              console.log("重新ADD", lngLatArr);
+              updateNode.updateData(getDataConf(lngLatArr, item.extData));
-              // addInGraphHandle(lngLatArr);
             }
-          } //else window.graphInstance.removeNode(stakeMark);
+          } else window.graphInstance.removeNode(stakeMark);
         }
       }
       if (findIndex > -1) this.data.splice(findIndex, 1);
@@ -373,11 +372,11 @@ export function marksAddInGraph(data) {
 
 export function addInGraphHandle(data) {
   const graphInstance = window.graphInstance;
-  const nowBg = getState(data) ? normalBg : faultBg;
   const extData = data[0].extData;
   const { item: eventItem } = data[0].config;
   if (eventItem.id.match("./事件专题")) {
     let { stakeMark, lang } = extData;
+    stakeMark = upperFirst(stakeMark); //统一格式 大写K
     const distance =
       (Number(
         stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")
@@ -386,42 +385,50 @@ export function addInGraphHandle(data) {
         window.canvasRatio +
       window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺
 
-    const node = {};
+    const node = { shape: "custom-html", effect: ["data"] };
-    if (data.length === 1) {
+    node.data = getDataConf(data, extData);
-      node.shape = "singleNode-html";
-      node.data = {
-        nowBg,
-        src: `${getIcon(data[0])}`,
-        extData,
-      };
-    } else {
-      node.shape = "multiNode-html";
-      node.data = {
-        nowBg,
-        // width: `${36 + `${data.length}`.length * 15}px`,
-        length: data.length,
-        extData,
-      };
-    }
     const existNode = graphInstance.getCellById(stakeMark);
     if (existNode) {
-      graphInstance.removeCell(existNode.id);
+      existNode.updateData(node.data);
+    } else {
+      // setTimeout(() => {
+      graphInstance.addNode({
+        x: distance,
+        y: 60,
+        width: 20,
+        height: 20,
+        ...node,
+        zIndex: 1,
+        id: stakeMark,
+      });
+      // }, 0);
     }
     console.log(lang, "lang");
-    // setTimeout(() => {
-    graphInstance.addNode({
-      x: distance,
-      y: 60,
-      width: 20,
-      height: 20,
-      ...node,
-      zIndex: 1,
-      id: stakeMark,
-    });
-    // }, 0);
   }
 }
 
+function getDataConf(data, extData) {
+  let dataConf;
+  const nowBg = getState(data) ? normalBg : faultBg;
+  if (data.length === 1) {
+    dataConf = {
+      shape: "singleNode-html",
+      nowBg,
+      src: `${getIcon(data[0])}`,
+      extData,
+    };
+  } else {
+    dataConf = {
+      shape: "multiNode-html",
+      nowBg,
+      // width: `${36 + `${data.length}`.length * 15}px`,
+      length: data.length,
+      extData,
+    };
+  }
+  return dataConf;
+}
+
 export function getLatAndLng(lnglat) {
   if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
   else return lnglat;

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

@@ -11,13 +11,13 @@ import { actualLocationList, canvasList } from "./data.js";
 
 
 const mouseenterDebounceFunc = debounce(({ node }) => {
-  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+  if (["custom-html"].indexOf(node.shape) >= 0) {
     node.setZIndex(100);
     console.log(node);
   }
 }, 0);
 const mouseleaveDebounceFunc = debounce(({ node }) => {
-  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+  if (["custom-html"].indexOf(node.shape) >= 0) {
     node.setZIndex(1);
   }
 }, 0);
@@ -25,7 +25,7 @@ const mouseleaveDebounceFunc = debounce(({ node }) => {
 
 const clickDebounceFunc = debounce(({ node }) => {
   const mapIns = Vue.prototype.mapIns;
-  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+  if (["custom-html"].indexOf(node.shape) >= 0) {
     const extData = node.getData()?.extData;
     if (extData) {
       mapIns.setZoomAndCenter(18, [extData.longitude, extData.latitude]);
@@ -188,16 +188,18 @@ export default {
       graph.on('node:click', clickDebounceFunc);
 
       Shape.HTML.register({
-        shape: 'singleNode-html',
+        shape: 'custom-html',
         width: 160,
         height: 80,
         html(node) {
           const data = node.getData();
+          const { shape, nowBg, src, length } = data;
           const { height, width } = node.prop().size;
           const div = document.createElement('div')
-          div.innerHTML = `
+          if (shape === "singleNode-html") {
+            div.innerHTML = `
             <div style="
-              background-image: url(${data.nowBg});
+              background-image: url(${nowBg});
               background-size: 100% 100%;
               background-repeat: no-repeat;
               width: ${width * 1.2}px;
@@ -209,24 +211,14 @@ export default {
               width: ${width * 0.8}px;
                   height: ${height * 0.8}px;
                   margin-top: ${height * 0.1}px;
-                " src='${data.src}'
+                " src='${src}'
               >
             </div>
           `;
-          return div
+          } else if (shape === "multiNode-html") {
-        },
+            div.innerHTML = `
-      })
-      Shape.HTML.register({
-        shape: 'multiNode-html',
-        width: 160,
-        height: 80,
-        html(node) {
-          const data = node.getData();
-          const { height, width } = node.prop().size;
-          const div = document.createElement('div')
-          div.innerHTML = `
             <div style="
-              background-image: url(${data.nowBg});
+              background-image: url(${nowBg});
               background-size: 100% 100%;
               background-repeat: no-repeat;
               display: flex;
@@ -234,12 +226,14 @@ export default {
               align-items: center;
               padding-bottom: ${height * 0.1}px;
             ">
-              ${data.length}
+              ${length}
             </div>
         `;
+          }
           return div
         },
       })
+
       window.graphInstance = graph;
       graph.addNodes(baseData.nodes);