1. 叠置分析和我的模型查看功能测试；2. 同屏对比显示全部选中的疑点（以及叠置分析的疑点）; 3. 图例溢出字体调整

src/components/common/BottomForm/CustomModelDialog.vue

@@ -473,6 +473,7 @@ export default {
 
         // 转为树结构的数据格式
         let finalData = this.createTree(treeArr);
+
         this.createModelParams.c_layer_name = JSON.stringify(this.checkedList);
         this.createModelParams.c_bind_layer = JSON.stringify(finalData);
         let params = new FormData();
@@ -621,6 +622,7 @@ export default {
             }
           });
           let bindLayer = this.createTree(treeArr);
+          console.log(bindLayer);
           this.modifyModel("notOverlay", bindLayer);
         }
 
@@ -666,16 +668,6 @@ export default {
             this.modifyModel("alreadyOverlay", bindLayer);
           }
         });
-        // let bindLayer = newData.join(",");
-        // let tagretUrl = `${this.urlsCollection.overlayAnalysis}?modelId=${this.currentModifiedModelId}&bindLayer=${bindLayer}`;
-        // this.$Get(tagretUrl).then((res) => {
-        //   debugger
-        //   if (res.code === 200) {
-        //     let address = this.uploadBaseUrl + res.content;
-        //     this.displayOverlayGeometry(address);
-        //     this.modifyModel("alreadyOverlay", newData);
-        //   }
-        // });
       }
     },
   },

src/components/map/Legend.vue

@@ -40,7 +40,7 @@
             :key="item.name"
           >
             <div
-             slot="reference"
+              slot="reference"
               class="legend-title"
               :style="{
                 width:
@@ -154,6 +154,9 @@ export default {
       flex-direction: column;
       align-items: center;
       justify-content: space-evenly;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       .legend-title {
         // width: 50px;
         height: 20px;

src/components/map/Map.vue

@@ -47,27 +47,46 @@ export default {
           for (let item in this.$store.state.selectSelectDataMap
             .singlePolygon) {
             this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(
-              (item) => {
-                let geometry = item.geometry;
-                // 经纬度等上海2000转为经纬度坐标后再重新修改
-                let coord = JSON.parse(geometry).geometry.coordinates[0];
-                let correctCoord = publicFun.latLngsCorrection(coord);
-                let coordinates = publicFun.latLngsToReverse(correctCoord);
-                console.log(coord, correctCoord, coordinates);
-                let polygon = L.polygon(coordinates, {
-                  color: "#FF0000",
-                  weight: 3,
-                  fillColor: "#FF0000",
-                  opacity: 1,
-                  fillOpacity: 0,
-                }).addTo(this.map);
-                this.polygon.push(polygon);
+              (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 correctCoord = publicFun.latLngsCorrection(coord);
+                  let coordinates = publicFun.latLngsToReverse(correctCoord);
+                  console.log(coord, correctCoord, coordinates);
+                  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, {
+        style: function (feature) {
+          return { color: color };
+        },
+      }).addTo(this.map);
+      this.polygon.push(geojsonData);
+    },
     mapInit() {
       var crs = new L.Proj.CRS(
         "EPSG:0986",

src/components/map/MapHolder.vue

@@ -814,6 +814,7 @@ export default {
       modelId,
       columnId
     ) {
+      
       let uniqueIdList = [];
       if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
         uniqueIdList =
@@ -824,6 +825,7 @@ export default {
         uniqueId: uniqueId,
         geometry: geometry,
         cid: cid,
+        color:color
       };
       uniqueIdList.push(singlePolygonItem);
       this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =

src/views/ComprehensiveAnalysis.vue

@@ -442,6 +442,7 @@ export default {
   },
   data() {
     return {
+      displaySortSelect: false,
       basemapName: "",
       caseAuditEventStatus: false,
       satImgChecked: false,
@@ -1076,7 +1077,6 @@ export default {
     },
     panelMouseEnter(val) {
       if (this.rightPanelDataMap.has(val)) {
-        // 方便获取
         this.enteredPanelId = val;
         console.log(this.enteredPanelId, "enteredPanelId");
         this.enteredColumnId = this.rightPanelDataMap.get(val).id;
@@ -1097,7 +1097,6 @@ export default {
       );
     },
     getMapData(uniqueId, columnId, mainType, sourceType) {
-      console.log(uniqueId, "uniqueId");
       let layerParams = new FormData();
       layerParams = {
         columnId: columnId,
@@ -1281,7 +1280,6 @@ export default {
           name: uniqueId,
           info: uniqueId,
         });
-        console.log(this.collectColorMap.get(this.collectColorMapIndex));
         this.legendIcon.push({
           name: uniqueId,
           background: "transparent",
@@ -1307,14 +1305,7 @@ export default {
      * @mainType 所有图层/预设模型
      * @sourceType 土地资源，水资源，林地资源，全部
      */
-    changeSingleLayer(
-      val,
-      currentPageSize,
-      columnId,
-      id,
-      mainType,
-      sourceType
-    ) {
+    changeSingleLayer(val, currentPageSize, columnId, id) {
       let uniqueId = id;
       if (map2DViewer.analysisGroups[uniqueId]) {
         this.paginationData.currentPage = val;
@@ -1325,29 +1316,6 @@ export default {
           val * currentPageSize
         );
 
-        // this.originalData[uniqueId] = this.originalData[uniqueId].map((ele) => {
-        //   return {
-        //     id: ele.id,
-        //     column_name: ele.column_name,
-        //     // 是否疑点
-        //     c_boolean: targetBoolean,
-        //     // 行政区划
-        //     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,
-        //     mainType: mainType,
-        //   };
-        // });
-
         // 激活当前展开面板
         this.activeNames = ["myLabel", uniqueId];
       }
@@ -1565,7 +1533,7 @@ export default {
       params = {
         columnId: 49,
         states: "0,1,2,3",
-        pageSize: 10,
+        pageSize: 20,
         page: 0,
       };
 
@@ -1575,16 +1543,18 @@ export default {
             let children = res.content.data.map((ele) => {
               customModelIdMap.set(ele.title, {
                 column_id: ele.column_id,
-                id: ele.id,
+                id: `${ele.title}_${ele.id}`,
               });
-              this.rightPanelDataMap.set(`${ele.title}`, {
-                id: ele.id,
+              this.rightPanelDataMap.set(`${ele.title}_${ele.id}`, {
+                id: `${ele.title}_${ele.id}`,
                 mainType: "我的模型",
                 sourceType: "",
+                label: ele.title,
               });
               return {
-                id: ele.id,
+                id: `${ele.title}_${ele.id}`,
                 label: ele.title,
+                modelId: ele.id,
                 children: [],
                 column_id: ele.column_id,
                 model_name: ele.model_name,
@@ -1706,9 +1676,11 @@ export default {
     locateEvent(node) {
       if (this.layerIdMap.has(node.data.id)) {
         this.layerIdMap.get(node.data.id);
-        map2DViewer.map.fitBounds(
-          map2DViewer.analysisGroups[node.data.id].getBounds()
-        );
+        if (map2DViewer.analysisGroups[node.data.id].getBounds()) {
+          map2DViewer.map.fitBounds(
+            map2DViewer.analysisGroups[node.data.id].getBounds()
+          );
+        }
       }
     },
     handleUpdate(node) {
@@ -1797,24 +1769,20 @@ export default {
             };
             this.$Post(this.urlsCollection.selectContentList, params).then(
               (res) => {
-                // 暂时权限全部放开
-
-                // if (res.code === 202 && res.content === "数据不存在") {
-                //   //
-                //   this.$message.info("当前用户无权限!");
-                //   layerAuthorityMap.set(data.id, "无权限");
-                // }
-
-                // if (res.code === 200 && res.content.data.length > 0) {
-                layerAuthorityMap.set(data.id, "有权限");
+                if (res.code === 202 && res.content === "数据不存在") {
+                  this.$message.info("当前用户无权限!");
+                  layerAuthorityMap.set(data.id, "无权限");
+                }
 
-                this.displaySingleLayer(
-                  data.columnId,
-                  data.id,
-                  data.mainType,
-                  data.sourceType ? data.sourceType : ""
-                );
-                // }
+                if (res.code === 200 && res.content.data.length > 0) {
+                  layerAuthorityMap.set(data.id, "有权限");
+                  this.displaySingleLayer(
+                    data.columnId,
+                    data.id,
+                    data.mainType,
+                    data.sourceType ? data.sourceType : ""
+                  );
+                }
               }
             );
           }
@@ -1927,52 +1895,105 @@ export default {
         }
       });
       let uniqueId = data.id;
+
       // 我的模型图层组初始化
       if (!map2DViewer.analysisGroups[uniqueId]) {
+        // 生成图例时设置初始化图层颜色
+        if (targetColor.length > this.collectColorMapIndex + 1) {
+          this.collectColorMapIndex++;
+        } else {
+          this.collectColorMapIndex = 0;
+        }
+        this.collectColorMap.set(
+          this.collectColorMapIndex,
+          `rgb(${targetColor[this.collectColorMapIndex][0]},${
+            targetColor[this.collectColorMapIndex][1]
+          },${targetColor[this.collectColorMapIndex][2]})`
+        );
+        // 图例
+        this.legendTitle.push({
+          name: uniqueId,
+          info: uniqueId,
+        });
+        this.legendIcon.push({
+          name: uniqueId,
+          background: "transparent",
+          border: `1px solid ${this.collectColorMap.get(
+            this.collectColorMapIndex
+          )}`,
+        });
+
         map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
         map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
         this.layerIdMap.set(uniqueId, uniqueId);
         if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
           this.$store.state.selectSelectDataMap["singlePolygon"] = [];
         }
-
         // 如果有叠置分析文件 -- 呈现叠置分析内容
         if (data.c_dzfx_file) {
           this.$Get(this.uploadBaseUrl + data.c_dzfx_file, "").then(
             (response) => {
               if (response.features.length > 0) {
-                console.log("请求到的叠置分析的数据");
-                console.log(response.features);
-                if (map2DViewer.analysisGroups[uniqueId]) {
-                  // 清除当前图层组内所有图层，并读取GeoJSON数据
-                  map2DViewer.analysisGroups[uniqueId].clearLayers();
-                  // response.features.forEach((v) => {
-                  // let geojson = publicFun.standardGeojson(
-                  //   v.geometry.coordinates
-                  // );
-                  // 读取Geojson中的数据
-                  // this.$store.state.mapMethodsCollection
-                  // .get("RENDER")
-                  // .addSinglePolygon(
-                  //   geometry,
-                  //   cid,
-                  //   "#ff0",
-                  //   uniqueId,
-                  //   data.mainType,
-                  //   ""
-                  // );
-                  //等叠置分析有结果后再进行调试
-                  // console.log(geojson, "geojson")
-                  // this.readGeojson(geojson, data.id);
-                  // });
+                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 (
+                      this.$store.state.selectSelectDataMap["singlePolygon"][
+                        uniqueId
+                      ]
+                    ) {
+                      uniqueIdList =
+                        this.$store.state.selectSelectDataMap["singlePolygon"][
+                          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 correctCoord = publicFun.latLngsCorrection(coord);
+                      let coordinates =
+                        publicFun.latLngsToReverse(correctCoord);
+                      coordinates = publicFun.latLngsToReverse(coordinates);
+                      let geojson = publicFun.standardGeojson(coordinates);
+                      let singlePolygonItem = {
+                        uniqueId: `overlay_${uniqueId}`,
+                        geometry: JSON.stringify(geojson),
+                        cid: publicFun.buildGuid(data.label),
+                        color: this.collectColorMap.get(
+                          this.collectColorMapIndex
+                        ),
+                      };
+                      uniqueIdList.push(singlePolygonItem);
+                      this.$store.state.selectSelectDataMap["singlePolygon"][
+                        uniqueId
+                      ] = uniqueIdList;
+                      this.readGeojson(
+                        geojson,
+                        data.id,
+                        this.collectColorMap.get(this.collectColorMapIndex)
+                      );
+                    });
+                  }
                 }
               }
             }
           );
         } else {
+          this.layerLoading = true;
           let params = new FormData();
           params = {
-            modelId: data.id,
+            modelId: data.modelId,
             userId: localStorage.getItem("USER_ID"),
           };
 
@@ -1980,15 +2001,15 @@ export default {
           this.$Post(this.urlsCollection.getModelCoverAgeInfo, params).then(
             (res) => {
               if (res.code === 201 && res.message === "未申请任务权限") {
+                this.layerLoading = false;
                 this.$message.info("暂无数据!");
               }
+              if (res.code === 200) {
+                this.layerLoading = false;
+              }
               if (res.code === 200 && res.content.length > 0) {
-                // console.log(res.content, "查看我的模型图层数据");
                 // 清除当前图层组内所有图层，并读取GeoJSON数据
                 map2DViewer.analysisGroups[uniqueId].clearLayers();
-                // 判断能用的数据
-                // 根据column_name或 column_id判断有几个图层
-                // 初始化时将请求到的疑点数据中是否疑点全部改为未标记，疑点，非疑点三种状态
                 let changeCaseStatusArr = res.content.map((ele) => {
                   return {
                     id: ele.id,
@@ -2035,7 +2056,7 @@ export default {
                       .addSinglePolygon(
                         geometry,
                         cid,
-                        "#ff0",
+                        this.collectColorMap.get(this.collectColorMapIndex),
                         uniqueId,
                         data.mainType,
                         "",
@@ -2056,8 +2077,8 @@ export default {
                 this.changeSingleLayer(
                   1,
                   this.currentPageSize,
-                  uniqueId,
-                  data.columnId
+                  data.columnId,
+                  uniqueId
                 );
               }
             }
@@ -2065,17 +2086,19 @@ export default {
         }
       }
     },
-    readGeojson(geojson, uniqueId) {
+    // geojson直接读取的坐标顺序是经纬度
+    readGeojson(geojson, uniqueId, color) {
       // debugger;
       // 尽量与所有图层，预设模型读取几何数据的方式一样，
-      // let states = [];
-      // states.push(geojson);
-      // let geojsonData = L.geoJSON(states, {
-      //   style: function (feature) {
-      //     // console.log(feature);
-      //   },
-      // }).addTo(map2DViewer.map);
-      // map2DViewer.analysisGroups[uniqueId] = geojsonData;
+      let states = [];
+      states.push(geojson);
+      let geojsonData = L.geoJSON(states, {
+        style: function (feature) {
+          return { color: color };
+          // console.log(feature);
+        },
+      }).addTo(map2DViewer.map);
+      map2DViewer.analysisGroups[uniqueId] = geojsonData;
     },
     // 我的模型图层取消勾选
     deleteMyModelData(data) {
@@ -2116,6 +2139,16 @@ export default {
 
       map2DViewer.map.closePopup();
 
+      // 移除图例
+      if (this.legendTitle.length > 0) {
+        this.legendTitle = this.legendTitle.filter((v) => {
+          return v.name !== data.id;
+        });
+        this.legendIcon = this.legendIcon.filter((v) => {
+          return v.name !== data.id;
+        });
+      }
+
       this.layerIdMap.has(data.id) && this.layerIdMap.delete(data.id);
 
       // 只激活我的标记