fix: 地图图例切换

src/components/navigation.vue

@@ -74,6 +74,7 @@ function gardenOrganId(farmId){
 const changeSelect = (e) =>{
     eventBus.emit('area:id',{areaId:areaId.value,farmId:organId.value})
     sessionStorage.setItem('regionId',e)
+    eventBus.emit('handleTab',)
 }
 
 onMounted(()=>{

src/views/home/components/homePage.vue

@@ -210,6 +210,7 @@ function handleData(name, isChange = true) {
     });
     if (isChange) {
         eventBus.emit("changePointType", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
+        eventBus.emit("changePointLegend", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
         console.log(' menuList.value', menuList.value);
     }
     return obj;

src/views/home/index.vue

@@ -89,11 +89,14 @@
 
             <!-- 图例 -->
             <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="" /> -->
-            <div class="map-bg map-legend yes-events">
-            <!-- <div class="legend-item legend-title">
-                    <el-checkbox v-model="showMapLegend" @change="handleLegend" label="分区状态" size="large" />
-                </div> -->
-            <div class="item">
+            <div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
+                <div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
+                    <span class="legend-block" :style="{background: legend.color}"></span>
+                    {{ legend.name }}
+                </div>
+            </div>
+            <div v-else class="map-bg map-legend yes-events">
+                <div class="item">
                     <img src="@/assets/images/map/status/status-zc.png" alt="" />
                     有照片
                 </div>
@@ -101,19 +104,6 @@
                     <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
                     无照片
                 </div>
-            <!-- <div class="item">
-                    <img src="@/assets/images/map/status/status-bh.png" alt="" />
-                    病害异常
-                </div>
-                <div class="item">
-                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
-                    虫害异常
-                </div>
-                <div class="item">
-                    <img src="@/assets/images/map/status/wns.png" alt="" />
-                    万年树
-                </div>
-                 -->
             </div>
         </div>
     </div>
@@ -291,14 +281,22 @@ const getBlueRegionList = (callback) => {
         callback && callback();
     });
 };
+// 图例
+const legendArr = ref([])
 
 const organId = ref(null);
 const regionId = ref(null);
 const tabName = ref("");
 const tabId = ref(0);
+eventBus.off("changePointLegend", toggleLegend)
+eventBus.on("changePointLegend", toggleLegend)
+function toggleLegend({colorObj}) {
+    legendArr.value = colorObj?.list
+}
 //选项卡事件监听
 const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
     eventBus.emit("changePointType", {legend, colorObj})
+    legendArr.value = colorObj?.list
     console.log('name, id, isUpdate, params', name, id, isUpdate, params, legend, colorObj);
     tabName.value = name;
     tabId.value = id;
@@ -636,43 +634,12 @@ const handleShrink = (position) => {
     }
 };
 
-// 地图点位--果树档案
-const photoBaseData = ref([
-    {
-        label: "品种",
-        value: "桂味",
-    },
-    {
-        label: "冠幅表面积",
-        value: "10米",
-    },
-    {
-        label: "预估产量",
-        value: "2000斤",
-    },
-    {
-        label: "高质果率",
-        value: "72棵",
-    },
-]);
 const photoList = ref([
     {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
     {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
     {key: "营养", statement: "无营养异常"},
 ]);
 
-const outputBox = ref([
-    { id: 1, name: "花穗率", value: "" },
-    { id: 2, name: "总枝条数", value: "" },
-    { id: 3, name: "开花率", value: "" },
-    { id: 4, name: "雄花比例", value: "" },
-]);
-
-const qualityBox = ref([
-    { id: 5, name: "通风率", value: "" },
-    { id: 6, name: "透光率", value: "" },
-    { id: 7, name: "地形条件", value: "" },
-]);
 </script>
 
 <style lang="scss" scoped>
@@ -930,6 +897,14 @@ const qualityBox = ref([
                     width: 16px;
                     margin-right: 6px;
                 }
+                .legend-block {
+                    width: 16px;
+                    height: 16px;
+                    box-sizing: border-box;
+                    border-radius: 50%;
+                    border: 2px solid #fff;
+                    margin-right: 6px;
+                }
             }
             .legend-title {
                 border-bottom: 1px solid rgba(102, 102, 102, 0.35);

src/views/home/map/samplePointLayer.js

@@ -174,6 +174,7 @@ class SamplePointLayer {
       for (let item of this.pointArr) {
         item.iconName = 'defalut'
         that.getIcon(item)
+        item.color = null
         let point = newPoint(item);
         features.push(point)
         // console.log('item.dyImg',item.dyImg);