点击监测图斑列表定位选中图斑,再次点击删除并删除无用打印

src/utils/help.js

@@ -1,14 +1,14 @@
 import WebGLTile from "ol/layer/WebGLTile";
 import GeoTIFF from "ol/source/GeoTIFF";
 export function removeWebGLTile(name) {
-  console.log(name);
+  // console.log(name);
   const allLayers = window.map[name].getLayers().getArray();
   allLayers.forEach((layer) => {
     if (layer instanceof WebGLTile) {
       window.map[name].removeLayer(layer);
     }
   });
-  console.log(window.map[name].getLayers().getArray(), name);
+  // console.log(window.map[name].getLayers().getArray(), name);
 }
 export function addTiff(name, url) {
   const source = new GeoTIFF({

src/views/remote/farmland/index.vue

@@ -131,6 +131,7 @@ export default {
       curPageResultLayer: {},
       vectorLayer: {},
       nowId: "",
+      itemObj: {}, //用于存储分屏高亮的实体
     };
   },
   mounted() {
@@ -155,6 +156,7 @@ export default {
         this.nowId = row.id;
         addTiff("mapCon1", urlQsx);
         addTiff("mapCon2", urlHsx);
+        this.test(row);
       } else {
         this.maptype = "normal";
         this.nowId = "";
@@ -181,7 +183,44 @@ export default {
     handleClose() {
       this.drawer = false;
     },
-    test() {},
+    test(item) {
+      window.map["mapCon1"].removeLayer(this.itemObj);
+      window.map["mapCon2"].removeLayer(this.itemObj);
+
+      if (item.geom && item.geom != "") {
+        if (typeof item.geom === "string") {
+          let geom = this.tableData[i].geom;
+          item.geom = parse(geom);
+        }
+        let features = new GeoJSON().readFeatures(item.geom);
+        this.itemObj = new VectorLayer({
+          source: new VectorSource({
+            features: features,
+          }),
+          style: function (feature) {
+            return new Style({
+              fill: new Fill({
+                //矢量图层填充颜色，以及透明度
+                color: "#f006",
+              }),
+              stroke: new Stroke({
+                //边界样式
+                color: "rgba(255, 0, 0, 1)",
+                width: 2,
+              }),
+            });
+          },
+          zIndex: 9999,
+        });
+        let fullExtent = this.itemObj.getSource().getExtent();
+        window.map["mapCon1"].getView().fit(fullExtent, {
+          duration: 3, //动画的持续时间,
+          callback: null,
+        });
+        window.map["mapCon1"].addLayer(this.itemObj);
+        window.map["mapCon2"].addLayer(this.itemObj);
+      }
+    },
 
     addGeoJson(name) {
       this.tableData.forEach((titem, i) => {
@@ -224,7 +263,7 @@ export default {
         let vectorSource = new VectorSource();
         this.curPageResultLayer[name] = new VectorLayer({
           source: vectorSource,
-          zIndex: 99999,
+          zIndex: 999,
           style: new Style({
             stroke: new Stroke({
               color: "#1f1cd3",