fix: 对接种植面积，产量底图和图例，加地图比例尺

src/components/fnHeader.vue

@@ -21,7 +21,7 @@
       <el-icon size="25"><MoreFilled /></el-icon>
       <div class="time">
         <div>21:05:46</div>
-        <span>2025.01.14 星期二</span>
+        <span>2024.11.04 星期一</span>
       </div>
     </div>
   </div>
@@ -87,9 +87,9 @@ const toggleFarm = (val) => {
     }
   }
   .focus-farm {
-    margin-right: 192px;
-    // margin-top: 42px;
-    margin-top: 26px;
+    position: absolute;
+    right: 192px;
+    top: 23px;
     ::v-deep {
         .el-select__wrapper {
             background: rgba(255, 212, 137, 0.2);

src/views/warningHome/components/alarmList.vue

@@ -68,6 +68,7 @@ onMounted(() => {
         resultType: "json",
     }).then(({data}) => {
         mapLayerList.value = data
+        eventBus.emit("alarmList:warningLayers", data)
     })
 });
 

src/views/warningHome/index.vue

@@ -29,19 +29,24 @@
                         <div class="type-box"><img src="@/assets/images/warningHome/lz.png" /></div>
                     </div>
                     <div class="top-r yes-events">
-                        <div class="data-box" @click="toggleBox(1)" :class="{active: activeBox === 1}">
+                        <div class="data-box" @click="toggleBox('面积')" :class="{ active: activeBoxName === '面积' }">
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">种植面积</div>
                         </div>
-                        <div class="data-box" v-if="areaVal.includes('3186')" @click="toggleBox(4)" :class="{active: activeBox === 4}">
+                        <div
+                            class="data-box"
+                            v-if="areaVal.includes('3186')"
+                            @click="toggleBox('失管')"
+                            :class="{ active: activeBoxName === '失管' }"
+                        >
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">疑似失管面积</div>
                         </div>
-                        <div class="data-box" @click="toggleBox(2)" :class="{active: activeBox === 2}">
+                        <div class="data-box" @click="toggleBox('产量')" :class="{ active: activeBoxName === '产量' }">
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">预估产量</div>
                         </div>
-                        <div class="data-box" @click="toggleBox(3)" :class="{active: activeBox === 3}">
+                        <div class="data-box" @click="toggleBox('产值')" :class="{ active: activeBoxName === '产值' }">
                             <div class="data-value"><span>526</span>万元</div>
                             <div class="data-name">预估总产值</div>
                         </div>
@@ -56,6 +61,11 @@
             </div>
             <div class="warning-r right yes-events">
                 <album></album>
+
+                <!-- 地图图例 -->
+                <div class="map-legend" v-if="legendImg">
+                    <img :src="legendImg" />
+                </div>
             </div>
             <div class="warning-search yes-events">
                 <img src="@/assets/images/warningHome/search-img.png" />
@@ -100,7 +110,7 @@ import alarmList from "./components/alarmList.vue";
 import timeLine from "./components/timeLine.vue";
 import { useRouter } from "vue-router";
 import eventBus from "@/api/eventBus";
-import { areaListOptions } from "./area"
+import { areaListOptions } from "./area";
 import { useStore } from "vuex";
 let store = useStore();
 
@@ -110,9 +120,17 @@ const router = useRouter();
 
 const areaVal = ref(["3"]);
 const mapRef = ref();
+
+const legendImg = ref("");
+const warningLayers = ref({})
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
     alarmLayer = new AlarmLayer(warningMap.kmap);
+
+    // 图例数据
+    eventBus.on("alarmList:warningLayers", (data) => {
+        warningLayers.value = data
+    });
 });
 
 const destroyPopup = () => {
@@ -124,17 +142,19 @@ const props1 = {
 };
 
 const toggleArea = (v) => {
-    activeBox.value = null;
+    activeBoxName.value = null;
     const val = v[v.length - 1];
     if (val === "3" || val === "3186") {
         eventBus.emit("warningHome:toggleArea", val);
     }
 };
 
-const activeBox = ref(null)
-const toggleBox = (index) => {
-    activeBox.value = index
-}
+const activeBoxName = ref(null);
+const toggleBox = (name) => {
+    activeBoxName.value = name;
+    legendImg.value = warningLayers.value[`${name}图例`];
+    eventBus.emit("warningHome:toggleMapLayer", name);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -148,7 +168,7 @@ const toggleBox = (index) => {
 
     ::v-deep {
         .focus-farm {
-            margin-top: 42px;
+            top: 42px;
         }
     }
 
@@ -170,11 +190,24 @@ const toggleBox = (index) => {
         }
         .right {
             width: 395px;
+            position: relative;
             .list {
                 width: 100%;
                 height: 100%;
             }
         }
+        .warning-r {
+            .map-legend {
+                position: absolute;
+                bottom: -33px;
+                left: -455px;
+                width: 340px;
+                img {
+                    width: 340px;
+                    opacity: 0.6;
+                }
+            }
+        }
         .warning-search {
             position: absolute;
             right: 400px;
@@ -272,7 +305,7 @@ const toggleBox = (index) => {
                             width: 35px;
                             height: 17px;
                             margin: 0 auto;
-                            background: url("@/assets/images/warningHome/triangle.png") no-repeat center center /cover;
+                            background: url("@/assets/images/warningHome/triangle.png") no-repeat center center / cover;
                         }
                     }
                     .data-value {
@@ -316,6 +349,17 @@ const toggleBox = (index) => {
 </style>
 
 <style lang="less">
+.ol-scale-line {
+    left: auto;
+    right: 430px;
+    bottom: 38px;
+    .ol-scale-line-inner {
+        max-width: 80px;
+        width: 80px !important;
+        color: #fff;
+        border-color: #fff;
+    }
+}
 .focus-farm-select {
     &.el-popper.is-light {
         background: #232323;

src/views/warningHome/map/alarmLayer.js

@@ -24,12 +24,22 @@ class AlarmLayer {
         });
         this.kmap.addLayer(this.regionLayer.layer)
 
+        this.warningLayers = {}
+        // 底图数据
+        eventBus.on("alarmList:warningLayers", (data) => {
+            this.warningLayers = data
+        })
+
         // 预警底图
         eventBus.on("alarmList:changeMapLayer", function (layerUrl) {
             that.initLayer(layerUrl)
         })
+        // 种植面积，预估产量，底图切换
+        eventBus.on("warningHome:toggleMapLayer", function (name) {
+            that.togglePlantLayer(name)
+        })
         // 切换区域广东省or从化区
-        that.areaId = 3
+        that.areaId = "3"
         eventBus.on("warningHome:toggleArea", (id) => {
             that.areaId = id
             that.changeDistrict(id)
@@ -55,6 +65,37 @@ class AlarmLayer {
         this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
     }
 
+    togglePlantLayer(name) {
+        const url = this.warningLayers[name]
+        // const url = "https://birdseye-img.sysuimars.com/map/szts/{z}/{x}/{y}.png"
+        // console.log('uu', url);
+        this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // 104.3017367175,30.329292136
+        this.plantLayer = this.kmap.addXYZLayer(
+            url,
+            { minZoom: 6, maxZoom: 22 },
+            99,
+            0.4
+        );
+        this.plantLayer.layer.setOpacity(0.4)
+        this.kmap.map.getView().setZoom(11)
+        this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+
+        
+        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // // 104.3017367175,30.329292136
+        // this.plantLayer = this.kmap.addXYZLayer(
+        //     url,
+        //     { minZoom: 5, maxZoom: 22 },
+        //     99,
+        //     0.4
+        // );
+        // this.plantLayer.layer.setOpacity(0.7)
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+    }
+
     // 切换地图区域
     changeDistrict(id) {
         VE_API.warning.fetchAreaDistrict({ id }).then(({ data }) => {
@@ -65,7 +106,7 @@ class AlarmLayer {
                 this.regionLayer.source.addFeature(f)
                 this.kmap.map.getView().fit(f.getGeometry(), { padding: [180, 150, 100, 150] })
             }
-            if (id === 3) {
+            if (id === "3") {
                 this.kmap.map.getView().setZoom(7.2)
                 // const position = store.getters.userinfo.location
                 this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])

src/views/warningHome/warningMap.js

@@ -23,9 +23,14 @@ class HomeMap {
   initMap(location, target) {
     let level = 7.2;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 7, 22);
     eventBus.emit('warningMap:init', this.kmap);
     this.addMapListen()
+     // 添加比例尺控件
+    const scaleLine = new ScaleLine({
+      units: 'metric' // 可以选择 'imperial' 或 'metric'
+    });
+    this.kmap.addControl(scaleLine);
   }
 
   addMapListen() {
@@ -52,24 +57,17 @@ class HomeMap {
         }
         return feature;
       });
-      console.log('feature', feature);
       if (!hasFeature) {
         const currentLonLat = event.coordinate
-        console.log('currentLonLat', currentLonLat);
         const params = {
           point: `POINT(${currentLonLat[0]} ${currentLonLat[1]})`
         }
         VE_API.mini_farm.weather_warning_land_check(params).then(async (res) => {
           await that.getLocation(currentLonLat)
           if (res.code == 0) {
-            console.log('res,', res.data);
 
             // 在这里可以获取feature的属性，并显示在弹窗中
-            let content = '<div>';
-            // for (let key in feature.getProperties()) {
-            //   content += '<li>' + key + ': ' + feature.get(key) + '</li>';
-            // }
-            content += res.data?.content + '</div>';
+            let content = '<div>' + res.data?.content + '</div>';
             document.getElementById('popup-title').innerHTML = that.address;
             document.getElementById('popup-content').innerHTML = content;
             that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置