叠置分析数据显示修改，同屏对比关联问题修改，上传数据同时支持json和shp的压缩包

package.json

@@ -17,6 +17,7 @@
     "echarts": "^5.4.0",
     "element-ui": "^2.15.13",
     "html2canvas": "^1.4.1",
+    "iconv-lite": "^0.6.3",
     "jquery": "^3.6.1",
     "jszip": "^3.10.1",
     "proj4": "^2.8.1",

src/components/common/BottomForm/CustomModelDialog.vue

@@ -4,6 +4,10 @@
     :visible.sync="outerDialogVisible"
     width="750px"
     center
+    v-loading="layerLoading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
   >
     <el-dialog
       title="请输入模型名称"
@@ -135,6 +139,7 @@ export default {
   components: {},
   data() {
     return {
+      layerLoading:false,
       uploadBaseUrl: "/dms",
       classTextToIndex: {},
       overlayBtnChecked: false,
@@ -234,10 +239,12 @@ export default {
       // console.log("监听模型中");
       this.overlayBtnChecked = false;
       // console.log(node, "节点数据");
-      if (node.data.c_dzfx_file) {
-        // console.log("已有叠置分析结果");
-        this.forbidOverlayBtn = true;
-      }
+      
+      // 允许多次叠置 -- 后续根据需求调整
+      // if (node.data.c_dzfx_file) {
+      //   // console.log("已有叠置分析结果");
+      //   this.forbidOverlayBtn = true;
+      // }
 
       if (!node.data.c_dzfx_file) {
         // console.log("未进行叠置分析");
@@ -660,14 +667,20 @@ export default {
           modelId: this.currentModifiedModelId,
           userId: localStorage.getItem("USER_ID"),
         };
+        this.layerLoading = true
         this.$Post(this.urlsCollection.overlayAnalysis, params).then((res) => {
           console.log(res, "res");
           if (res.code === 200) {
+            this.layerLoading = false
             let address = this.uploadBaseUrl + res.content;
             this.displayOverlayGeometry(address);
             this.modifyModel("alreadyOverlay", bindLayer);
           }
-        });
+        }).catch((err)=>{
+          this.$message.error("叠置分析失败")
+          this.layerLoading = false
+          console.log(err,"请求错误");
+        })
       }
     },
   },

src/components/common/BottomForm/UploadingDataShp.vue

@@ -13,7 +13,7 @@
       </div>
     </template>
     <div id="uploadingBox">
-      <el-upload
+      <!-- <el-upload
         class="upload-demo"
         ref="upload"
         drag
@@ -21,30 +21,35 @@
         action="#"
         :limit="1"
         :show-file-list="false"
-        accept=".zip,.shp"
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      </el-upload>
-      <!-- <el-upload
+        <div class="el-upload__tip" slot="tip">
+          *仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据
+        </div>
+      </el-upload> -->
+      <el-upload
         class="upload-demo"
         drag
-        action="https://jsonplaceholder.typicode.com/posts/"
+        action=""
+        :http-request="uploadSectionFile"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
-        :on-success="handleSuccess"
         :before-remove="beforeRemove"
         :before-upload="beforeAvatarUpload"
-        multiple
+        :limit="1"
         :on-exceed="handleExceed"
         :file-list="fileList"
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">
-          *仅支持Geojson格式文件，且不超过5MB
+          *仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据,且不超过100MB
         </div>
-      </el-upload> -->
+        <!-- <div class="el-upload__tip" slot="tip">
+          *仅支持Geojson格式文件，且不超过5MB
+        </div> -->
+      </el-upload>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible()">取 消</el-button>
@@ -56,19 +61,31 @@
 <script>
 /**
  * 底部菜单（上传数据）组件
- * @author: LiuMengxiang
- * @Date: 2022年11月21-25日
+ * 支持geosjon格式的数据以及shp的压缩包 -- 坐标系必须为上海2000高斯投影坐标
+ * @author: GAO LU
+ * @Date: 2023年3月6-8日
  */
 import shp from "shpjs";
 import JsZip from "jszip";
+import iconv from "iconv-lite";
+import { open, openShp, openDbf } from "shapefile";
+import coordinate from "@/utils/coordinate";
 export default {
   name: "UploadingData",
   components: {},
   data() {
     return {
-      // 文件目标路径
-      upName: null,
+      headerObj:{
+
+      },
+      // 当前上传文件的unique名称
+      layerUniqueName: null,
+      // shp数据
       shpFile: null,
+      fileUniqueObj: {},
+      shpDataList: [],
+      // 属性信息
+      shpFileAttributes: null,
       filePath: "",
       // 上传文件列表
       fileList: [],
@@ -120,52 +137,148 @@ export default {
     },
     // 上传判断
     uploadSectionFile(params) {
+      debugger
       const file = params.file;
       const fileName = file.name;
+      const isGeojson =
+        fileName.indexOf("json") != -1 || fileName.indexOf("geojson") != -1;
       const isZip = fileName.indexOf("zip") !== -1;
       const isShp = fileName.indexOf("shp") !== -1;
-      this.upName = fileName; //项目中需要传文件名字，所以这里保存下来
-      if (!(isZip || isShp)) {
-        this.$message.error("只能上传zip、shp格式!");
-        this.abortLoad(); //因为手动上传，所以这里是取消上传
-        return false;
-      } else {
-        isZip ? this.openZip(file) : this.toGeo(file);
-      }
+      // 用于识别不同文件，并作为图层名称
+      this.layerUniqueName = ""
+      if (isGeojson) {
+        this.layerUniqueName =
+          fileName.slice(0, fileName.indexOf(".json")) ||
+          fileName.slice(0, fileName.indexOf(".geojson"));
+        this.fileUniqueObj[this.layerUniqueName] = [];
+        console.log("读取geojson格式的数据");
+        this.readGeojson(file,this.layerUniqueName);
+      } 
+      
+      if (isZip) {
+        this.layerUniqueName = fileName.slice(0, fileName.indexOf(".zip"));
+        this.fileUniqueObj[this.layerUniqueName] = [];
+        console.log("读取shp压缩包");
+        this.openZip(file,this.layerUniqueNamee);
+      } 
     },
-    // 为zip时，读取压缩包，选取shp文件
-    openZip(data) {
+    openZip(data, uniqueName) {
       let newZip = new JsZip();
-      newZip.loadAsync(data).then((file) => {
-        // 压缩包里的内容file,files
-        const fileList = Object.keys(file.files);
-        const pattern = new RegExp(/\S\.shp$/);
-        this.shpFile = fileList.find((i) => pattern.test(i));
-        newZip
-          .file(this.shpFile)
-          .async("arraybuffer")
-          .then((content) => {
-            // 文件中的内容
-            this.shapefileOpen(content);
+      newZip
+        .loadAsync(data, {
+          decodeFileName: function (bytes) {
+            return iconv.decode(bytes, "gbk"); // 按中文编码
+          },
+        })
+        .then((file) => {
+          // 压缩包里的内容file,files
+          const fileList = Object.keys(file.files);
+          const pattern = new RegExp(/\S\.shp$/);
+          const attrPattern = new RegExp(/\S\.dbf$/);
+          this.shpFile = fileList.find((i) => pattern.test(i));
+          this.shpFileAttributes = fileList.find((i) => attrPattern.test(i));
+          // 此处是压缩包中的shp文件,arraybuffer(此时在回调的参数中已经可以获取到上传的zip压缩包下的所有文件)
+          newZip
+            .file(this.shpFile)
+            .async("arraybuffer")
+            .then((geoContent) => {
+              let geometryInfo = geoContent;
+              newZip
+                .file(this.shpFileAttributes)
+                .async("arraybuffer")
+                .then((attrContent) => {
+                  // 文件中的内容
+                  this.shapefileOpen(geometryInfo, attrContent,uniqueName);
+                });
+            })
+            .catch((err) => {
+              // 是否是合法的zip包，解决rar包改后缀zip
+              console.log(err);
+              this.$message.error("请上传正确格式的文件!");
+            });
+          // zip.forEach((path, zipEntry) => {
+          //   console.log(zipEntry.name); // 输出不乱码中文
+          // });
+        });
+    },
+    // 为zip时，读取压缩包，选取shp文件
+    // 读取geojson数据
+    readGeojson(data, uniqueName) {
+      debugger;
+      const reader = new FileReader();
+      reader.readAsText(data, "UTF-8");
+      // reader.readAsArrayBuffer(data);
+      reader.onload = (e) => {
+        let result = e.target.result;
+        this.fileUniqueObj[uniqueName] = result;
+        // 转换坐标 -- 渲染疑点，添加到我的图层
+        // this.geojsonFileRender(result,uniqueName);
+      };
+    },
+    // 渲染geojson的数据
+    geojsonFileRender(content, uniqueName) {},
+    // 解析.shp或.dbf文件
+    shapefileOpen(geoContent, attrContent, uniqueName) {
+      let options = {
+        encoding: "utf8",
+      };
+      let that = this
+      that.shpDataList = [];
+      // 读取几何信息
+      open(geoContent, attrContent, options)
+        .then((source) =>
+          source.read().then(function log(result) {
+            if (result.done) return;
+            // console.log(result)
+            that.shpDataList.push(result.value);
+            return source.read().then(log);
           })
-          .catch((err) => {
-            // 是否是合法的zip包，解决rar包改后缀zip
-            console.log(err);
-            this.$message.error("请上传正确格式的文件!");
-          });
-      });
+        )
+        .catch((error) => console.error(error.stack));
+      this.fileUniqueObj[uniqueName] = that.shpDataList
+      console.log(this.fileUniqueObj[uniqueName], "读取到的shp数据");
     },
-    // 转ArrayBuffer
-    toGeo(data) {
-        const reader = new FileReader()
-        reader.readAsArrayBuffer(data)
-        reader.onload = (e) =>{
-            this.shapefileOpen(this.result)
+    /**
+     * 上海2000高斯投影坐标转上海2000经纬度坐标
+     */
+    latLngsTransform(latlngsAry) {
+      // 深拷贝
+      var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
+      if (typeof tempLatlngsAry[0] === "number") {
+        if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
+          tempLatlngsAry = coordinate.shcj_to_wgs84(
+            tempLatlngsAry[0],
+            tempLatlngsAry[1]
+          );
+          tempLatlngsAry = [
+            tempLatlngsAry[0] - 0.19195,
+            tempLatlngsAry[1] + 0.00011,
+          ];
+
+          return tempLatlngsAry;
         }
+        if (tempLatlngsAry.length === 3) {
+          tempLatlngsAry = coordinate.shcj_to_wgs84(
+            tempLatlngsAry[0],
+            tempLatlngsAry[1]
+          );
+          tempLatlngsAry = [
+            tempLatlngsAry[0] - 0.19195,
+            tempLatlngsAry[1] + 0.00011,
+          ];
+          return tempLatlngsAry;
+        }
+      } else {
+        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
+          tempLatlngsAry[i] = latLngsTransform(tempLatlngsAry[i]);
+        }
+      }
+      return tempLatlngsAry;
     },
-    shapefileOpen(content){
-        // open(content).then()
-    }
+    // 上传表单提交，开始渲染上传的图层数据，并且添加到我的图层
+    subMitDialogVisible(){
+
+    }, 
     // 上传数据表单提交
     // subMitDialogVisible() {
     //   let fileDataList = this.fileDataList;
@@ -190,29 +303,25 @@ export default {
     //   this.clearDialogVisible();
     // },
     // 文件列表移除文件时
-    // handleRemove(file, fileList) {
-    //   this.fileList = fileList;
-    //   delete this.fileDataList[file.uid];
-    // },
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+      delete this.fileDataList[file.uid];
+    },
     // 点击文件列表中已上传的文件时
-    // handlePreview(file) {},
+    handlePreview(file) {},
     // 文件超出个数限制时
-    // handleExceed(files, fileList) {
-    // this.$message.warning(
-    //   `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-    //     files.length + fileList.length
-    //   } 个文件`
-    // );
-    // },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
     // 删除文件之前
-    // beforeRemove(file, fileList) {
-    //   this.$message.success(`文件${file.name}移除成功！`);
-    //   return true;
-    // },
-    // 文件上传成功时
-    // handleSuccess(response, file, fileList) {
-    //   this.getActionData(file);
-    // },
+    beforeRemove(file, fileList) {
+      this.$message.success(`文件${file.name}移除成功！`);
+      return true;
+    },
     // 根据上传的文件渲染到地图中
     // uploadRENDER(geoJson) {
     //   // 呈现数据已经成功
@@ -244,27 +353,38 @@ export default {
     //   }
     // },
     // // 读取file对象内容
-    // getActionData(file) {
-    //   const __this = this;
-    //   var reader = new FileReader(); // 新建一个FileReader
-    //   reader.readAsText(file.raw, "UTF-8"); // 读取文件
-    //   reader.onload = function (evt) {
-    //     __this.fileList.push(file);
-    //     __this.fileDataList[file.uid] = evt.target.result;
-    //   };
-    // },
+    getActionData(file) {
+      console.log(file, "getActionData");
+      // const __this = this;
+      // var reader = new FileReader(); // 新建一个FileReader
+      // reader.readAsText(file.raw, "UTF-8"); // 读取文件
+      // reader.onload = function (evt) {
+      //   __this.fileList.push(file);
+      //   __this.fileDataList[file.uid] = evt.target.result;
+      // };
+    },
     // 上传文件之前
-    // beforeAvatarUpload(file) {
-    //   const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
-    //   const isLt5M = file.size / 1024 / 1024 < 5;
-    //   if (!isJPG) {
-    //     this.$message.error("仅支持Geojson格式文件!");
-    //   }
-    //   if (!isLt5M) {
-    //     this.$message.error("上传文件大小不能超过 5MB!");
-    //   }
-    //   return isJPG && isLt5M;
-    // },
+    beforeAvatarUpload(file) {
+      console.log(file, "beforeUpload");
+      let fileName = file.name;
+      const isGeojson =
+        fileName.indexOf("json") != -1 || fileName.indexOf("geojson") != -1;
+      const isZip = fileName.indexOf("zip") !== -1;
+      const isLt100M = file.size / 1024 / 1024 < 100;
+
+      if (!(isGeojson || isZip)) {
+        this.$message.error("仅支持json格式文件或shp格式的压缩包!");
+      }
+      // const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
+      // const isLt5M = file.size / 1024 / 1024 < 5;
+      // if (!isJPG) {
+      //   this.$message.error("仅支持Geojson格式文件!");
+      // }
+      if (!isLt100M) {
+        this.$message.error("上传文件大小不能超过 100MB!");
+      }
+      return (isGeojson || isZip) && isLt100M;
+    },
   },
   watch: {},
 };

src/components/common/BottomForm/UploadingDataShp1.vue

@@ -0,0 +1,383 @@
+<template>
+  <!-- 上传数据弹窗 -->
+  <el-dialog
+    title="上传数据"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    width="400px"
+  >
+    <template slot="title">
+      <div class="dialogTitle">
+        <div class="dialogTitleIcon"></div>
+        请选择你要上传的文件
+      </div>
+    </template>
+    <div id="uploadingBox">
+      <el-upload
+        class="upload-demo"
+        ref="upload"
+        drag
+        :http-request="uploadSectionFile"
+        action="#"
+        :limit="1"
+        :show-file-list="false"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">
+          *仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据
+        </div>
+      </el-upload>
+      <!-- <el-upload
+        class="upload-demo"
+        drag
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-remove="beforeRemove"
+        :before-upload="beforeAvatarUpload"
+        multiple
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">
+          *仅支持Geojson格式文件，且不超过5MB
+        </div>
+      </el-upload> -->
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="clearDialogVisible()">取 消</el-button>
+      <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（上传数据）组件
+ * 支持geosjon格式的数据以及shp的压缩包 -- 坐标系必须为上海2000高斯投影坐标
+ * @author: GAO LU
+ * @Date: 2023年3月6-7日
+ */
+import shp from "shpjs";
+import JsZip from "jszip";
+import iconv from "iconv-lite";
+import { open, openShp, openDbf } from "shapefile";
+import coordinate from "@/utils/coordinate";
+export default {
+  name: "UploadingData",
+  components: {},
+  data() {
+    return {
+      // 文件目标路径
+      upName: null,
+      // shp数据
+      shpFile: null,
+      shpDataList: [],
+      // 属性信息
+      shpFileAttributes: null,
+      filePath: "",
+      // 上传文件列表
+      fileList: [],
+      // 暂存上传文件数据
+      fileDataList: {},
+      // 上传数据弹窗显示状态
+      dialogVisible: false,
+    };
+  },
+  mounted() {
+    // 上传数据事件监听
+    this.$bus.$off("scsj");
+    this.$bus.$on("scsj", () => {
+      this.changeShowBottomMenusStatus();
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("scsj");
+  },
+  props: [],
+  methods: {
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      // 打开弹窗
+      this.dialogVisible = true;
+      this.$emit("changeShowBottomMenusStatus", false);
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      if (this.dialogVisible && this.fileList.length > 0) {
+        this.$confirm("确认关闭？")
+          .then((_) => {
+            this.clearDialogVisible();
+          })
+          .catch((_) => {});
+      } else {
+        this.clearDialogVisible();
+      }
+    },
+    // 上传数据关闭
+    clearDialogVisible() {
+      this.fileList = [];
+      this.fileDataList = {};
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
+    },
+    // 上传判断
+    uploadSectionFile(params) {
+      const file = params.file;
+      const fileName = file.name;
+      const isGeojson =
+        fileName.indexOf("json") != -1 || fileName.indexOf("geojson") != -1;
+      const isZip = fileName.indexOf("zip") !== -1;
+      const isShp = fileName.indexOf("shp") !== -1;
+      this.upName = fileName; //项目中需要传文件名字，所以这里保存下来
+      if (isGeojson) {
+        console.log("读取geojson格式的数据");
+        this.readGeojson(file);
+      } else if (isZip) {
+        console.log("读取shp压缩包");
+        this.openZip(file);
+      } else {
+        this.$message.info(
+          "仅支持上传zip格式的shp压缩包,json(或geojson)格式的数据"
+        );
+      }
+
+      // if (!(isZip || isShp)) {
+      //   this.$message.error("只能上传zip、shp格式!");
+      //   this.abortLoad(); //因为手动上传，所以这里是取消上传
+      //   return false;
+      // } else {
+      //   isZip ? this.openZip(file) : this.readGeojson(file);
+      // }
+    },
+    openZip(data) {
+      let newZip = new JsZip();
+      newZip
+        .loadAsync(data, {
+          decodeFileName: function (bytes) {
+            return iconv.decode(bytes, "gbk"); // 按中文编码
+          },
+        })
+        .then((file) => {
+          // 压缩包里的内容file,files
+          const fileList = Object.keys(file.files);
+          const pattern = new RegExp(/\S\.shp$/);
+          const attrPattern = new RegExp(/\S\.dbf$/);
+          this.shpFile = fileList.find((i) => pattern.test(i));
+          this.shpFileAttributes = fileList.find((i) => attrPattern.test(i));
+          // 此处是压缩包中的shp文件,arraybuffer(此时在回调的参数中已经可以获取到上传的zip压缩包下的所有文件)
+          newZip
+            .file(this.shpFile)
+            .async("arraybuffer")
+            .then((geoContent) => {
+              let geometryInfo = geoContent;
+              newZip
+                .file(this.shpFileAttributes)
+                .async("arraybuffer")
+                .then((attrContent) => {
+                  // 文件中的内容
+                  this.shapefileOpen(geometryInfo, attrContent);
+                });
+            })
+            .catch((err) => {
+              // 是否是合法的zip包，解决rar包改后缀zip
+              console.log(err);
+              this.$message.error("请上传正确格式的文件!");
+            });
+          // zip.forEach((path, zipEntry) => {
+          //   console.log(zipEntry.name); // 输出不乱码中文
+          // });
+        });
+    },
+    // 为zip时，读取压缩包，选取shp文件
+    // 读取geojson数据
+    readGeojson(data) {
+      debugger;
+      const reader = new FileReader();
+      // reader.readAsText(data.raw,"UTF-8")
+      reader.readAsArrayBuffer(data);
+      reader.onload = (e) => {
+        let a = e.target.result;
+        this.geojsonFileOpen(this.result);
+      };
+    },
+    // 解析geojson格式的数据
+    geojsonFileOpen(content) {},
+    // 解析.shp或.dbf文件
+    shapefileOpen(geoContent, attrContent) {
+      let options = {
+        encoding: "utf8",
+      };
+      let shpDataList = [];
+
+      // 读取几何信息
+      open(geoContent, attrContent, options)
+        .then((source) =>
+          source.read().then(function log(result) {
+            if (result.done) return;
+            shpDataList.push(result.value);
+            return source.read().then(log);
+          })
+        )
+        .catch((error) => console.error(error.stack));
+
+      console.log(shpDataList, "读取到的shp数据");
+    },
+    /**
+     * 上海2000高斯投影坐标转上海2000经纬度坐标
+     */
+    latLngsTransform(latlngsAry) {
+      // 深拷贝
+      var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
+      if (typeof tempLatlngsAry[0] === "number") {
+        if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
+          tempLatlngsAry = coordinate.shcj_to_wgs84(
+            tempLatlngsAry[0],
+            tempLatlngsAry[1]
+          );
+          tempLatlngsAry = [
+            tempLatlngsAry[0] - 0.19195,
+            tempLatlngsAry[1] + 0.00011,
+          ];
+
+          return tempLatlngsAry;
+        }
+        if (tempLatlngsAry.length === 3) {
+          tempLatlngsAry = coordinate.shcj_to_wgs84(
+            tempLatlngsAry[0],
+            tempLatlngsAry[1]
+          );
+          tempLatlngsAry = [
+            tempLatlngsAry[0] - 0.19195,
+            tempLatlngsAry[1] + 0.00011,
+          ];
+          return tempLatlngsAry;
+        }
+      } else {
+        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
+          tempLatlngsAry[i] = latLngsTransform(tempLatlngsAry[i]);
+        }
+      }
+      return tempLatlngsAry;
+    },
+    // 上传数据表单提交
+    // subMitDialogVisible() {
+    //   let fileDataList = this.fileDataList;
+    //   for (let key in fileDataList) {
+    //     const dataJson = JSON.parse(fileDataList[key]);
+    //     this.uploadRENDER(dataJson);
+    //   }
+    //   setTimeout(() => {
+    //     if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
+    //       this.$message.success("数据上传成功!");
+    //       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();
+    // },
+    // 文件列表移除文件时
+    // handleRemove(file, fileList) {
+    //   this.fileList = fileList;
+    //   delete this.fileDataList[file.uid];
+    // },
+    // 点击文件列表中已上传的文件时
+    // handlePreview(file) {},
+    // 文件超出个数限制时
+    // handleExceed(files, fileList) {
+    // this.$message.warning(
+    //   `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+    //     files.length + fileList.length
+    //   } 个文件`
+    // );
+    // },
+    // 删除文件之前
+    // beforeRemove(file, fileList) {
+    //   this.$message.success(`文件${file.name}移除成功！`);
+    //   return true;
+    // },
+    // 文件上传成功时
+    // handleSuccess(response, file, fileList) {
+    //   this.getActionData(file);
+    // },
+    // 根据上传的文件渲染到地图中
+    // uploadRENDER(geoJson) {
+    //   // 呈现数据已经成功
+    //   let firstPolygon = JSON.parse(JSON.stringify(geoJson));
+    //   // let uniqueId = firstPolygon.name;
+    //   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"] = [];
+    //     }
+
+    //     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) {
+    //   const __this = this;
+    //   var reader = new FileReader(); // 新建一个FileReader
+    //   reader.readAsText(file.raw, "UTF-8"); // 读取文件
+    //   reader.onload = function (evt) {
+    //     __this.fileList.push(file);
+    //     __this.fileDataList[file.uid] = evt.target.result;
+    //   };
+    // },
+    // 上传文件之前
+    // beforeAvatarUpload(file) {
+    //   const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
+    //   const isLt5M = file.size / 1024 / 1024 < 5;
+    //   if (!isJPG) {
+    //     this.$message.error("仅支持Geojson格式文件!");
+    //   }
+    //   if (!isLt5M) {
+    //     this.$message.error("上传文件大小不能超过 5MB!");
+    //   }
+    //   return isJPG && isLt5M;
+    // },
+  },
+  watch: {},
+};
+</script>
+<style lang="less" scoped>
+#uploadingBox {
+  display: flex;
+  .el-upload *:not(em) {
+    color: #f2f6fc;
+  }
+  .el-upload__tip {
+    color: #c0c4cc;
+  }
+}
+</style>

src/components/map/Map.vue

@@ -9,7 +9,7 @@ export default {
     return {
       map: "",
       layers: "",
-      polygon: []
+      polygon: [],
     };
   },
   mounted() {
@@ -17,14 +17,14 @@ export default {
     this.$nextTick(() => {
       this.mapInit();
       let that = this;
-      this.map.on("move", e => {
+      this.map.on("move", (e) => {
         if (that.index == that.mouseIndex) {
           let center = that.map.getCenter();
           let zoom = that.map.getZoom();
           this.$emit("changeCenterZoom", {
             center: [center.lat, center.lng],
             zoom: zoom,
-            index: that.index
+            index: that.index,
           });
         }
       });
@@ -36,47 +36,65 @@ export default {
     addSinglePolygon(state) {
       this.$nextTick(() => {
         if (!state && this.polygon) {
-          this.polygon.forEach(item => {
+          this.polygon.forEach((item) => {
             this.map.removeLayer(item);
           });
           this.addSinglePolygon(true);
-        } else if (this.$store.state.selectSelectDataMap && this.$store.state.selectSelectDataMap.singlePolygon) {
-          for (let item in this.$store.state.selectSelectDataMap.singlePolygon) {
-            this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(v => {
-              console.log("map>:v", v);
-              // 叠置分析后的图层
-              if (v.uniqueId.indexOf("overlay") > -1) {
-                let geometry = JSON.parse(v.geometry);
-                this.readGeojson(geometry, v.color);
-              } else {
-                // 常规图层
-                let geometry = v.geometry;
-                // 经纬度等上海2000转为经纬度坐标后再重新修改
-                let coord = JSON.parse(geometry).geometry.coordinates[0];
-                let coordinates = publicFun.latLngsToReverse(coord);
-                let polygon = L.polygon(coordinates, {
-                  color: v.color,
-                  weight: 3,
-                  fillColor: v.color,
-                  opacity: 1,
-                  fillOpacity: 0
-                }).addTo(this.map);
-                this.polygon.push(polygon);
-              }
-            });
+        } else if (
+          this.$store.state.selectSelectDataMap &&
+          this.$store.state.selectSelectDataMap.singlePolygon
+        ) {
+          for (let item in this.$store.state.selectSelectDataMap
+            .singlePolygon) {
+            // 如果是叠置分析的图层处理方式
+            if (
+              this.$store.state.selectSelectDataMap.singlePolygon[
+                item
+              ][0].uniqueId.indexOf("overlay") > -1
+            ) {
+              let uniqueId =
+                this.$store.state.selectSelectDataMap.singlePolygon[item][0]
+                  .uniqueId;
+              let color =
+                this.$store.state.selectSelectDataMap.singlePolygon[item][0]
+                  .color;
+              let statesArr =
+                this.$store.state.selectSelectDataMap.singlePolygon[item].map(
+                  (v) => {
+                    return JSON.parse(v.geometry);
+                  }
+                );
+              this.readGeojson(statesArr, color);
+            } else {
+              // 非叠置分析图层的处理方式
+              this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(
+                (v) => {
+                  let geometry = v.geometry;
+                  let coord = JSON.parse(geometry).geometry.coordinates[0];
+                  // 经纬度顺序转换
+                  let coordinates = publicFun.latLngsToReverse(coord);
+                  let polygon = L.polygon(coordinates, {
+                    color: v.color,
+                    weight: 3,
+                    fillColor: v.color,
+                    opacity: 1,
+                    fillOpacity: 0,
+                  }).addTo(this.map);
+                  this.polygon.push(polygon);
+                }
+              );
+            }
           }
         }
       });
     },
     //geojson直接读取的坐标顺序是经纬度
-    readGeojson(geojson, color) {
-      // 尽量与所有图层，预设模型读取几何数据的方式一样，
-      let states = [];
-      states.push(geojson);
-      let geojsonData = L.geoJSON(states, {
+    // 明天测试一下对不对
+    readGeojson(geojsonArr, color) {
+      let geojsonData = L.geoJSON(geojsonArr, {
         style: function (feature) {
           return { color: color };
-        }
+        },
       }).addTo(this.map);
       this.polygon.push(geojsonData);
     },
@@ -86,12 +104,14 @@ export default {
         "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=0 +y_0=-3457147.81 +ellps=krass +units=m +no_defs",
         {
           resolutions: [
-            132.2919312505292, 52.91677250021167, 26.458386250105836, 13.229193125052918, 5.291677250021167, 2.6458386250105836,
-            1.3229193125052918, 0.5291677250021167, 0.26458386250105836, 0.13229193125052918, 0.0529167725002, 0.0264583862501,
-            0.0132291931251, 0.00529167725, 0.002645838625, 0.0013229193125
+            132.2919312505292, 52.91677250021167, 26.458386250105836,
+            13.229193125052918, 5.291677250021167, 2.6458386250105836,
+            1.3229193125052918, 0.5291677250021167, 0.26458386250105836,
+            0.13229193125052918, 0.0529167725002, 0.0264583862501,
+            0.0132291931251, 0.00529167725, 0.002645838625, 0.0013229193125,
           ],
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000])
+          bounds: L.bounds([-65000, -76000], [75000, 72000]),
         }
       );
       this.map = L.map(this.$refs.map, {
@@ -100,11 +120,13 @@ export default {
         minZoom: 0,
         maxZoom: 14,
         attributionControl: false,
-        zoomControl: false
+        zoomControl: false,
       }).setView(map2DViewer.map.getCenter(), map2DViewer.map.getZoom());
 
       //添加默认图层
-      let layer = this.$store.state.mapMethodsCollection.get("RENDER").addTiledMapLayer(this.mapUrl);
+      let layer = this.$store.state.mapMethodsCollection
+        .get("RENDER")
+        .addTiledMapLayer(this.mapUrl);
       this.layers = layer;
     },
     setView: function (coord, zoom) {
@@ -118,12 +140,15 @@ export default {
       this.$nextTick(() => {
         if (this.map) {
           this.map.removeLayer(this.layers);
-          let layer = this.$store.state.mapMethodsCollection.get("RENDER").addTiledMapLayer(this.mapUrl).addTo(this.map);
+          let layer = this.$store.state.mapMethodsCollection
+            .get("RENDER")
+            .addTiledMapLayer(this.mapUrl)
+            .addTo(this.map);
           this.layers = layer;
           this.map.invalidateSize(true);
         }
       });
-    }
+    },
   },
   watch: {
     centerZoom: {
@@ -132,7 +157,7 @@ export default {
           this.setView(newValue.center, newValue.zoom);
         }
       },
-      deep: true
+      deep: true,
     },
     centerZoomInit: {
       handler(newValue, oldValue) {
@@ -141,9 +166,9 @@ export default {
           this.map.setView(center, newValue.zoom);
         }
       },
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
 };
 </script>
 <style scoped>

src/components/map/MapHolder.vue

@@ -930,7 +930,6 @@ export default {
     },
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      console.log(layer, "layer");
       map2DViewer.polygons[layer].forEach((polygon) => {
         map2DViewer.map.removeLayer(polygon);
       });

src/utils/publicFunction.js

@@ -176,10 +176,10 @@ const generateGeoJSON = (title, desc, featureType, coords, geoName) => {
  *
  * 应用于叠置分析
  */
-const standardGeojson = (coordinates, type) => {
+const standardGeojson = (coordinates, properties) => {
   let data = {
     type: "Feature",
-    properties: { type: type },
+    properties: properties,
     geometry: {
       type: "Polygon",
       coordinates: coordinates,
@@ -237,7 +237,6 @@ let group = (arr, field) => {
   });
   return map;
 };
-
 /**
  * 多维数组偏移调整
  */

src/utils/request.js

@@ -6,7 +6,7 @@ import { VueAxios } from "./axios";
 // 创建 axios 实例
 const service = axios.create({
   // baseURL: 'http://121.43.55.7:8888',
-  timeout: 80000, // 请求超时时间,
+  timeout: 800000000, // 请求超时时间,
   headers: {
     "Content-Type": "application/form-data",
   },

src/views/ComprehensiveAnalysis.vue

@@ -943,6 +943,15 @@ export default {
         return JSON.stringify(targetGeometry);
       }
     },
+    overlayStandardGeojson(data) {
+      if (data) {
+        let geojson = {
+          type: "Feature",
+          geometry: data,
+        };
+        return geojson;
+      }
+    },
     // 获取预设模型图层构成接口数据
     getPreLayerApi() {
       let params = new FormData();
@@ -2016,60 +2025,58 @@ export default {
         if (data.c_dzfx_file) {
           this.$Get(this.uploadBaseUrl + data.c_dzfx_file, "").then(
             (response) => {
-              if (response.features.length > 0) {
-                let condition = response.features[0].geometry.coordinates.every(
-                  (coord) => coord.length == 0
-                );
-                if (condition) {
-                  this.$message.info("未发现叠置的几何体！");
-                } else {
-                  if (map2DViewer.analysisGroups[uniqueId]) {
-                    let uniqueIdList = [];
-                    if (
+              if (response.geometries.length === 0) {
+                this.$message.info("未发现叠置的几何体！");
+              }
+              if (response.geometries.length > 0) {
+                if (map2DViewer.analysisGroups[uniqueId]) {
+                  let uniqueIdList = [];
+                  if (
+                    this.$store.state.selectSelectDataMap["singlePolygon"][
+                      uniqueId
+                    ]
+                  ) {
+                    uniqueIdList =
                       this.$store.state.selectSelectDataMap["singlePolygon"][
                         uniqueId
-                      ]
-                    ) {
-                      uniqueIdList =
-                        this.$store.state.selectSelectDataMap["singlePolygon"][
-                          uniqueId
-                        ];
-                    }
+                      ];
+                  }
+
+                  // 生成图例时设置初始化图层颜色 -- 叠置分析的图层
+                  this.setLayerLegend(`叠置-${uniqueId}`, uniqueId);
+
+                  // 清除当前图层组内所有图层，并读取GeoJSON数据
+                  map2DViewer.analysisGroups[uniqueId].clearLayers();
+                  // 叠置分析图斑数统计
 
-                    // 生成图例时设置初始化图层颜色 -- 叠置分析的图层
-                    this.setLayerLegend(`叠置-${uniqueId}`, uniqueId);
-
-                    // 清除当前图层组内所有图层，并读取GeoJSON数据
-                    map2DViewer.analysisGroups[uniqueId].clearLayers();
-                    // 叠置分析图斑数统计
-                    this.targetLayerTotal[uniqueId] = response.features.length;
-                    this.currentTotal += response.features.length;
-
-                    response.features.forEach((v) => {
-                      // 存储叠置分析的图层 -- 以便同屏对比时显示
-                      let coord = v.geometry.coordinates;
-                      let coordinates = publicFun.latLngsToReverse(coord);
-                      coordinates = publicFun.latLngsToReverse(coordinates);
-                      let geojson = publicFun.standardGeojson(coordinates);
+                  this.targetLayerTotal[uniqueId] = response.geometries.length;
+                  this.currentTotal += response.geometries.length;
+                  // 存储请求到的疑点数据
+                  this.originalDataMap.set(uniqueId, response.geometries);
+
+                  // 存储叠置分析中所有的面
+                  let statesArr = [];
+                  let color = this.collectColorMap.get(
+                    this.collectColorMapIndex
+                  );
+                  response.geometries.forEach((v) => {
+                    if (v.type != "" && v.coordinates.length > 0) {
+                      let geoData = this.overlayStandardGeojson(v);
                       let singlePolygonItem = {
                         uniqueId: `overlay_${uniqueId}`,
-                        geometry: JSON.stringify(geojson),
+                        geometry: JSON.stringify(geoData),
                         cid: publicFun.buildGuid(data.label),
-                        color: this.collectColorMap.get(
-                          this.collectColorMapIndex
-                        ),
+                        color: color,
                       };
                       uniqueIdList.push(singlePolygonItem);
                       this.$store.state.selectSelectDataMap["singlePolygon"][
                         uniqueId
                       ] = uniqueIdList;
-                      this.readGeojson(
-                        geojson,
-                        data.id,
-                        this.collectColorMap.get(this.collectColorMapIndex)
-                      );
-                    });
-                  }
+                      statesArr.push(geoData);
+                    }
+                  });
+
+                  this.readGeojson(statesArr, data.id, color);
                 }
               }
             }
@@ -2188,20 +2195,17 @@ export default {
       }
     },
     // geojson直接读取的坐标顺序是经纬度
-    readGeojson(geojson, uniqueId, color) {
-      // 尽量与所有图层，预设模型读取几何数据的方式一样，
-      let states = [];
-      states.push(geojson);
-      let geojsonData = L.geoJSON(states, {
+    readGeojson(geojsonArr, uniqueId, color) {
+      let geojsonData = L.geoJSON(geojsonArr, {
         style: function (feature) {
           return { color: color };
-          // console.log(feature);
         },
       }).addTo(map2DViewer.map);
       map2DViewer.analysisGroups[uniqueId] = geojsonData;
     },
     // 我的模型图层取消勾选
     deleteMyModelData(data) {
+      console.log(data.id);
       // 直接删除图层组中的数据
       if (map2DViewer.analysisGroups[data.id]) {
         map2DViewer.map.removeLayer(map2DViewer.analysisGroups[data.id]);
@@ -2285,7 +2289,7 @@ export default {
         this.boxHeight = "600";
         if (data.c_content) {
           let obj = JSON.parse(data.c_content).properties;
-          console.log(obj);
+    
           this.tableData.push(obj);
         }
       }
@@ -2351,7 +2355,7 @@ export default {
           geojson.properties.title = selectType;
           geojson.properties.desc = desContent;
           geojson.properties.name = nameInput;
-          console.log(geojson, "修改后的geojson数据");
+
           params = {
             userId: Number(localStorage.getItem("USER_ID")),
             sourceId: 0,
@@ -2362,7 +2366,7 @@ export default {
           this.$Post(this.urlsCollection.updateConllection, params).then(
             (res) => {
               if (res.code === 200) {
-                // console.log("修改成功", res);
+               
                 this.updateCasePopupShow = false;
                 this.getUserMarkers();
                 this.$message.success("修改成功！");