lcw

src/components/GdMap/indexww.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
+import { ref, onMounted, onUnmounted, defineProps, nextTick, computed } from "vue";
 import { MapUtil } from "./mapUtil";
 import emitter from "@/utils/eventBus.js";
 import { getItem } from "@/utils/storage";
@@ -70,8 +70,16 @@ const props = defineProps({
   isShowDraw: {
     type: Boolean,
     default: false
+  },
+  // 地图唯一标识，用于隔离不同地图实例的操作
+  mapKey: {
+    type: String,
+    default: null
   }
 });
+
+// 计算地图唯一标识，如果没有传入则使用mapid
+const uniqueMapKey = computed(() => props.mapKey || props.mapid);
 try {
   const userInfo = getItem("deptId")[0].deptCode;
 } catch (error) {}
@@ -104,7 +112,12 @@ onMounted(() => {
     }
   });
 
-  window.map = map;
+  // 移除全局挂载，避免不同地图实例冲突
+  // window.map = map;
+
+  // 将地图实例存储在组件内
+  mMap.value = map;
+
   map.mapboxGLMap.on("load", () => {
      map.addGaudLayer({
       url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -113,56 +126,42 @@ onMounted(() => {
     // 地图加载完成后发出事件
     // emit('mapLoaded')
   });
+
   mapUtil.value = new MapUtil(map);
-  // map = new EliMap({
-  //   id: props.mapid,
-  //   crs: "EPSG:4490",
-  //   style: {
-  //     glyphs: "./fonts/{fontstack}/{range}.pbf",
-  //     center: [94.36057012, 29.64276831],
-  //     zoom: 15
-  //   },
-  //   minZoom: 7,
-  //   maxZoom: 18,
-  // });
-  // window.map = map;
-  // map.mapboxGLMap.on("load", () => {
-  //   map.addWMTSLayer(
-  //     "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
-  //     ,
-  //     {
-  //       Service: "getImage",
-  //       Type: "RGB",
-  //       ZoomOffset: "0",
-  //       V: "0.3",
-  //       Zoom: "{z}",
-  //       Row: "{y}",
-  //       Col: "{x}"
-  //     },
-  //     {
-  //       tileSize: 300
-  //     }
-  //   );
-  //   zoomTarget.value = map.mapboxGLMap.getZoom();
-  // });
-  // mapUtil.value = new MapUtil(map);
   mapUtil.value.Drawplot(); //初始化加载绘制工具
 
+  // 为每个事件添加唯一标识过滤，确保只处理与当前地图实例相关的操作
+
   // 设置地图中心点及图层
-  emitter.on("setMapCenter", (res) => {
+  emitter.on(`setMapCenter_${uniqueMapKey.value}`, (res) => {
     mapUtil.value.setMapCenter(res.location, res.zoomLevel);
   });
 
+  // 也保留原始事件，但添加条件判断
+  emitter.on("setMapCenter", (res) => {
+    // 如果事件包含flag并且与当前地图的唯一标识匹配，或者没有指定flag，则处理
+    if (!res.flag || res.flag === uniqueMapKey.value) {
+      mapUtil.value.setMapCenter(res.location, res.zoomLevel);
+    }
+  });
+
   emitter.on("removePlot", (flag) => {
     mapUtil.value.removePlot(flag);
   });
+
   emitter.on("removeAll", (flag) => {
     mapUtil.value.removeAll(flag);
   });
+
   // 撒点
   emitter.on("addPointArea", (obj) => {
-    mapUtil.value.makerSki(obj);
+    // 只处理与当前地图相关的标记点
+    if (!obj.baseFlag || obj.baseFlag === uniqueMapKey.value ||
+        obj.flag && obj.flag.includes(uniqueMapKey.value)) {
+      mapUtil.value.makerSki(obj);
+    }
   });
+
   // 鼠标滑过提示文字的点位
   emitter.on("showPoint", (obj) => {
     mapUtil.value.showPoint(obj);
@@ -170,11 +169,23 @@ onMounted(() => {
 
   // 清除覆盖物
   emitter.on("deletePointArea", (res) => {
-    mapUtil.value.removeElement(res);
+    // 只清除与当前地图相关的覆盖物
+    if (typeof res === 'object' && res.baseFlag) {
+      if (res.baseFlag === uniqueMapKey.value) {
+        mapUtil.value.removeElement(res.baseFlag);
+      }
+    } else if (typeof res === 'string') {
+      if (res === uniqueMapKey.value || res.includes(uniqueMapKey.value)) {
+        mapUtil.value.removeElement(res);
+      }
+    }
   });
+
   // 清除某个覆盖物的单个
   emitter.on("deletePointAreaOne", (obj) => {
-    mapUtil.value.removeElementOne(obj.flag, obj.id);
+    if (obj.flag === uniqueMapKey.value || obj.flag.includes(uniqueMapKey.value)) {
+      mapUtil.value.removeElementOne(obj.flag, obj.id);
+    }
   });
 
   // 清除某个覆盖物的单个