图斑色彩优化

src/views/ComprehensiveAnalysis.vue

@@ -78,9 +78,7 @@
     <div class="comprehensive-analysis-leftjuanlianInfo" v-show="showJLInfo">
       {{ basemapName }}
     </div>
-    <div class="comprehensive-analysis-rightjuanlianInfo" v-show="showJLInfo">
-      sat2018-s2
-    </div>
+    <div class="comprehensive-analysis-rightjuanlianInfo" v-show="showJLInfo">sat2018-s2</div>
     <!-- 属性弹窗 -->
     <AttributePopup
       class="comprehensive-analysis-popup"
@@ -203,9 +201,7 @@
                     style="position: relative; width: 100%"
                   >
                     <el-tooltip class="item" effect="light" :content="node.label" placement="top-start">
-                      <div class="custom-tree-node-item">
-                        {{ node.label }} {{ node.id }}
-                      </div>
+                      <div class="custom-tree-node-item">{{ node.label }} {{ node.id }}</div>
                     </el-tooltip>
                     <span
                       ><el-button
@@ -360,6 +356,7 @@ export default {
       ],
       showJLInfo: false,
       // 存储图斑颜色
+      collectColorMapIndex: 0,
       collectColorMap: new Map(),
       targetLayerPage: {},
       targetLayerTotal: {},
@@ -844,7 +841,7 @@ export default {
         map2DViewer.layers["imagery"] = L.esri.tiledMapLayer({
           tileSize: 512,
           url: data.mapUrl,
-          maxNativeZoom: 7,
+          maxNativeZoom: 7
         });
         map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
         this.basemapName = data.abbr;
@@ -1048,7 +1045,7 @@ export default {
                   .addSinglePolygon(
                     geometry,
                     cid,
-                    this.collectColorMap.get(this.collectColorMap.size - 1),
+                    this.collectColorMap.get(this.collectColorMapIndex),
                     uniqueId,
                     mainType,
                     sourceType
@@ -1116,24 +1113,27 @@ export default {
       // 图层未初始化
       if (!map2DViewer.analysisGroups[uniqueId]) {
         // 生成图例时设置初始图层颜色
-        if (!this.collectColorMap.has(this.collectColorMap.size)) {
-          let num = this.collectColorMap.size;
-          this.collectColorMap.set(
-            this.collectColorMap.size,
-            `rgb(${targetColor[num][0]},${targetColor[num][1]},${targetColor[num][2]})`
-          );
-          console.log(this.collectColorMap, "图斑颜色设置");
+        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
         });
-        console.log(this.collectColorMap.get(this.collectColorMap.size - 1));
+        console.log(this.collectColorMap.get(this.collectColorMapIndex));
         this.legendIcon.push({
           name: uniqueId,
           background: "transparent",
-          border: `1px solid ${this.collectColorMap.get(this.collectColorMap.size - 1)}`
+          border: `1px solid ${this.collectColorMap.get(this.collectColorMapIndex)}`
         });
         map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
         map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
@@ -1649,7 +1649,7 @@ export default {
 
           // 移除图例
           if (this.legendTitle.length > 0) {
-            this.collectColorMap.delete(this.collectColorMap.size - 1);
+            // this.collectColorMap.delete(this.collectColorMap.size - 1);
             this.legendTitle = this.legendTitle.filter(v => {
               return v.name !== data.id;
             });