我的模型图层未叠置前分层显示

src/views/ComprehensiveAnalysis.vue

@@ -905,6 +905,35 @@ export default {
     this.$bus.$off("caseAuditEvent2");
   },
   methods: {
+    //设置图层图例 -- 图例名称及对应的id
+    setLayerLegend(title,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: title,
+        info: title,
+        uniqueId:uniqueId
+      });
+      this.legendIcon.push({
+        uniqueId:uniqueId,
+        name: title,
+        background: "transparent",
+        border: `1px solid ${this.collectColorMap.get(
+          this.collectColorMapIndex
+        )}`,
+      });
+    },
     // 修改数据中的疑点
     changeCaseBoolean(val, status) {
       if (this.enteredPanelId) {
@@ -1295,29 +1324,7 @@ export default {
       // 图层未初始化
       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
-          )}`,
-        });
+        this.setLayerLegend(uniqueId,uniqueId);
         map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
         map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
         this.targetLayerPage[uniqueId] = 0;
@@ -1576,7 +1583,7 @@ export default {
               customModelIdMap.set(ele.title, {
                 column_id: ele.column_id,
                 id: `${ele.title}_${ele.id}`,
-                modelId:ele.id
+                modelId: ele.id,
               });
               this.rightPanelDataMap.set(`${ele.title}_${ele.id}`, {
                 id: `${ele.title}_${ele.id}`,
@@ -1886,10 +1893,10 @@ export default {
           // 移除图例
           if (this.legendTitle.length > 0) {
             this.legendTitle = this.legendTitle.filter((v) => {
-              return v.name !== data.id;
+              return v.uniqueId !== data.id;
             });
             this.legendIcon = this.legendIcon.filter((v) => {
-              return v.name !== data.id;
+              return v.uniqueId !== data.id;
             });
           }
 
@@ -1931,31 +1938,6 @@ export default {
 
       // 我的模型图层组初始化
       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);
@@ -1985,6 +1967,10 @@ export default {
                           uniqueId
                         ];
                     }
+
+                    // 生成图例时设置初始化图层颜色 -- 叠置分析的图层
+                    this.setLayerLegend(`叠置-${uniqueId}`,uniqueId);
+
                     // 清除当前图层组内所有图层，并读取GeoJSON数据
                     map2DViewer.analysisGroups[uniqueId].clearLayers();
                     // 叠置分析图斑数统计
@@ -2043,7 +2029,18 @@ export default {
               if (res.code === 200 && res.content.length > 0) {
                 // 清除当前图层组内所有图层，并读取GeoJSON数据
                 map2DViewer.analysisGroups[uniqueId].clearLayers();
+                // 判断我的模型中目前有多少个图层
+                let layerTotalArr = [];
+                let layerLegendColorMap = new Map();
                 let changeCaseStatusArr = res.content.map((ele) => {
+                  if (!layerTotalArr.includes(ele.column_name)) {
+                    layerTotalArr.push(ele.column_name);
+                    this.setLayerLegend(ele.column_name,uniqueId);
+                    layerLegendColorMap.set(
+                      ele.column_name,
+                      this.collectColorMap.get(this.collectColorMapIndex)
+                    );
+                  }
                   return {
                     id: ele.id,
                     column_name: ele.column_name,
@@ -2089,7 +2086,7 @@ export default {
                       .addSinglePolygon(
                         geometry,
                         cid,
-                        this.collectColorMap.get(this.collectColorMapIndex),
+                        layerLegendColorMap.get(ele.column_name),
                         uniqueId,
                         data.mainType,
                         "",
@@ -2174,10 +2171,10 @@ export default {
       // 移除图例
       if (this.legendTitle.length > 0) {
         this.legendTitle = this.legendTitle.filter((v) => {
-          return v.name !== data.id;
+          return v.uniqueId !== data.id;
         });
         this.legendIcon = this.legendIcon.filter((v) => {
-          return v.name !== data.id;
+          return v.uniqueId !== data.id;
         });
       }