分屏添加图斑

src/utils/transformUtils.js

@@ -53,6 +53,7 @@ function coordinatesToWKT(coordinates, isMultiPolygon) {
 }
 // 输入wkt 为84，返回wkt为火星坐标（高德）
 export function transform(wktData) {
+    if (!wktData) return []
     wktData = wktData.replace("SRID=4490;", '')
     // 判断 WKT 数据是 POLYGON 还是 MULTIPOLYGON
     let isMultiPolygon = wktData.startsWith("MULTIPOLYGON");

src/views/remote/farmland/index.vue

@@ -112,7 +112,7 @@ export default {
   },
   data() {
     return {
-      maptype: 'normal',
+      maptype: "normal",
       total: 0,
       queryParams: {
         jcbh: "", //监测编号
@@ -129,8 +129,8 @@ export default {
         spotsnumber: 0,
         spotsarea: 0,
       },
-      curPageResultLayer: null,
-      vectorLayer: null,
+      curPageResultLayer: {},
+      vectorLayer: {},
       nowId: "",
     };
   },
@@ -147,13 +147,17 @@ export default {
 
   methods: {
     tableClick(row) {
-      let url = this.newObj.proxypath + row.hsxtif;
       let urlQsx = this.newObj.proxypath + row.qsxtif;
       let urlHsx = this.newObj.proxypath + row.hsxtif;
-      this.maptype = "split";
-      this.nowId = row.hsxtif;
-      this.addLayer("mapCon1", urlQsx);
-      this.addLayer("mapCon2", urlHsx);
+      if (this.nowId != row.id) {
+        this.maptype = "split";
+        this.nowId = row.id;
+        this.addLayer("mapCon1", urlQsx);
+        this.addLayer("mapCon2", urlHsx);
+      } else {
+        this.maptype = "normal";
+        this.nowId = "";
+      }
     },
     addLayer(name, url) {
       const source = new GeoTIFF({
@@ -177,8 +181,12 @@ export default {
         this.total = response.total;
         // this.open = true;
         // this.title = "修改监管批次数据";
-        this.initVectorLayer();
-        this.addGeoJson();
+        this.initVectorLayer("mapDiv");
+        this.initVectorLayer("mapCon1");
+        this.initVectorLayer("mapCon2");
+        this.addGeoJson("mapDiv");
+        this.addGeoJson("mapCon1");
+        this.addGeoJson("mapCon2");
       });
     },
     handleDetails(row) {
@@ -189,17 +197,19 @@ export default {
     },
     test() {},
 
-    addGeoJson() {
-      for (let i = 0; i < this.tableData.length; i++) {
-        if (this.tableData[i].geom && this.tableData[i].geom != "") {
-          let geom = transform(this.tableData[i].geom);
-          this.tableData[i].geom = parse(geom);
-          let features = new GeoJSON().readFeatures(this.tableData[i].geom);
-          this.curPageResultLayer.getSource().addFeatures(features);
+    addGeoJson(name) {
+      this.tableData.forEach((titem, i) => {
+        if (titem.geom && titem.geom != "") {
+          if (typeof titem.geom === "string") {
+            let geom = transform(this.tableData[i].geom);
+            titem.geom = parse(geom);
+          }
+          let features = new GeoJSON().readFeatures(titem.geom);
+          this.curPageResultLayer[name].getSource().addFeatures(features);
         }
-      }
-      let fullExtent = this.curPageResultLayer.getSource().getExtent();
-      window.map["mapDiv"].getView().fit(fullExtent, {
+      });
+      let fullExtent = this.curPageResultLayer[name].getSource().getExtent();
+      window.map[name].getView().fit(fullExtent, {
         duration: 3, //动画的持续时间,
         callback: null,
       });
@@ -207,12 +217,12 @@ export default {
     /**
      * 初始化地图矢量图层
      */
-    initVectorLayer() {
-      if (!this.vectorLayer) {
+    initVectorLayer(name) {
+      if (!this.vectorLayer[name]) {
         let vectorSource = new VectorSource({
           // projection: "EPSG:3857",
         });
-        this.vectorLayer = new VectorLayer({
+        this.vectorLayer[name] = new VectorLayer({
           source: vectorSource,
           style: new Style({
             stroke: new Stroke({
@@ -221,11 +231,11 @@ export default {
             }),
           }),
         });
-        // window.map["mapDiv"].addLayer(this.vectorLayer);
+        window.map[name].addLayer(this.vectorLayer[name]);
       }
-      if (!this.curPageResultLayer) {
+      if (!this.curPageResultLayer[name]) {
         let vectorSource = new VectorSource();
-        this.curPageResultLayer = new VectorLayer({
+        this.curPageResultLayer[name] = new VectorLayer({
           source: vectorSource,
           zIndex: 99999,
           style: new Style({
@@ -235,7 +245,7 @@ export default {
             }),
           }),
         });
-        // window.map["mapDiv"].addLayer(this.curPageResultLayer);
+        window.map[name].addLayer(this.curPageResultLayer[name]);
       }
     },
   },