更改图表

zh-baseversion-web/src/utils/mapClass/config.js

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2024-07-26 09:54:06
+ * @LastEditTime: 2024-09-09 09:48:00
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
@@ -36,9 +36,11 @@ export const svgUrl = {
   //居民用户
   6: require("@/assets/firstimage/device/jmUser.png"),
   // 商业用户
-  61:require("@/assets/firstimage/device/syUser.png"),
+  61: require("@/assets/firstimage/device/syUser.png"),
+  // 液化气用户
+  18: require("@/assets/firstimage/device/yhqUser.png"),
   // 工业用户
-  62:require("@/assets/firstimage/device/syUser.png"),
+  62: require("@/assets/firstimage/device/syUser.png"),
 
   7: require("@/assets/image/zrxk.svg"),
   8: require("@/assets/image/zcrq.svg"),
@@ -58,13 +60,22 @@ export const svgUrl = {
   16: require("@/assets/image/yj-xj.png"),
   //煤气罐罐  运行监测   气瓶回溯
   17: require("@/assets/mapinages/meiqiguan.svg"),
-  // 液化气用户
-  18: require("@/assets/firstimage/device/yhqUser.png"),
 
   // 巡检巡查
   98: require("@/assets/image-xjxc/start.svg"),
   99: require("@/assets/image-xjxc/end.svg"),
 };
+export const twoPngDevice = {
+  61: {
+    0: require("@/assets/firstimage/device/gstrq.png"),
+    1: require("@/assets/firstimage/device/gsyhq.png"),
+  },
+  18: {
+    0: require("@/assets/firstimage/device/cytrq.png"),
+    1: require("@/assets/firstimage/device/cyyhq.png"),
+  },
+};
+
 export const svgAlarm = {
   2: require("@/assets/mapImages/tyxAlarm.svg"),
   3: require("@/assets/mapImages/fmAlarm.svg"),
@@ -3955,4 +3966,4 @@ export const yehuaqi = {
       companyType: "1",
     },
   ],
-}
+};

zh-baseversion-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2024-09-07 14:57:27
+ * @LastEditTime: 2024-09-09 10:18:25
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
  */
-import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
+import {
+  pipeColor,
+  svgUrl,
+  svgAlarm,
+  twoPngDevice,
+} from "@/utils/mapClass/config.js";
 
 // 编辑类
 // 在地图上新增的设备可以直接编辑，
@@ -640,19 +645,21 @@ export class EditorMap {
         collision: false, //该层内标注是否避让
         allowCollision: false, //不同标注层之间是否避让
       });
-      //设置一个图标对象
-      const icon = {
-        type: "image", //图标类型，现阶段只支持 image 类型
-        image: svgUrl[18], //可访问的图片 URL
-        size: [44, 49], //图片尺寸
-        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
-      };
+      if (mapData.length == 0) return;
+
       var markers = [];
 
       mapData.forEach((item) => {
         let longitude = item.longitude;
         let latitude = item.latitude;
         var userId = item.userId;
+        //设置一个图标对象
+        const icon = {
+          type: "image", //图标类型，现阶段只支持 image 类型
+          image: twoPngDevice[item.iconType][item.gasType], //可访问的图片 URL
+          size: [44, 49], //图片尺寸
+          anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+        };
         icon.userId = userId;
         var curData = {
           position: [longitude, latitude],
@@ -1061,17 +1068,18 @@ export class EditorMap {
             collision: false, //该层内标注是否避让
             allowCollision: false, //不同标注层之间是否避让
           });
-          //设置一个图标对象
-          const icon = {
-            type: "image", //图标类型，现阶段只支持 image 类型
-            image: svgUrl[61], //可访问的图片 URL
-            size: [44, 49], //图片尺寸
-            anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
-          };
+
           var markers = [];
 
           if (jsonValueArr !== null && jsonValueArr !== undefined) {
             jsonValueArr.forEach((item) => {
+              //设置一个图标对象
+              const icon = {
+                type: "image", //图标类型，现阶段只支持 image 类型
+                image: twoPngDevice[item.iconType][item.gasType], //可访问的图片 URL
+                size: [44, 49], //图片尺寸
+                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+              };
               let longitude = item.longitude;
               let latitude = item.latitude;
               var userId = item.userId;