Merge branch 'master' into maxx

src/views/siteselection/components/xzjg.vue

@@ -115,6 +115,7 @@ import ghjgData from "./规划结果.json";
 import { GetXzjg } from "../../../api/ghss/ghxz.js";
 // 使用
 import parse from "wellknown";
+import data from "../../../../static/data/ghss/data";
 export default {
   components: {},
   props: {
@@ -153,24 +154,20 @@ export default {
       tempObj: null,
       copyData: null,
       arrww: [],
+      dataSources: {},
+      tempdataSourcesId:null,
     };
   },
   mounted() {
     GetXzjg({ bsm: "dbc5fcf178fc4592b4940627e758b90d" }).then((res) => {
-      console.log(res, "-------");
       this.xzjgObj = JSON.parse(JSON.stringify(res.data));
       this.copyData = JSON.parse(JSON.stringify(res.data));
       this.tempObj = JSON.parse(JSON.stringify(res.data));
       this.xzjgObj.dks.forEach((item) => {
-        this.drawWktPloygon(item.geom, "#0000ff");
+        this.drawWktPloygon(item.geom, "#0000ff"); //item.dkbm
       });
-      this.drawWktPloygon(this.geom, "#ff0000");
+      this.drawWktPloygon(res.data.geom, "#ff0000"); //res.data.bsm
     });
-
-    // this.xzjgObj = JSON.parse(JSON.stringify(ghjgData));
-    // this.copyData = JSON.parse(JSON.stringify(ghjgData));
-    // this.addPolygon("规划结果", "ghjg", "#0000FF");
-    // this.addPolygon("draw", "draw", "#FF0000");
   },
   methods: {
     download() {
@@ -183,61 +180,84 @@ export default {
       );
     },
 
-    drawWktPloygon(item, itemColor) {
+    // 手动处理为GeoJSON
+    getGeoJSON(data) {
+      return {
+        type: "FeatureCollection",
+        features: data.map((geometry) => ({
+          type: "Feature",
+          geometry: parse(geometry),
+        })),
+      };
+    },
+
+    drawWktPloygon(item, itemColor, id) {
       // const geometry = parse(item); // 就可以得到{type: 'MultiPolygon', coordinates: Array(1)}
       // console.log(geometry, "geometry");
-      // viewer.entities.removeAll();
-      let geoms =
-        item
-          .substring(item.indexOf("(((") + 3, item.length - 3)
-          .split(")),((") ||
-        item.substring(item.indexOf("((") + 2, item.length - 2).split(")),((");
-      for (let i = 0; i < geoms.length; i++) {
-        let geom = geoms[i].split(",");
-        let points = [];
-        for (let j = 0; j < geom.length; j++) {
-          points.push(parseFloat(geom[j].split(" ")[0]));
-          points.push(parseFloat(geom[j].split(" ")[1]));
-        }
-        points.push(parseFloat(geom[0].split(" ")[0]));
-        points.push(parseFloat(geom[0].split(" ")[1]));
-        viewer.entities.add({
-          polygon: {
-            hierarchy: {
-              positions: Cesium.Cartesian3.fromDegreesArray(points),
-            },
-            material: Cesium.Color.WHITE.withAlpha(0.3),
-            clampToGround: true,
-            outline: true,
-            outlineWidth: 5,
-            outlineColor: Cesium.Color.fromCssColorString(itemColor),
+      let geom = {
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            geometry: parse(item),
           },
-        });
-      }
-      viewer.flyTo(viewer.entities);
+        ],
+      };
+      this.loadGeoJSON(geom, itemColor, id);
+
+      // viewer.entities.removeAll();
+      // let geoms =
+      //   item
+      //     .substring(item.indexOf("(((") + 3, item.length - 3)
+      //     .split(")),((") ||
+      //   item.substring(item.indexOf("((") + 2, item.length - 2).split(")),((");
+      // for (let i = 0; i < geoms.length; i++) {
+      //   let geom = geoms[i].split(",");
+      //   let points = [];
+      //   for (let j = 0; j < geom.length; j++) {
+      //     points.push(parseFloat(geom[j].split(" ")[0]));
+      //     points.push(parseFloat(geom[j].split(" ")[1]));
+      //   }
+      //   points.push(parseFloat(geom[0].split(" ")[0]));
+      //   points.push(parseFloat(geom[0].split(" ")[1]));
+      //   viewer.entities.add({
+      //     polygon: {
+      //       hierarchy: {
+      //         positions: Cesium.Cartesian3.fromDegreesArray(points),
+      //       },
+      //       material: Cesium.Color.WHITE.withAlpha(0.3),
+      //       clampToGround: true,
+      //       outline: true,
+      //       outlineWidth: 5,
+      //       outlineColor: Cesium.Color.fromCssColorString(itemColor),
+      //     },
+      //   });
+      // }
+      // viewer.flyTo(viewer.entities);
     },
 
     // 加载GeoJSON数据
-    addPolygon(label, id, color) {
+    loadGeoJSON(geojson, yanse, id) {
       let _this = this;
-      let yanse = color;
-      let polygon = Cesium.GeoJsonDataSource.load(
-        `static/data/${label}.geojson`,
-        {
+      const dataSource = new Cesium.GeoJsonDataSource();
+      dataSource
+        .load(geojson, {
           clampToGround: true,
-          // stroke: Cesium.Color.color,
           stroke: Cesium.Color.fromCssColorString(yanse),
           fill: Cesium.Color.WHITE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
           strokeWidth: 5,
-        }
-      );
-      polygon.then(function (dataSource) {
-        // dataSource.id = id;
-        // 将数据源添加到Cesium Viewer
-        viewer.dataSources.add(dataSource);
-        viewer.zoomTo(dataSource);
-        _this.dataSources[id] = dataSource;
-      });
+        })
+        .then((data) => {
+          viewer.dataSources.add(data);
+          // let entities = data.entities.values;
+          viewer.flyTo(data, {
+            offset: new Cesium.HeadingPitchRange(0, -45, 5000),
+          });
+          if (id) {
+            this.tempdataSourcesId = id
+            _this.dataSources[id] = dataSource;
+          }
+        });
     },
     addprogramme(e, item) {
       e.stopPropagation();
@@ -275,44 +295,13 @@ export default {
       this.bgList = [];
     },
     mapview(item) {
-      // this.edlARR();
-      // // e.stopPropagation()
-      // let tempArr = item.geometry.coordinates[0];
-      // for (let i = 0; i < tempArr.length; i++) {
-      //   const oneDArray = tempArr[i].reduce(
-      //     (accumulator, currentValue) => accumulator.concat(currentValue),
-      //     []
-      //   );
-      //   let entity = new Cesium.Entity({
-      //     name: "地块" + i,
-      //     show: true,
-      //     polygon: {
-      //       hierarchy: {
-      //         positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
-      //       },
-      //       material: Cesium.Color.WHITE.withAlpha(0.3),
-      //       clampToGround: true,
-      //       outline: true,
-      //       outlineWidth: 6,
-      //       outlineColor: Cesium.Color.fromCssColorString("#FF0000"),
-      //     },
-      //   });
-      //   viewer.entities.add(entity);
-      //   // 存ID
-      //   this.arrww.push(entity.id);
-      //   viewer.flyTo(entity);
+      console.log(item);
+      // if (this.dataSources[item.dkbm]) {
+      //   viewer.dataSources.remove(this.dataSources[item.dkbm);
       // }
+      this.drawWktPloygon(item.geom, "#ff0000", item.dkbm);
     },
 
-    edlARR() {
-      //删除路径
-      if (this.arrww.length != 0) {
-        this.arrww.forEach((item) => {
-          viewer.entities.removeById(item);
-        });
-        this.arrww = [];
-      }
-    },
     submit() {
       console.log("生成报告");
     },
@@ -344,12 +333,17 @@ export default {
         this.initData();
       }
     },
+    //监听区域id的变化,用于删除上一次点击生成的geojson区域面
+    tempdataSourcesId(newVal,oldVal){
+      if (oldVal) {
+        viewer.dataSources.remove(this.dataSources[oldVal]);
+      }
+    }
   },
 
   beforeDestroy() {
     viewer.entities.removeAll();
     viewer.dataSources.removeAll();
-    this.edlARR();
   },
 };
 </script>