接入shp导入接口并绘制区域面

src/api/ghss/hgxfx.js

@@ -6,7 +6,8 @@ const hgxfxApi = {
     GetPage: '/apply/hgxfx/GetPage',
     GetScx: '/apply/hgxfx/GetScxList',
     UpdateScx: '/apply/hgxfx/UpdateScx',
-    ShapeUpload:'/file/uploadShpZip',
+    // ShapeUpload:'/file/uploadShpZip',
+    ShapeUpload: '/onemap-file/saveGeom',
     GetLog: '/apply/hgxfx/GetLog',
 }
 

src/components/mapView/range.vue

@@ -13,6 +13,7 @@
         :auto-upload="false"
         :show-file-list="false"
         :file-list="fileList"
+        :limit="1"
       >
         <el-tooltip
           v-if="fileList.length > 0"
@@ -85,6 +86,7 @@ export default {
       handlerDraw: null,
       draw: null, //绘制
       fileList: [], //文件
+      fileDataID: "", //存储上传文件获取到的id
     };
   },
   mounted() {
@@ -104,6 +106,61 @@ export default {
         this.clearAll();
       }
       const formdata = new FormData();
+      formdata.append("file", file.raw);
+      formdata.append("fromType", 2);
+      formdata.append("fromRoute", this.$route.path);
+      // this.addPolygon();
+      ShapeUpload(formdata).then((res) => {
+        if (res.success) {
+          viewer.entities.removeAll();
+          this.fileDataID = 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.BLUE,
+              },
+            });
+          }
+          viewer.flyTo(viewer.entities);
+        }
+      });
+    },
+
+    //上传文件
+    handleChange1(file, fileList) {
+      if (fileList.length > 0) {
+        this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
+        this.clearAll();
+      }
+      const formdata = new FormData();
+
       formdata.append("file", file.raw);
       this.addPolygon();
       ShapeUpload(formdata).then((res) => {
@@ -189,6 +246,8 @@ export default {
 
     //清除
     clearAll() {
+      //销毁上传创建的面
+      viewer.entities.removeAll();
       this.model.xzfw = "";
       this.model.xzmj = 0;
       common.clearHandlerDrawing("Polygon");