修改差异结果与空间结果上图逻辑,单独拆分删除

website/src/views/ghfxpj/Cyfx.vue

@@ -269,6 +269,15 @@ export default {
           }
         });
       },
+      close() {
+        fxsz.showTable = false;
+        fxsz.showBrowsing = false;
+        // 提交数据到Vuex
+        store.commit("SET_TRANSFER", {
+          showTable: fxsz.showTable,
+          showBrowsing: fxsz.showBrowsing,
+        });
+      },
       handleTransfer(item, index) {
         fxsz.showTable = !fxsz.showTable;
         // 提交数据到Vuex
@@ -276,9 +285,11 @@ export default {
           id: item.id,
           showTable: fxsz.showTable,
           title: item.fxmc,
+          showBrowsing: fxsz.showBrowsing,
         });
       },
       spatialBrowsing(item, index) {
+        fxsz.showTable = false;
         fxsz.showBrowsing = !fxsz.showBrowsing;
         // 提交数据到Vuex
         store.commit("SET_TRANSFER", {

website/src/views/ghfxpj/gtkjfxyy/ghcyfx.vue

@@ -12,6 +12,7 @@
           v-model:act_xzq="act_xzq"
           v-model:zytype="zytype"
           v-model:fxyzDict="fxyzDict"
+          ref="fxszRef"
         ></Fxsz>
       </el-col>
       <el-col :span="18">
@@ -70,6 +71,7 @@ import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
 import Stroke from "ol/style/Stroke";
 import { Style, Icon } from "ol/style";
+import Fill from "ol/style/Fill";
 import { fromLonLat } from "ol/proj";
 import { get as getProjection } from "ol/proj";
 import {
@@ -86,6 +88,7 @@ export default {
   },
   setup() {
     const store = useStore();
+    const fxszRef = ref(null);
     const ghcyfx = reactive({
       fxyzDict: {}, //分析因子列表
       dialogLog: false, // 错误信息提示
@@ -130,6 +133,7 @@ export default {
       transfer: {},
       showTable: false,
       itemObj: {},
+      browsingObj: {}, // 新增：用于存储空间浏览创建的图层
       changeValue(site) {
         // arcMap.getLayerById(site.id).setVisible(site.checked);
         if (site.checked && !arcMap.getLayerById(site.id)) {
@@ -168,45 +172,65 @@ export default {
       closeTable() {
         ghcyfx.showTable = false;
         ghcyfx.delPos();
+        if (fxszRef.value) {
+          fxszRef.value.close();
+        }
       },
 
-      delPos() {
+      delPos(type) {
         let isNotEmptyObject = (obj) => {
-          // 先判断是否为对象类型且不是null
           return (
             Object.prototype.toString.call(obj) === "[object Object]" &&
             Object.keys(obj).length > 0
           );
         };
-        if (isNotEmptyObject(ghcyfx.itemObj)) {
+        // 按类型删除指定图层，不指定类型则删除所有
+        if (type === "browsing" && isNotEmptyObject(ghcyfx.browsingObj)) {
+          arcMap.removeLayer(ghcyfx.browsingObj);
+          ghcyfx.browsingObj = {};
+        } else if (type === "doubleClick" && isNotEmptyObject(ghcyfx.itemObj)) {
           arcMap.removeLayer(ghcyfx.itemObj);
+          ghcyfx.itemObj = {};
+        } else if (!type) {
+          // 兼容原有全删除逻辑
+          if (isNotEmptyObject(ghcyfx.itemObj)) {
+            arcMap.removeLayer(ghcyfx.itemObj);
+            ghcyfx.itemObj = {};
+          }
+          if (isNotEmptyObject(ghcyfx.browsingObj)) {
+            arcMap.removeLayer(ghcyfx.browsingObj);
+            ghcyfx.browsingObj = {};
+          }
         }
       },
-      postion(data) {
-        // 先清除已有图层
-        ghcyfx.delPos();
+      postion(data, type = "doubleClick") {
+        // 只删除当前类型的图层，保留另一种类型
+        ghcyfx.delPos(type);
 
-        // 定义高亮样式
+        // 定义高亮样式（保留之前添加的填充样式）
         let highlightStyle = new Style({
           stroke: new Stroke({
             color: "rgba(255, 0, 0, 1)",
             width: 2,
           }),
+          fill:
+            type === "browsing"
+              ? new Fill({
+                  color: "rgba(255, 255, 255, 0.3)",
+                })
+              : null,
         });
 
-        // 处理数据为数组的情况
         let geomArray = Array.isArray(data) ? data : [data];
         let allFeatures = [];
 
         geomArray.forEach((geomItem) => {
           try {
             let geomData = geomItem;
-            // 解析WKT格式字符串
             if (typeof geomData === "string") {
               geomData = parse(geomData);
             }
 
-            // 读取要素并转换投影
             let features = new GeoJSON().readFeatures(geomData, {
               dataProjection: getProjection("EPSG:4326"),
               featureProjection: getProjection("EPSG:3857"),
@@ -218,17 +242,28 @@ export default {
           }
         });
 
-        // 创建矢量图层并添加要素
         if (allFeatures.length > 0) {
-          ghcyfx.itemObj = new VectorLayer({
+          // 根据类型存储到不同对象
+          let layer = new VectorLayer({
             source: new VectorSource({ features: allFeatures }),
             style: highlightStyle,
             zIndex: 9999,
           });
 
-          // 添加图层并调整视图范围
-          arcMap.addLayer(ghcyfx.itemObj);
-          const extent = ghcyfx.itemObj.getSource().getExtent();
+          if (type === "browsing") {
+            ghcyfx.browsingObj = layer;
+          } else {
+            ghcyfx.itemObj = layer;
+          }
+
+          arcMap.addLayer(
+            type === "browsing" ? ghcyfx.browsingObj : ghcyfx.itemObj
+          );
+          const extent = (
+            type === "browsing" ? ghcyfx.browsingObj : ghcyfx.itemObj
+          )
+            .getSource()
+            .getExtent();
           if (extent) {
             arcMap.map.getView().fit(extent, {
               duration: 2000,
@@ -241,7 +276,8 @@ export default {
         intersects({ id: ghcyfx.transfer.id, objectid: row["编号"] }).then(
           (res) => {
             if (res.statuscode === 200) {
-              ghcyfx.postion(res.data);
+              // 明确指定为双击类型的图层
+              ghcyfx.postion(res.data, "doubleClick");
             }
           }
         );
@@ -256,16 +292,19 @@ export default {
           ghcyfx.fetchTableData(newvalue.id);
         } else {
           ghcyfx.showTable = false;
-          ghcyfx.delPos();
+          // 只删除双击类型图层，保留browsing类型
+          ghcyfx.delPos("doubleClick");
         }
         if (newvalue.showBrowsing) {
           getGeomById({ id: newvalue.id }).then((res) => {
             if (res.statuscode === 200) {
-              ghcyfx.postion(res.data);
+              // 明确指定为browsing类型
+              ghcyfx.postion(res.data, "browsing");
             }
           });
         } else {
-          ghcyfx.delPos();
+          // 只删除browsing类型图层
+          ghcyfx.delPos("browsing");
         }
       }
     );
@@ -312,7 +351,7 @@ export default {
           }
         }
       );
-    return { ...toRefs(ghcyfx) };
+    return { ...toRefs(ghcyfx), fxszRef };
   },
 };
 </script>