feat canvas标注增加

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

@@ -10,8 +10,6 @@ import { debounce } from "lodash";
 import Vue from "vue";
 
 import { markerClusterIns, getContent } from "./map";
-const graphInstance = Vue.prototype.graphInstance;
-
 const cameraIcon = {
   // 球机
   "00": require("@screen/images/deviceType/ball_active.svg"),
@@ -287,19 +285,11 @@ function lngLatMapHandle(markers, cb) {
 }
 
 function addDataPreHandle(markers) {
-  // console.log(markers, graphInstance, "addData");
-
   const cb = (lngLatStr, markerData) => {
     if (lngLatMap[lngLatStr])
       !lngLatMap[lngLatStr].includes(markerData) &&
         lngLatMap[lngLatStr].push(markerData);
     else lngLatMap[lngLatStr] = [markerData];
-    // console.log(
-    //   getContent(lngLatMap[lngLatStr]),
-    //   lngLatMap[lngLatStr],
-    //   lngLatStr,
-    //   "marker div"
-    // );
   };
   lngLatMapHandle(markers, cb);
 }

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

@@ -21,6 +21,8 @@ import { lngLatMap } from "./buttonEvent";
  * @param {Function} markerFun
  * @returns
  */
+const faultBg = require(`@screen/images/mapBg/fault.svg`);
+const normalBg = require(`@screen/images/mapBg/active.svg`);
 
 /**
  * 聚合点
@@ -43,6 +45,63 @@ export class MarkerCluster {
 
   async addData(data) {
     this.infoWindow?.close?.();
+    const graphInstance = window.graphInstance;
+    console.log(data, "xxxxx");
+    data?.forEach((markerData, index) => {
+      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}`;
+        const data = lngLatMap[lngLatStr];
+        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;
+          const distance =
+            (Number(
+              stakeMark
+                .replace(/\.\d+/, "")
+                .replace("+", ".")
+                .replace(/[Kk]/, "")
+            ) -
+              54.394) *
+              window.canvasRatio +
+            window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
+
+          const node = {};
+          if (data.length === 1) {
+            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,
+            };
+          }
+          graphInstance.addNode({
+            x: distance,
+            y: 60,
+            width: 20,
+            height: 20,
+            ...node,
+            zIndex: 1,
+            id: stakeMark,
+          });
+        }
+      }
+    });
 
     if (!data) return;
     if (!Array.isArray(data)) data = [data];
@@ -248,6 +307,8 @@ export class MarkerCluster {
       const findIndex = this.data.findIndex(
         (removeData) => removeData === item
       );
+      const { stakeMark } = item.extData;
+      window.graphInstance.removeNode(stakeMark);
 
       if (findIndex > -1) this.data.splice(findIndex, 1);
     });
@@ -257,8 +318,8 @@ export class MarkerCluster {
 }
 
 export function getContent(data) {
-  const faultBg = require(`@screen/images/mapBg/fault.svg`);
+  // const faultBg = require(`@screen/images/mapBg/fault.svg`);
-  const normalBg = require(`@screen/images/mapBg/active.svg`);
+  // const normalBg = require(`@screen/images/mapBg/active.svg`);
   const nowBg = getState(data) ? normalBg : faultBg;
   if (data.length === 1) {
     return `
@@ -323,14 +384,12 @@ function getIcon({ config, extData }) {
 }
 
 function getState(data) {
-  console.log(data, Array.isArray(data), "getState");
   if (Array.isArray(data)) {
     return data.every((item) => getStateSingle(item));
   } else return getStateSingle(data);
 }
 
 function getStateSingle({ config, extData }) {
-  console.log(config, "getStateSingle");
   return typeof config?.stateCallback === "function"
     ? config.stateCallback?.()
     : extData.deviceState == 1;

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

@@ -5,15 +5,41 @@
 <script>
 import { onceObserver } from "@screen/utils/resizeObserver";
 import Vue from "vue";
-import { Graph } from '@antv/x6'
+import { Graph, Shape } from '@antv/x6'
-
+import { debounce } from "lodash";
 import { actualLocationList, canvasList } from "./data.js";
 
+
+const mouseenterDebounceFunc = debounce(({ node }) => {
+  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+    node.setZIndex(100);
+    console.log(node);
+  }
+}, 100);
+const mouseleaveDebounceFunc = debounce(({ node }) => {
+  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+    node.setZIndex(1);
+  }
+}, 100);
+
+
+const clickDebounceFunc = debounce(({ node }) => {
+  const mapIns = Vue.prototype.mapIns;
+  if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) {
+    const extData = node.getData()?.extData;
+    if (extData) {
+      mapIns.setZoomAndCenter(18, [extData.longitude, extData.latitude]);
+    }
+
+  }
+}, 100);
+
+
 function setFont(size, bold = "normal", family = "微软雅黑") {
   return `${bold} ${size}px ${family}`;
 }
 let width, height;
-const actualDis = actualLocationList.reduce(
+const allActualDis = actualLocationList.reduce(
   (count, item) => count + item.intervalDistance,
   0
 );
@@ -157,17 +183,77 @@ export default {
           // return true;
         },
       });
-      Vue.prototype.graphInstance = graph;
+      graph.on('node:mouseenter', mouseenterDebounceFunc);
+      graph.on('node:mouseleave', mouseleaveDebounceFunc);
+      graph.on('node:click', clickDebounceFunc);
+
+      Shape.HTML.register({
+        shape: 'singleNode-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-size: 100% 100%;
+              background-repeat: no-repeat;
+              width: ${width * 1.2}px;
+                  height: ${height * 1.2}px;
+              display: flex;
+              justify-content: center;
+            ">
+              <img style="
+              width: ${width * 0.8}px;
+                  height: ${height * 0.8}px;
+                  margin-top: ${height * 0.1}px;
+                " src='${data.src}'
+              >
+            </div>
+          `;
+          return div
+        },
+      })
+      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-size: 100% 100%;
+              background-repeat: no-repeat;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding-bottom: ${height * 0.1}px;
+            ">
+              ${data.length}
+            </div>
+        `;
+          return div
+        },
+      })
+      window.graphInstance = graph;
       baseData.nodes.forEach(node => {
         graph.addNode(node)
       });
 
       this.drawCongestionAreas(graph, 1404, 80);
 
+      const ratio = ((width - width * 0.08 * 2) / allActualDis); //减去俩侧空白区域 才是画布要计算的比例
+      window.canvasRatio = ratio;
+      window.canvasWidth = width;
+
       this.list.forEach(item => this.allInstance += item.distance);
       for (let index in this.list) {
         const info = this.list[index];
-        const ratio = ((width - width * 0.08 * 2) / actualDis); //减去俩侧空白区域 才是画布要计算的比例
         info.distance = actualLocationList[index].intervalDistance * ratio;
         await this.drawTag(info, graph);
       }

ruoyi-ui/vue.config.js

@@ -51,8 +51,8 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        target: `http://10.168.68.42:8087`, //王思祥
+        // target: `http://10.168.68.42:8087`, //王思祥
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",