差异分析结果列表详情数据列表单行双击数据上图与矢量销毁

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

@@ -15,20 +15,8 @@
         ></Fxsz>
       </el-col>
       <el-col :span="18">
-        <Mapview>
-          <template #tool>
-            <span></span>
-            <div class="tckz">
-              <div>图层列表</div>
-              <div v-for="site in sites" :key="site.id">
-                <el-checkbox
-                  @change="changeValue(site)"
-                  v-model="site.checked"
-                  :label="site.name"
-                ></el-checkbox>
-              </div>
-            </div>
-          </template>
+        <Mapview class="max-width" :rightlayer="true" :click="true">
+          <template #tool> <span></span> </template>
         </Mapview>
         <div class="Attributes" v-show="showTable">
           <div class="AttributesTitle">
@@ -76,6 +64,14 @@ import { GetByBsms } from "@/api/ghyzt/zzllApi.js";
 import { reactive, toRefs, ref } from "@vue/reactivity";
 import { onMounted, watch } from "@vue/runtime-core";
 import { remove } from "@/api/gdal/index.js";
+import parse from "wellknown";
+import GeoJSON from "ol/format/GeoJSON";
+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 { fromLonLat } from "ol/proj";
+import { get as getProjection } from "ol/proj";
 import { getAttributesById, intersects } from "@/api/ghfxpj/cyfxApi.js";
 
 export default {
@@ -129,6 +125,7 @@ export default {
       tableColumns: [],
       transfer: {},
       showTable: false,
+      itemObj: {},
       changeValue(site) {
         // arcMap.getLayerById(site.id).setVisible(site.checked);
         if (site.checked && !arcMap.getLayerById(site.id)) {
@@ -166,13 +163,54 @@ export default {
       },
       closeTable() {
         ghcyfx.showTable = false;
+        ghcyfx.delPos();
+      },
+
+      delPos() {
+        let isNotEmptyObject = (obj) => {
+          // 先判断是否为对象类型且不是null
+          return (
+            Object.prototype.toString.call(obj) === "[object Object]" &&
+            Object.keys(obj).length > 0
+          );
+        };
+        if (isNotEmptyObject(ghcyfx.itemObj)) {
+          arcMap.removeLayer(ghcyfx.itemObj);
+        }
+      },
+      postion(data) {
+        ghcyfx.delPos();
+        let highlightStyle = new Style({
+          stroke: new Stroke({
+            color: "rgba(255, 0, 0, 1)",
+            width: 2,
+          }),
+        });
+        let geomData = data;
+        if (typeof geomData === "string") {
+          geomData = parse(geomData);
+        }
+        let features = new GeoJSON().readFeatures(geomData, {
+          dataProjection: getProjection("EPSG:4326"),
+          featureProjection: getProjection("EPSG:3857"),
+        });
+        ghcyfx.itemObj = new VectorLayer({
+          source: new VectorSource({ features }),
+          style: highlightStyle,
+          zIndex: 9999,
+        });
+        let extent = ghcyfx.itemObj.getSource().getExtent();
+        arcMap.addLayer(ghcyfx.itemObj);
+        arcMap.map.getView().fit(extent, {
+          duration: 2000,
+          callback: null,
+        });
       },
       dblClick(row, column, cell, event) {
-        console.log(row, column, cell, event);
         intersects({ id: ghcyfx.transfer.id, objectid: row["编号"] }).then(
           (res) => {
             if (res.statuscode === 200) {
-              console.log(res, "??????????");
+              ghcyfx.postion(res.data);
             }
           }
         );
@@ -187,6 +225,7 @@ export default {
           ghcyfx.fetchTableData(newvalue.id);
         } else {
           ghcyfx.showTable = false;
+          ghcyfx.delPos();
         }
       }
     );