上传数据调整

public/index.html

@@ -21,7 +21,8 @@
     <script src="./static/plugins/js/leaflet/proj4-compressed.js"></script>
     <script src="./static/plugins/js/leaflet/proj4leaflet.js"></script>
     <script src="./static/plugins/draw-plugin/lodash.js"></script>
-    <script src="./static//plugins/draw-plugin/leaflet.draw.js"></script>
+    <script src="./static/plugins/draw-plugin/leaflet.draw.js"></script>
+    <script src="./static/plugins/js/leaflet/shpjs.js"></script>
     <link rel="stylesheet" type="text/css" href="./static/plugins/js/leaflet1.3.1/leaflet.label.css">
     <link rel="stylesheet" type="text/css" href="./static//plugins/draw-plugin/leaflet.draw.css">
     <style type="text/css" media="screen">

src/components/common/BottomForm/UploadingData.vue

@@ -8,10 +8,20 @@
       </div>
     </template>
     <div id="uploadingBox">
+      <div v-show="dataUpState" style="width: 100%">
+        <el-progress
+          :percentage="postIndex == 0 ? 0 : postIndex / postDataSize"
+          :stroke-width="10"
+          :show-text="false"
+        ></el-progress>
+        <div>当前进度：{{ postIndex + "/" + postDataSize }}</div>
+      </div>
       <el-upload
+        v-show="!dataUpState"
         class="upload-demo"
         drag
-        action="https://jsonplaceholder.typicode.com/posts/"
+        action=""
+        :auto-upload="false"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         :on-success="handleSuccess"
@@ -45,6 +55,9 @@ export default {
   components: {},
   data() {
     return {
+      dataUpState: false,
+      postIndex: 0,
+      postDataSize: 0,
       // 文件目标路径
       filePath: "",
       // 上传文件列表
@@ -76,11 +89,6 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.clearDialogVisible();
-        // this.$confirm("确认关闭？")
-        //   .then((_) => {
-        //     this.clearDialogVisible();
-        //   })
-        //   .catch((_) => {});
       }
     },
     // 上传数据关闭
@@ -92,8 +100,18 @@ export default {
     },
     // 上传数据表单提交
     subMitDialogVisible() {
-      this.$message.success("数据上传成功!");
-      this.clearDialogVisible();
+      let that = this;
+      try {
+        shp("http://127.0.0.1:8089/dz").then(function (geojson) {
+          window.geojsontu = geojson;
+          that.postDataSize = geojson.features.length;
+          that.dataUpState = true;
+          that.addData();
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // this.clearDialogVisible();
     },
     // 文件列表移除文件时
     handleRemove(file, fileList) {
@@ -101,7 +119,7 @@ export default {
     },
     // 点击文件列表中已上传的文件时
     handlePreview(file) {
-      console.log(file);
+      this.getActionData(file);
     },
     // 文件超出个数限制时
     handleExceed(files, fileList) {
@@ -111,8 +129,8 @@ export default {
     },
     // 删除文件之前
     beforeRemove(file, fileList) {
-      this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
-      delete map2DViewer.polygons["upload_layer"];
+      // this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
+      // delete map2DViewer.polygons["upload_layer"];
       this.$message.success(`文件${file.name}移除成功！`);
       return true;
     },
@@ -123,42 +141,58 @@ export default {
     },
     // 根据上传的文件渲染到地图中
     uploadRENDER(geoJson) {
-      debugger
-      map2DViewer.polygons[`upload_layer`] = [];
-      // let cid = "upload";
-      // let color = "#67C23A";
-      // let guid = publicFun.buildGuid("myLayer");
-      // uploadDataIdArr.push({
-      //   id: guid,
-
-      // });
-      // 地图定位
-      let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
-      let coordinates = firstPolygon.geometry.coordinates[0][0][0];
-      this.$store.state.mapMethodsCollection.get("RENDER").setView(coordinates, 16);
-      this.$store.state.mapMethodsCollection.get("RENDER").addPolygonLayer(geoJson, cid, color);
+      return true;
     },
     // 读取file对象内容
-    getActionData(file) {
-      const __this = this;
-      var reader = new FileReader(); // 新建一个FileReader
-      reader.readAsText(file.raw, "UTF-8"); // 读取文件
-      reader.onload = function (evt) {
-        //读取文件完毕执行此函数
-        const dataJson = JSON.parse(evt.target.result);
-        __this.uploadRENDER(dataJson);
-        // console.log("上传的文件内容：", dataJson);
-      };
+    getActionData(file) {},
+    addData() {
+      var geojsondata = window.geojsontu.features[this.postIndex];
+      if (geojsondata && this.postIndex < this.postDataSize) {
+        delete geojsondata["geometry"]["bbox"];
+        geojsondata = JSON.stringify(geojsondata);
+        //给feature添加属性信息
+        let params = new FormData();
+        params.append("columnId", "510");
+        params.append("modelId", "118");
+        var data = {
+          c_boolean: false,
+          c_content: geojsondata,
+          c_date_time: (new Date().getTime() / 1000).toFixed(0) * 1000,
+          c_editorid: 4,
+          c_editor_name: "liumouren",
+          c_xzqh: geojsondata.properties.xzqh,
+          content: "测试录入数据",
+          title: "lmr-t" + this.postIndex
+        };
+        params.append("content", JSON.stringify(data));
+        this.$Post(this.urlsCollection.addContent, params).then(
+          res => {
+            if (res.code === 200) {
+              this.$message.success(res.message);
+              this.postIndex += 1;
+              this.addData();
+            } else {
+              this.$message.error(res.message);
+            }
+          },
+          error => {
+            this.$message.error(error);
+          }
+        );
+      } else {
+        this.dataUpState = false;
+      }
     },
     // 上传文件之前
     beforeAvatarUpload(file) {
-      const isJPG = file.type === "application/json" || file.type === "GeoJSON";
-      const isLt5M = file.size / 1024 / 1024 < 5;
+      return true;
+      const isJPG = file.name.indexOf(".shp") === file.name.length - 4;
+      const isLt5M = file.size / 1024 / 1024 < 10;
       if (!isJPG) {
         this.$message.error("仅支持Geojson格式文件!");
       }
       if (!isLt5M) {
-        this.$message.error("上传文件大小不能超过 5MB!");
+        this.$message.error("上传文件大小不能超过 10MB!");
       }
       return isJPG && isLt5M;
     }
@@ -169,11 +203,19 @@ export default {
 <style lang="less" scoped>
 #uploadingBox {
   display: flex;
+  width: 100%;
   .el-upload *:not(em) {
     color: #f2f6fc;
   }
   .el-upload__tip {
     color: #c0c4cc;
   }
+  ::v-deep .el-progress-bar__outer {
+    background-color: transparent;
+    background-image: linear-gradient(90deg, #007dff32 0%, #00ffff32 100%) !important;
+  }
+  ::v-deep .el-progress-bar__inner {
+    background-image: linear-gradient(90deg, #007dff 0%, #00ffff 100%) !important;
+  }
 }
 </style>

src/components/map/Map.vue

@@ -75,7 +75,8 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: this.minZoom,
-        maxZoom: this.maxZoom
+        maxZoom: this.maxZoom,
+        preferCanvas: true
         // maxBounds: new L.LatLngBounds(this.bound[0], this.bound[1]),
       }).setView(map2DViewer.map.getCenter(), map2DViewer.map.getZoom());