上传数据

public/static/config/config.js

@@ -68,6 +68,7 @@ var map2DViewer = {
   myLabels: {},
   overlay: {},
   analysisGroups: {},
+  uploadGroups:{}
 };
 
 // 预设模型图层名称

src/components/common/BottomForm/UploadingData.vue

@@ -1,6 +1,11 @@
 <template>
   <!-- 上传数据弹窗 -->
-  <el-dialog title="上传数据" :visible.sync="dialogVisible" :before-close="handleClose" width="400px">
+  <el-dialog
+    title="上传数据"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    width="400px"
+  >
     <template slot="title">
       <div class="dialogTitle">
         <div class="dialogTitleIcon"></div>
@@ -24,7 +29,9 @@
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip" slot="tip">*仅支持Geojson格式文件，且不超过5MB</div>
+        <div class="el-upload__tip" slot="tip">
+          *仅支持Geojson格式文件，且不超过5MB
+        </div>
       </el-upload>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -50,7 +57,7 @@ export default {
       // 上传文件列表
       fileList: [],
       // 上传数据弹窗显示状态
-      dialogVisible: false
+      dialogVisible: false,
     };
   },
   mounted() {
@@ -76,11 +83,13 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.clearDialogVisible();
-        // this.$confirm("确认关闭？")
-        //   .then((_) => {
-        //     this.clearDialogVisible();
-        //   })
-        //   .catch((_) => {});
+        this.$confirm("确认关闭？")
+          .then((_) => {
+            console.log("确认关闭吗");
+
+            this.clearDialogVisible();
+          })
+          .catch((_) => {});
       }
     },
     // 上传数据关闭
@@ -93,6 +102,19 @@ export default {
     // 上传数据表单提交
     subMitDialogVisible() {
       this.$message.success("数据上传成功!");
+      setTimeout(() => {
+        if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
+          map2DViewer.map.fitBounds(
+            map2DViewer.analysisGroups[`upload_layer_unique`].getBounds()
+          );
+        }
+        let options = {
+          id: "upload_layer_unique",
+          label: "我的图层1",
+        };
+        this.$bus.$emit("addUploadLayerEvent", options);
+      }, 1000);
+
       this.clearDialogVisible();
     },
     // 文件列表移除文件时
@@ -106,12 +128,16 @@ export default {
     // 文件超出个数限制时
     handleExceed(files, fileList) {
       this.$message.warning(
-        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
       );
     },
     // 删除文件之前
     beforeRemove(file, fileList) {
-      this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
+      this.$store.state.mapMethodsCollection
+        .get("RENDER")
+        .deletePolygonLayer("upload_layer");
       delete map2DViewer.polygons["upload_layer"];
       this.$message.success(`文件${file.name}移除成功！`);
       return true;
@@ -123,23 +149,31 @@ export default {
     },
     // 根据上传的文件渲染到地图中
     uploadRENDER(geoJson) {
-      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));
-      console.log("上传文件读取到的数据",firstPolygon);
-      firstPolygon.features.forEach((ele,index)=>{
-        let cid = `myLayer_${index}`
-        
-      })
-      // let coordinates = firstPolygon.features.coordinates[0][0][0];
-      // this.$store.state.mapMethodsCollection.get("RENDER").setView(firstPolygon, 16);
-      // this.$store.state.mapMethodsCollection.get("RENDER").addPolygonLayer(geoJson, cid, color);
+      // 呈现数据已经成功
+      let uniqueId = `upload_layer_unique`;
+      if (!map2DViewer.analysisGroups[uniqueId]) {
+        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
+        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
+        if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
+          this.$store.state.selectSelectDataMap["singlePolygon"] = [];
+        }
+        let firstPolygon = JSON.parse(JSON.stringify(geoJson));
+        console.log("上传文件读取到的数据", firstPolygon);
+        firstPolygon.features.forEach((ele, index) => {
+          let cid = `myLayer_${index}`;
+          let geometry = JSON.stringify(ele);
+          this.$store.state.mapMethodsCollection
+            .get("RENDER")
+            .addSinglePolygon(
+              geometry,
+              cid,
+              "rgb(0,255,255)",
+              uniqueId,
+              "我的图层",
+              "土地资源"
+            );
+        });
+      }
     },
     // 读取file对象内容
     getActionData(file) {
@@ -164,9 +198,9 @@ export default {
         this.$message.error("上传文件大小不能超过 5MB!");
       }
       return isJPG && isLt5M;
-    }
+    },
   },
-  watch: {}
+  watch: {},
 };
 </script>
 <style lang="less" scoped>

src/views/ComprehensiveAnalysis.vue

@@ -36,6 +36,8 @@
     <div class="comprehensive-analysis-infobox">
       当前显示的疑点数 : &nbsp;<span>{{ currentTotal }}</span>
     </div>
+    <div class="comprehensive-analysis-leftjuanlianInfo" v-show="false">sat2019-s1</div>
+    <div class="comprehensive-analysis-rightjuanlianInfo" v-show="false">sat2022-s1</div>
     <!-- 属性弹窗 -->
     <AttributePopup
       class="comprehensive-analysis-popup"
@@ -612,6 +614,31 @@ export default {
   },
 
   mounted() {
+    // 上传数据后更新我的图层节点
+    this.$bus.$off("addUploadLayerEvent");
+    this.$bus.$on("addUploadLayerEvent", (data) => {
+      console.log("添加我的图层111");
+      if (this.$refs.tree) {
+        let children = [
+          {
+            id: data.id,
+            label: data.label,
+            mainType: "我的图层",
+            children: [],
+          },
+        ];
+        this.$refs.tree.updateKeyChildren(
+          this.firstLevelIdMap.get("我的图层").id,
+          children
+        );
+        this.expandedKeys.push(this.firstLevelIdMap.get("我的图层").id);
+        this.$refs.tree.setCheckedKeys([data.id]);
+        this.$refs.tree.setCurrentKey(data.id);
+        let nodeData = this.$refs.tree.getCurrentNode();
+        this.handleCheckChange(nodeData, true);
+      }
+    });
+
     this.$bus.$off("viewDetailsPopup");
     this.$bus.$on("viewDetailsPopup", (data) => {
       this.viewDetailsPopup(data);
@@ -1970,7 +1997,37 @@ export default {
     justify-content: center;
     position: absolute;
     border: none;
-    right: 8%;
+    right: 10%;
+    top: 15px;
+    pointer-events: auto;
+    color: #fff;
+    font-size: 20px;
+  }
+
+  &-leftjuanlianInfo{
+    width: 150px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    border: none;
+    left: 0.5%;
+    top: 15px;
+    pointer-events: auto;
+    color: #fff;
+    font-size: 20px;
+  }
+
+  &-rightjuanlianInfo{
+    width: 150px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    border: none;
+    right: 0.5%;
     top: 15px;
     pointer-events: auto;
     color: #fff;