全部图斑上图与无用代码删除

src/views/remote/MapView.vue

@@ -8,24 +8,8 @@
 
 <script>
 import "ol/ol.css";
-// import { Map, View } from "ol"; //地图,视图
-// import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
-// // import TileLayer from "ol/layer/Tile"; //可以理解为图层
-// import XYZ from "ol/source/XYZ.js";
 import { get as getProjection, transform } from "ol/proj.js";
-// import { Vector as VectorSource } from "ol/source";
-// import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
-// import GeoJSON from "ol/format/GeoJSON";
-// import { Fill, Stroke, Style } from "ol/style";
-// // import { parse } from 'ol/expr/expression';
-// import TileWMS from "ol/source/TileWMS";
-// import { fromLonLat } from "ol/proj";
-// import { Circle as CircleStyle, RegularShape } from "ol/style";
-// import { Polygon } from "ol/geom";
-// import Feature from "ol/Feature";
-// // import {OlOverlay} from 'ol/comon';
 import parse from "wellknown";
-
 import Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
@@ -35,8 +19,6 @@ import Feature from "ol/Feature";
 import LineString from "ol/geom/LineString";
 import Stroke from "ol/style/Stroke";
 import Fill from "ol/style/Fill";
-// import Style from "ol/style/Style";
-// import XYZ from "ol/source/XYZ";
 import { Vector as LayerVec } from "ol/layer";
 import { Style, Icon } from "ol/style";
 import { Point } from "ol/geom";
@@ -48,14 +30,12 @@ import * as coordinate from "ol/coordinate";
 import ImageLayer from "ol/layer/Image";
 import ImageStatic from "ol/source/ImageStatic";
 import Draw from "ol/interaction/Draw";
-// import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";
 import GeoJSON from "ol/format/GeoJSON";
 export default {
   data() {
     return {
       map: null,
       map2: null,
-      //   drawSource: new Vector(),
       curPageResultLayer: null,
       vectorLayer: null,
     };
@@ -115,97 +95,9 @@ export default {
       //       view: view, //同一个view
       //     });
     },
-    addGeoJson() {
-      //   let features = [];
-      let aaa = [
-        parse(
-          "SRID=4326;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))"
-        ),
-        parse(
-          "SRID=4490;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))"
-        ),
-        parse('MULTIPOLYGON (((106.67733442033443 38.21125613092812, 106.67738081982401 38.21093490369236, 106.6774129425475 38.210838535521646, 106.67766992433627 38.21060653807359, 106.6776669653542 38.21032654901211, 106.67760183022085 38.21030441628767, 106.67691082322631 38.210325163597304, 106.67688941155421 38.21061065255816, 106.67697048026685 38.21085452911319, 106.67702270721048 38.21094542330172, 106.6770605609463 38.211837288225865, 106.67703812786709 38.21193125341648, 106.67700838460445 38.21235360774489, 106.6777222229062 38.21252611866794, 106.67770437694878 38.2123119671773, 106.67766992433627 38.212137721230704, 106.67765574126179 38.212122871762745, 106.67758426373996 38.212112736890276, 106.67752001829297 38.21206276820914, 106.67739807450772 38.21193811456209, 106.67736100262493 38.21185544075013, 106.67733442033443 38.21125613092812)))')
-      ];
-      for (let i = 0; i < aaa.length; i++) {
-        // if (typeof data[i] == "string") {
-        //   data[i] = JSON.parse(data[i]);
-        // }
-        let features = new GeoJSON().readFeatures(aaa[i]);
-        this.curPageResultLayer.getSource().addFeatures(features);
-      }
-      let fullExtent = this.curPageResultLayer.getSource().getExtent();
-      this.map.getView().fit(fullExtent, {
-        duration: 3, //动画的持续时间,
-        callback: null,
-      });
-
-      //   console.log(features,'features');
-      //   let vectorSource = new VectorSource({
-      //     features: features,
-      //     // features: aaa.coordinates,
-      //   });
-      //   let vectorLayer = new VectorLayer({
-      //     source: vectorSource,
-      //     // 绘制后填充的颜色
-      //     style: new Style({
-      //       fill: new Fill({
-      //         color: "rgba(255, 0, 0, 0.2)"
-      //       }),
-      //       stroke: new Stroke({
-      //         color: "rgba(255, 0, 0, 1)",
-      //         width: 2
-      //       }),
-      //       image: new CircleStyle({
-      //         radius: 7,
-      //         fill: new Fill({
-      //           color: "rgba(255, 0, 0, 1)"
-      //         })
-      //       })
-      //     }),
-      //   });
-      //   console.log(vectorLayer,'vectorLayer');
-      //   this.map.addLayer(vectorLayer);
-      //   console.log(this.map,'this.map');
-    },
-    /**
-     * 初始化地图矢量图层
-     */
-    initVectorLayer() {
-      if (!this.vectorLayer) {
-        let vectorSource = new VectorSource({
-          // projection: "EPSG:3857",
-        });
-        this.vectorLayer = new VectorLayer({
-          source: vectorSource,
-          style: new Style({
-            stroke: new Stroke({
-              color: "#f00",
-              width: 2,
-            }),
-          }),
-        });
-        this.map.addLayer(this.vectorLayer);
-      }
-      if (!this.curPageResultLayer) {
-        let vectorSource = new VectorSource();
-        this.curPageResultLayer = new VectorLayer({
-          source: vectorSource,
-          zIndex: 99999,
-          style: new Style({
-            stroke: new Stroke({
-              color: "#1f1cd3",
-              width: 2,
-            }),
-          }),
-        });
-        this.map.addLayer(this.curPageResultLayer);
-      }
-    },
   },
   mounted() {
     this.createMap();
-    this.initVectorLayer();
-    this.addGeoJson();
   },
 };
 </script>

src/views/remote/farmland/index.vue

@@ -35,7 +35,13 @@
           </div>
         </div>
         <el-table :data="tableData" border style="width: 100%">
+          <!-- @cell-click="tableClick" -->
           <el-table-column prop="jcbh" label="监测编号" width="220">
+            <template slot-scope="scope">
+              <span style="cursor: pointer" @click="tableClick(scope.row)">{{
+                scope.row.jcbh
+              }}</span>
+            </template>
           </el-table-column>
           <el-table-column prop="xmc" label="区县名称" show-overflow-tooltip>
           </el-table-column>
@@ -50,7 +56,7 @@
               <el-button
                 size="mini"
                 type="text"
-                @click="handleDetails(scope.row)"
+                @click.stop="handleDetails(scope.row)"
                 >详情</el-button
               >
             </template>
@@ -72,6 +78,30 @@
 import MapView from "../MapView.vue";
 import parse from "wellknown";
 import { getPcsj, listPcsjXQList } from "@/api/supervise/pcsj";
+
+import "ol/ol.css";
+import { get as getProjection, transform } from "ol/proj.js";
+import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import Feature from "ol/Feature";
+import LineString from "ol/geom/LineString";
+import Stroke from "ol/style/Stroke";
+import Fill from "ol/style/Fill";
+import { Vector as LayerVec } from "ol/layer";
+import { Style, Icon } from "ol/style";
+import { Point } from "ol/geom";
+import { Vector as SourceVec, XYZ } from "ol/source";
+import Tile from "ol/layer/Tile";
+import { OSM } from "ol/source";
+import * as control from "ol/control";
+import * as coordinate from "ol/coordinate";
+import ImageLayer from "ol/layer/Image";
+import ImageStatic from "ol/source/ImageStatic";
+import Draw from "ol/interaction/Draw";
+import GeoJSON from "ol/format/GeoJSON";
 export default {
   components: {
     MapView,
@@ -100,6 +130,8 @@ export default {
         spotsnumber: 0,
         spotsarea: 0,
       },
+      curPageResultLayer: null,
+      vectorLayer: null,
     };
   },
   mounted() {
@@ -118,6 +150,10 @@ export default {
   },
 
   methods: {
+    tableClick(row) {
+      let url = this.newObj.proxypath + row.hsxtif;
+      console.log(row, "-----", url);
+    },
     getList() {
       listPcsjXQList(this.queryParams).then((response) => {
         console.log(response, "response1111111");
@@ -125,43 +161,66 @@ export default {
         this.total = response.total;
         // this.open = true;
         // this.title = "修改监管批次数据";
+        this.initVectorLayer();
+        this.addGeoJson();
       });
     },
-    handleDetails(row) {},
+    handleDetails(row) {
+      console.log("我是详情");
+    },
     handleClose() {
       this.drawer = false;
     },
     test() {},
 
     addGeoJson() {
-      let ol = this.$ol;
-      let aaa =
-        "SRID=4326;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))";
-      const features = new GeoJSON({
-        featureProjection: "EPSG:4326",
-      }).readFeatures(parse(aaa));
-      const source = new VectorSource({
-        features,
-        // url: 'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',
-        // format: new GeoJSON()
-      });
-
-      const vectorLayer = new VectorLayer({
-        source: source,
-        style: {
-          "fill-color": "rgba(255, 255, 255, 0.6)",
-          "stroke-width": 2,
-          "stroke-color": "#1469e9",
-          "circle-radius": 5,
-          "circle-fill-color": "rgba(255, 255, 255, 0.6)",
-          "circle-stroke-width": 1,
-          "circle-stroke-color": "#319FD3",
-        },
+      for (let i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i].geom && this.tableData[i].geom != "") {
+          let geom = this.tableData[i].geom;
+          this.tableData[i].geom = parse(geom);
+          let features = new GeoJSON().readFeatures(this.tableData[i].geom);
+          this.curPageResultLayer.getSource().addFeatures(features);
+        }
+      }
+      let fullExtent = this.curPageResultLayer.getSource().getExtent();
+      window.map.getView().fit(fullExtent, {
+        duration: 3, //动画的持续时间,
+        callback: null,
       });
-      map.addLayer(vectorLayer);
-      const feature = source.getFeatures()[0];
-      const polygon = feature.getGeometry();
-      view.fit(polygon, { padding: [170, 50, 30, 150] });
+    },
+    /**
+     * 初始化地图矢量图层
+     */
+    initVectorLayer() {
+      if (!this.vectorLayer) {
+        let vectorSource = new VectorSource({
+          // projection: "EPSG:3857",
+        });
+        this.vectorLayer = new VectorLayer({
+          source: vectorSource,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#f00",
+              width: 2,
+            }),
+          }),
+        });
+        window.map.addLayer(this.vectorLayer);
+      }
+      if (!this.curPageResultLayer) {
+        let vectorSource = new VectorSource();
+        this.curPageResultLayer = new VectorLayer({
+          source: vectorSource,
+          zIndex: 99999,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#1f1cd3",
+              width: 2,
+            }),
+          }),
+        });
+        window.map.addLayer(this.curPageResultLayer);
+      }
     },
   },
 };

src/views/remote/satellite/index.vue

@@ -145,6 +145,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleBrowse(scope.row)"
+            :disabled="scope.row.readstatus != 0"
             >浏览</el-button
           >
           <el-button
@@ -367,7 +368,6 @@ export default {
     // 浏览按钮
     handleBrowse(row) {
       this.$router.push({ path: "/remote/gdjc" ,query: { id: row.id}});
-      // this.$bus.$emit('pcsjObj',row)
     },
 
     /** 修改按钮操作 */