所有图层数据读取方式

src/components/common/BottomForm/CustomModelDialog.vue

@@ -638,6 +638,7 @@ export default {
     },
     // 执行叠置分析
     executeOverlay() {
+      debugger;
       this.overlayBtnChecked = !this.overlayBtnChecked;
       if (this.overlayBtnChecked && !this.forbidOverlayBtn) {
         // 进行叠置分析后，叠置分析结果会自动保存

src/components/map/MapHolder.vue

@@ -169,11 +169,26 @@ export default {
      * @sourceType
      */
     createNormalDiv(str, geojsonData, sourceType) {
-      debugger;
-      let currentInnerHtml = this.$refs.normalRef.$el.innerHTML;
+      let geoProperties = JSON.parse(geojsonData).properties;
       // 搜索geojson数据中的固定字段 -- 镇域名称，面积，土地类型，图斑编号
-      // this.$refs.normalRef.tableObj = geojsonData;
+      this.$refs.normalRef.tableObj["面积"] = geoProperties["面积"] || "--";
+      this.$refs.normalRef.tableObj["镇域名称"] =
+        geoProperties["镇域名称"] || "--";
+      this.$refs.normalRef.tableObj["土地类型"] =
+        geoProperties["土地类型"] || "--";
+      this.$refs.normalRef.tableObj["图斑编号"] =
+        geoProperties["图斑编号"] || "--";
+      let currentInnerHtml = this.$refs.normalRef.$el.innerHTML;
+      // 需要重新绘制的属性obj
+      let targetObj = {
+        镇域名称: geoProperties["镇域名称"] || "--",
+        面积: geoProperties["面积"] || "--",
+        土地类型: geoProperties["土地类型"] || "--",
+        图斑编号: geoProperties["图斑编号"] || "--",
+      };
+
       if (currentInnerHtml) {
+        debugger;
         let div = document.createElement("div");
         div.id = str + "_id";
         div.className = "case-audit";
@@ -184,6 +199,20 @@ export default {
           $(() => {
             // 法律法规点击事件
             if ($(`#${str}_id a`)) {
+              // 属性框内容
+              if ($(".center-table-item-normal")) {
+                $(".center-table-item-normal .leftcell").each(
+                  (index, domEle) => {
+                    $(".center-table-item-normal .leftcell")
+                      .eq(index)
+                      .text(Object.keys(targetObj)[index]);
+                    $(".center-table-item-normal .rightcell")
+                      .eq(index)
+                      .text(Object.values(targetObj)[index]);
+                  }
+                );
+              }
+
               $(`#${str}_id a`)
                 .eq(0)
                 .click((e) => {
@@ -220,8 +249,22 @@ export default {
     createAuditDiv(str, geojsonData, sourceType) {
       // 根据ref获取组件的dom元素
       this.currentHtml = this.$refs.auditRef.$el.innerHTML;
+      let geoProperties = JSON.parse(geojsonData).properties;
       // 搜索geojson数据中的固定字段 -- 镇域名称，面积，土地类型，图斑编号
-      // this.$refs.auditRef.tableObj = JSON.parse(geojsonData).properties;
+      this.$refs.auditRef.tableObj["面积"] = geoProperties["面积"] || "--";
+      this.$refs.auditRef.tableObj["镇域名称"] =
+        geoProperties["镇域名称"] || "--";
+      this.$refs.auditRef.tableObj["图层构成"] =
+        geoProperties["图层构成"] || "--";
+      this.$refs.auditRef.tableObj["性质"] = geoProperties["性质"] || "--";
+
+      // 需要重新绘制的属性obj
+      let targetObj = {
+        镇域名称: geoProperties["镇域名称"] || "--",
+        面积: geoProperties["面积"] || "--",
+        图层构成: geoProperties["图层构成"] || "--",
+        性质: geoProperties["性质"] || "--",
+      };
       if (this.currentHtml) {
         let div = document.createElement("div");
         div.id = str + "_id";
@@ -229,6 +272,30 @@ export default {
         // 动态创建div后赋值模板样式
         div.innerHTML = this.currentHtml;
         $(() => {
+          // 属性框内容
+          if ($(".center-table-item-normal")) {
+            $(".center-table-item-normal .leftcell").each((index, domEle) => {
+              $(".center-table-item-normal .leftcell")
+                .eq(index)
+                .text(Object.keys(targetObj)[index]);
+              $(".center-table-item-normal .rightcell")
+                .eq(index)
+                .text(Object.values(targetObj)[index]);
+            });
+          }
+
+          if ($(".center-table-item-special")) {
+            $(".center-table-item-special .leftcell").each((index, domEle) => {
+              $(".center-table-item-speciall .leftcell")
+                .eq(index)
+                .text(Object.keys(targetObj)[index]);
+              $(".center-table-item-special .rightcell")
+                .eq(index)
+                .text(Object.values(targetObj)[index]);
+            });
+          }
+
+          // 下拉框内容
           if ($(`#${str}_id .center-table-item-special select`)) {
             if (this.caseStatusMap.has(str)) {
               $(`#${str}_id .center-table-item-special select`).val(

src/utils/publicFunction.js

@@ -73,11 +73,11 @@ const getRandomColor = function () {
 };
 
 /**
-     * 生成随机色
-     * rootNumber 色彩基数 默认200
-     * colorsNumber 跳跃基数 默认16
-     * forLength 避免死循环（限制迭代次数）
-     */
+ * 生成随机色
+ * rootNumber 色彩基数 默认200
+ * colorsNumber 跳跃基数 默认16
+ * forLength 避免死循环（限制迭代次数）
+ */
 const getRGBColor = (rootNumber, colorsNumber) => {
   // if (forLength < 10) {
   forLength++;
@@ -96,9 +96,15 @@ const getRGBColor = (rootNumber, colorsNumber) => {
   }
   rgbColor.forEach((item, index) => {
     if (index === 0) {
-      rgbColorStr += _rootNumber + Math.round((Math.random() * (255 - _rootNumber)) / _colorsNumber) * _colorsNumber;
+      rgbColorStr +=
+        _rootNumber +
+        Math.round((Math.random() * (255 - _rootNumber)) / _colorsNumber) *
+          _colorsNumber;
     } else {
-      let rgbColor = _rootNumber + Math.round((Math.random() * (255 - _rootNumber)) / _colorsNumber) * _colorsNumber;
+      let rgbColor =
+        _rootNumber +
+        Math.round((Math.random() * (255 - _rootNumber)) / _colorsNumber) *
+          _colorsNumber;
       rgbColorStr += "," + rgbColor;
     }
   });
@@ -113,7 +119,7 @@ const getRGBColor = (rootNumber, colorsNumber) => {
   // } else {
   //   this.$message.info("getColors 请重试!");
   // }
-}
+};
 
 /**
  * 获取geoJSON格式的数据 -- 目前仅供标记疑点相关内容使用(圆也存为面);
@@ -239,7 +245,13 @@ let latLngsToReverse = (latlngsAry) => {
   // 深拷贝
   var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
   if (typeof tempLatlngsAry[0] === "number") {
-    return tempLatlngsAry.reverse();
+    if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
+      return tempLatlngsAry.reverse();
+    }
+    if (tempLatlngsAry.length === 3) {
+      tempLatlngsAry = tempLatlngsAry.slice(0, 2);
+      return tempLatlngsAry.reverse();
+    }
   } else {
     for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
       tempLatlngsAry[i] = latLngsToReverse(tempLatlngsAry[i]);
@@ -258,5 +270,5 @@ export default {
   standardGeojson,
   convertTree,
   latLngsToReverse,
-  getRGBColor
+  getRGBColor,
 };

src/views/ComprehensiveAnalysis.vue

@@ -287,6 +287,8 @@ export default {
   },
   data() {
     return {
+      targetLayerPage: {},
+      targetLayerTotal: {},
       currentTotal: 0,
       layerLoading: false,
       expandedKeys: [],
@@ -630,6 +632,11 @@ export default {
     // 清除页面所有数据
     clearAllData() {
       this.currentTotal = 0;
+      this.paginationData.total = 0;
+      this.targetLayerTotal = {};
+      this.targetLayerPage = {};
+      this.originalDataMap.clear();
+      this.originalData = {};
       map2DViewer.map.off("move");
       // 所有图层或预设模型全部删除
       if (Object.getOwnPropertyNames(map2DViewer.analysisGroups).length > 0) {
@@ -682,132 +689,119 @@ export default {
         );
       }
     },
-    /**
-     * 获取图层信息 -- 所有模型和预设模型
-     * @columnId
-     * @id label_columnId
-     * @mainType  所有图层/预设模型
-     * @sourceType 土地资源/林地资源/生态资源/水资源/全部
-     */
-    displaySingleLayer(columnId, id, mainType, sourceType) {
-      debugger;
-      let uniqueId = id;
-      this.layerIdMap.set(uniqueId, uniqueId);
-      // 图例
-      this.legendTitle.push({
-        name: uniqueId,
-        info: uniqueId,
-      });
-      this.legendIcon.push({
-        name: uniqueId,
-        background: "transparent",
-        border: `1px solid ${this.randomColor.get(uniqueId)}`,
-      });
-      // 图层未初始化
-      if (!map2DViewer.analysisGroups[uniqueId]) {
-        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
-        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
-        if (!this.layerLoading) {
-          this.layerLoading = true;
-        }
-        // console.log(columnId, "columnId");
-        let layerParams = new FormData();
-        layerParams = {
-          columnId: columnId,
-          states: "0,1,2,3",
-          pageSize: 500,
-          page: 0,
-        };
-
-        this.$Post(this.urlsCollection.selectContentList, layerParams).then(
-          (res) => {
-            if (res.code === 202 && res.content === "数据不存在") {
-              this.layerLoading = false;
+    getMapData(uniqueId, columnId, mainType, sourceType) {
+      let layerParams = new FormData();
+      layerParams = {
+        columnId: columnId,
+        states: "0,1,2,3",
+        pageSize: 500,
+        page: this.targetLayerPage[uniqueId],
+      };
+      this.$Post(this.urlsCollection.selectContentList, layerParams).then(
+        (res) => {
+          if (res.code === 202 && res.content === "数据不存在") {
+            this.layerLoading = false;
+            // 初始化请求 page为0时，提示无数据
+            if (this.targetLayerPage[uniqueId] === 0) {
               this.$message.info("暂无数据!");
             }
-            if (res.code === 200) {
-              this.layerLoading = false;
+          }
+
+          if (res.code === 200) {
+            this.layerLoading = false;
+          }
+
+          if (res.code === 200 && res.content.data.length > 0) {
+            if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
+              this.$store.state.selectSelectDataMap["singlePolygon"] = [];
             }
-            if (res.code === 200 && res.content.data.length > 0) {
-              console.log(res.content.count, "count");
-              // this.paginationData.currentPage = 1;
-              this.paginationData.total = res.content.data.length;
 
-              if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
-                this.$store.state.selectSelectDataMap["singlePolygon"] = [];
-              }
-              // 存储请求到的疑点数据
+            // 存储请求到的疑点数据
+            if (!this.originalDataMap.has(uniqueId)) {
               this.originalDataMap.set(uniqueId, res.content.data);
+            } else {
+              let arr = this.originalDataMap
+                .get(uniqueId)
+                .concat(res.content.data);
+              this.originalDataMap.set(uniqueId, arr);
+            }
+
+            // 该图层疑点总数
+            this.targetLayerTotal[uniqueId] = res.content.count;
+
+            // 分页组件total
+            this.paginationData.total =
+              this.originalDataMap.get(uniqueId).length;
+
+            // 当前图层id存在
+            if (
+              map2DViewer.analysisGroups[uniqueId] &&
+              this.originalDataMap.get(uniqueId).length > 0 &&
+              res.content.data.length > 0
+            ) {
+              // 统计所有图斑数
+              this.currentTotal += res.content.data.length;
+              // 请求到数据后直接渲染点
+              res.content.data.forEach((ele) => {
+                let cid = ele.id;
+                let geometry = ele.c_content;
+
+                this.$store.state.mapMethodsCollection
+                  .get("RENDER")
+                  .addSinglePolygon(
+                    geometry,
+                    cid,
+                    this.randomColor.get(uniqueId),
+                    uniqueId,
+                    mainType,
+                    sourceType
+                  );
+              });
 
+              // 所有图层可视化数据 -- 需要分页展示
               if (mainType === "所有图层") {
                 // 激活当前展开面板
                 this.activeNames = ["myLabel", uniqueId];
-                this.originalData[uniqueId] = res.content.data.map((ele) => {
-                  let cid = ele.id;
-                  let geometry = ele.c_content;
-
-                  this.$store.state.mapMethodsCollection
-                    .get("RENDER")
-                    .addSinglePolygon(
-                      geometry,
-                      cid,
-                      this.randomColor.get(uniqueId),
-                      uniqueId,
-                      mainType,
-                      sourceType
-                    );
+                // 用于分页数据
+                this.originalData[uniqueId] = this.originalDataMap
+                  .get(uniqueId)
+                  .map((ele) => {
+                    return {
+                      id: ele.id,
+                      // "垃圾堆放点"
+                      column_name: ele.column_name,
+                      // 是否疑点
+                      c_boolean: ele.c_boolean ? "是" : "否",
+                      // 行政区划
+                      c_xzqh: ele.c_xzqh,
+                      // 空间信息
+                      c_content: ele.c_content,
+                      // 疑点修改时间
+                      c_date_time: ele.c_date_time,
+                      // 修改人员名称
+                      // c_editor_name: ele.c_editor_name,
+                      // 标题
+                      title: ele.title,
+                      column_id: ele.column_id,
+                      content: ele.content,
+                      secret_level: ele.secret_level,
+                    };
+                  });
 
-                  return {
-                    id: ele.id,
-                    // "垃圾堆放点"
-                    column_name: ele.column_name,
-                    // 是否疑点
-                    c_boolean: ele.c_boolean ? "是" : "否",
-                    // 行政区划
-                    c_xzqh: ele.c_xzqh,
-                    // 空间信息
-                    c_content: ele.c_content,
-                    // 疑点修改时间
-                    c_date_time: ele.c_date_time,
-                    // 修改人员名称
-                    // c_editor_name: ele.c_editor_name,
-                    // 标题
-                    title: ele.title,
-                    column_id: ele.column_id,
-                    content: ele.content,
-                    secret_level: ele.secret_level,
-                  };
-                });
                 // 进行分页列表展示
                 this.changeSingleLayer(
                   1,
                   this.currentPageSize,
                   columnId,
-                  id,
+                  uniqueId,
                   mainType,
                   sourceType
                 );
               }
 
-              if (
-                mainType === "预设模型" &&
-                this.originalDataMap.get(uniqueId).length > 0
-              ) {
+              // 预设模型可视化数据 -- 不需要分页展示
+              if (mainType === "预设模型") {
                 this.originalDataMap.get(uniqueId).map((ele) => {
-                  let cid = ele.id;
-                  let geometry = ele.c_content;
-
-                  this.$store.state.mapMethodsCollection
-                    .get("RENDER")
-                    .addSinglePolygon(
-                      geometry,
-                      cid,
-                      this.randomColor.get(uniqueId),
-                      uniqueId,
-                      mainType,
-                      sourceType
-                    );
-
                   return {
                     id: ele.id,
                     // "垃圾堆放点"
@@ -831,67 +825,56 @@ export default {
                 });
               }
 
-              this.currentTotal += this.originalDataMap.get(uniqueId).length;
-              // console.log(
-              //   "target",
-              //   this.currentPageSize,
-              //   columnId,
-              //   id,
-              //   mainType,
-              //   sourceType
-              // );
+              // 当前图斑数小于数据库中的图斑总数时，递归请求图斑
+              if (
+                this.originalDataMap.get(uniqueId).length <=
+                this.targetLayerTotal[uniqueId]
+              ) {
+                this.targetLayerPage[uniqueId]++;
+                this.getMapData(uniqueId, columnId, mainType, sourceType);
+              }
             }
-          },
-          (error) => {
-            this.layerLoading = false;
-            this.$message.error("请求错误");
           }
-        );
-      }
-
-      // 图层已初始化
-      // if (
-      //   map2DViewer.analysisGroups[uniqueId] &&
-      //   !map2DViewer.map.hasLayer(map2DViewer.analysisGroups[uniqueId])
-      // ) {
-      //   map2DViewer.map.addLayer(map2DViewer.analysisGroups[uniqueId]);
-
-      //   if (mainType === "所有图层") {
-      //     this.originalData[uniqueId] = [];
-      //     // 激活当前展开面板
-      //     this.activeNames = ["myLabel", uniqueId];
-      //     // 已经请求过接口无需二次请求
-      //     if (this.originalDataMap.get(uniqueId).length > 0) {
-      //       this.originalData[uniqueId] = this.originalDataMap
-      //         .get(uniqueId)
-      //         .map((ele) => {
-      //           return {
-      //             id: ele.id,
-      //             column_name: ele.column_name,
-      //             // 是否疑点
-      //             c_boolean: ele.c_boolean ? "是" : "否",
-      //             // 行政区划
-      //             c_xzqh: ele.c_xzqh,
-      //             // 空间信息
-      //             c_content: ele.c_content,
-      //             // 疑点修改时间
-      //             c_date_time: ele.c_date_time,
-      //             // 修改人员名称
-      //             // c_editor_name: ele.c_editor_name,
-      //             // 标题
-      //             title: ele.title,
-      //             column_id: ele.column_id,
-      //             content: ele.content,
-      //             secret_level: ele.secret_level,
-      //           };
-      //         });
-      //     }
-      //   }
+        },
+        (error) => {
+          this.layerLoading = false;
+          if (this.targetLayerPage[uniqueId]) {
+            this.$message.error("请求错误!");
+          }
+        }
+      );
+    },
+    /**
+     * 获取图层信息 -- 所有模型和预设模型
+     * @columnId
+     * @id label_columnId
+     * @mainType  所有图层/预设模型
+     * @sourceType 土地资源/林地资源/生态资源/水资源/全部
+     */
+    displaySingleLayer(columnId, id, mainType, sourceType) {
+      let uniqueId = id;
+      this.layerIdMap.set(uniqueId, uniqueId);
 
-      //   if (this.originalDataMap.get(uniqueId).length > 0) {
-      //     this.currentTotal += this.originalDataMap.get(uniqueId).length;
-      //   }
-      // }
+      // 图层未初始化
+      if (!map2DViewer.analysisGroups[uniqueId]) {
+        // 图例
+        this.legendTitle.push({
+          name: uniqueId,
+          info: uniqueId,
+        });
+        this.legendIcon.push({
+          name: uniqueId,
+          background: "transparent",
+          border: `1px solid ${this.randomColor.get(uniqueId)}`,
+        });
+        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
+        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
+        this.targetLayerPage[uniqueId] = 0;
+        if (!this.layerLoading && this.targetLayerPage[uniqueId] === 0) {
+          this.layerLoading = true;
+        }
+        this.getMapData(uniqueId, columnId, mainType, sourceType);
+      }
     },
     /**
      * 切换页时改变图层数据
@@ -1264,7 +1247,6 @@ export default {
 
     // 节点change事件
     handleCheckChange(data, checked) {
-      debugger;
       if (data.mainType && data.mainType !== "我的模型") {
         if (checked) {
           this.showRightBox = true;
@@ -1363,14 +1345,15 @@ export default {
               data.id
             ];
           }
-          // if (this.originalData && this.originalData[data.id]) {
-          //   this.currentTotal -= this.originalDataMap[data.id].length;
-          //   delete this.originalData[data.id];
-          // }
 
           // 取消勾选当前图层勾选，图斑数改变， 如果是所有图层数据移除折叠面板
-          if (this.originalDataMap && this.originalDataMap.has(data.id)) {
+          if (
+            this.originalDataMap &&
+            this.originalDataMap.has(data.id) &&
+            this.currentTotal > 0
+          ) {
             this.currentTotal -= this.originalDataMap.get(data.id).length;
+            this.originalDataMap.delete(data.id);
 
             if (
               data.mainType === "所有图层" &&
@@ -1381,6 +1364,11 @@ export default {
             }
           }
 
+          // 统计后小于0改为0
+          if (this.currentTotal < 0) {
+            this.currentTotal = 0;
+          }
+
           map2DViewer.map.closePopup();
 
           // 移除图例
@@ -1408,6 +1396,7 @@ export default {
 
           // 移除图层id
           if (map2DViewer.analysisGroups[data.id]) {
+            delete this.targetLayerTotal[data.id];
             delete map2DViewer.analysisGroups[data.id];
           }
         }
@@ -1435,7 +1424,6 @@ export default {
         if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
           this.$store.state.selectSelectDataMap["singlePolygon"] = [];
         }
-        debugger;
 
         // 如果有叠置分析文件 -- 呈现叠置分析内容
         if (data.c_dzfx_file) {
@@ -1514,7 +1502,7 @@ export default {
       // }
     },
     readGeojson(geojson, uniqueId) {
-      debugger;
+      // debugger;
       // 尽量与所有图层，预设模型读取几何数据的方式一样，
       // let states = [];
       // states.push(geojson);