导入改为wellknown转换wkt格式

src/components/mapView/range.vue

@@ -43,6 +43,7 @@ import { ShapeUpload } from "@/api/ghss/hgxfx.js";
 import { ElMessage } from "element-ui";
 // import { polygon } from "@turf/turf";
 import * as turf from "@turf/turf";
+import parse from "wellknown";
 export default {
   components: {},
   props: {
@@ -93,6 +94,7 @@ export default {
       draw: null, //绘制
       fileList: [], //文件
       fileDataID: "", //存储上传文件获取到的id
+      dataSources: null,
     };
   },
   mounted() {
@@ -109,48 +111,49 @@ export default {
       formdata.append("file", file.raw);
       formdata.append("fromType", 2);
       formdata.append("fromRoute", this.$route.path);
-      // this.addPolygon();
       ShapeUpload(formdata).then((res) => {
         if (res.success) {
           this.model.xzmj = (res.data.area / 1000000).toFixed(2);
-          viewer.entities.removeAll();
+          // viewer.entities.removeAll();
+          this.resetDataSources();
           this.fileDataID = res.data.id;
           this.model.xzfw = res.data.id;
-          let geoms = res.data.geom
-            .substring(
-              res.data.geom.indexOf("(((") + 3,
-              res.data.geom.length - 3
-            )
-            .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({
-              // polyline: new Cesium.PolylineGraphics({
-              //   positions: Cesium.Cartesian3.fromDegreesArray(points),
-              //   width: 3,
-              //   material: Cesium.Color.BLUE.withAlpha(0.9),
-              //   clampToGround: true,
-              // }),
-              polygon: {
-                hierarchy: {
-                  positions: Cesium.Cartesian3.fromDegreesArray(points),
-                },
-                material: Cesium.Color.WHITE.withAlpha(0.3),
-                clampToGround: true,
-                outline: true,
-                outlineWidth: 5,
-                outlineColor: Cesium.Color.RED,
-              },
-            });
-          }
-          viewer.flyTo(viewer.entities);
+          this.addPolygon(parse(res.data.geom));
+          // let geoms = res.data.geom
+          //   .substring(
+          //     res.data.geom.indexOf("(((") + 3,
+          //     res.data.geom.length - 3
+          //   )
+          //   .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({
+          //     // polyline: new Cesium.PolylineGraphics({
+          //     //   positions: Cesium.Cartesian3.fromDegreesArray(points),
+          //     //   width: 3,
+          //     //   material: Cesium.Color.BLUE.withAlpha(0.9),
+          //     //   clampToGround: true,
+          //     // }),
+          //     polygon: {
+          //       hierarchy: {
+          //         positions: Cesium.Cartesian3.fromDegreesArray(points),
+          //       },
+          //       material: Cesium.Color.WHITE.withAlpha(0.3),
+          //       clampToGround: true,
+          //       outline: true,
+          //       outlineWidth: 5,
+          //       outlineColor: Cesium.Color.RED,
+          //     },
+          //   });
+          // }
+          // viewer.flyTo(viewer.entities);
         }
       });
     },
@@ -200,11 +203,11 @@ export default {
       // });
     },
     // 加载GeoJSON数据
-    addPolygon() {
-      let geojson =
-        this.$props.type == "hegxfx"
-          ? "/static/data/ghss/导入.geojson"
-          : "static/data/draw.geojson";
+    addPolygon(geojson) {
+      // let geojson =
+      //   this.$props.type == "hegxfx"
+      //     ? "/static/data/ghss/导入.geojson"
+      //     : "static/data/draw.geojson";
       let polygon = Cesium.GeoJsonDataSource.load(geojson, {
         // clampToGround: true
         stroke: Cesium.Color.RED,
@@ -215,14 +218,15 @@ export default {
         // 将数据源添加到Cesium Viewer
         viewer.dataSources.add(dataSource);
         viewer.zoomTo(dataSource);
-        // 可以获取实体并进行操作
-        // var entities = dataSource.entities.values;
-        // for (var i = 0; i < entities.length; i++) {
-        //   var entity = entities[i];
-        //   // 你可以在这里设置实体的属性，例如位置、颜色等
-        // }
+        this.dataSources = dataSource;
       });
     },
+    resetDataSources() {
+      if (this.dataSources) {
+        viewer.dataSources.remove(this.dataSources);
+        this.dataSources = null;
+      }
+    },
     //绘制
     drawMap() {
       if (!window.handlerPolygon) {
@@ -301,7 +305,8 @@ export default {
     //清除
     clearAll(clearfile = true) {
       //销毁上传创建的面
-      viewer.entities.removeAll();
+      // viewer.entities.removeAll();
+      this.resetDataSources();
       this.model.xzfw = "";
       this.model.xzmj = 0;
       if (clearfile) {