feat：修改农场分布地图样式

src/views/warningHome/index.vue

@@ -117,7 +117,7 @@
                     :key="item"
                     class="tab-item"
                     :class="{ active: item === activeBaseTab }"
-                    @click="activeBaseTab = item"
+                    @click="handleTabClick(item)"
                 >
                     {{ item }}
                 </div>
@@ -386,6 +386,39 @@ const destroyPopup = () => {
     eventBus.emit("map:destroyPopup");
 };
 
+const handleTabClick = (item) => {
+    activeBaseTab.value = item;
+
+    // 切换 Tab 时，先清空农场分布图层上的旧数据
+    if (distributionLayer) {
+        distributionLayer.clear();
+    }
+
+    if (item === "农场分布") {
+        const data = [
+            {
+                id: 4,
+                label: '荔枝-物候期',
+                color: "#2199F8",
+                farmName: '荔博园',
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E8%8D%94%E6%9E%9D.png",
+                imgName: lz,
+                wktArr: ["POINT(113.33722309500006 23.204074978290652)", "POINT(113.53593237057355 23.188789823486065)", "POINT(113.36970447853234 23.064596505297875)"],
+            },
+            {
+                id: 55,
+                label: '荔枝-秋梢期',
+                color: "#FF8E1C",
+                farmName: '荔博园',
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E7%B3%96.png",
+                imgName: lz,
+                wktArr: ["POINT(113.29900983080294 22.949956545068478)","POINT(113.22640444442656 22.90983245840535)"],
+            },
+        ]
+        distributionLayer.initData(data, true);
+    }
+};
+
 const props1 = {
     checkStrictly: true,
 };

src/views/warningHome/map/distributionLayer.js

@@ -26,6 +26,7 @@ class DistributionLayer {
             style: function (f) {
                 const label = f.get("label") || "";
                 const baseColor = f.get("color") || "#2199F8";
+                const farmName = f.get("farmName") || "";
                 const imgUrl = f.get("imgUrl") || "";
                 const imgName = f.get("imgName") || "";
 
@@ -67,6 +68,25 @@ class DistributionLayer {
                         padding: [2, 14, 2, 14],
                     }),
                 });
+
+                // 农场名称（显示在点位下方，白色文字）
+                const farmNameStyle = farmName
+                    ? new Style({
+                          text: new Text({
+                              text: farmName,
+                              font: "normal 19px sans-serif",
+                              offsetY: 45, // 向下偏移，位于点位下方
+                              textAlign: "center",
+                              fill: new Fill({
+                                  color: "#FFFFFF",
+                              }),
+                              stroke: new Stroke({
+                                  color: "rgba(0,0,0,0.6)",
+                                  width: 2,
+                              }),
+                          }),
+                      })
+                    : null;
                 const typeImgStyle = new Style({
                     // image: new Photo({
                     //     // src: imgUrl,
@@ -84,17 +104,31 @@ class DistributionLayer {
                     }),
                 });
 
-                // 先画纯色方块，再画白色描边 PNG 和文字
-                return [squareBgStyle, iconAndTextStyle, typeImgStyle];
+                // 先画纯色方块，再画白色描边 PNG 和文字，最后画农场名称
+                const styles = [squareBgStyle, iconAndTextStyle, typeImgStyle];
+                if (farmNameStyle) styles.push(farmNameStyle);
+                return styles;
             },
         });
         this.kmap.addLayer(this.distributionPointLayer.layer)
     }
 
+  /**
+   * 清空当前图层上的所有数据
+   */
+  clear() {
+    if (this.distributionLayer && this.distributionLayer.source) {
+      this.distributionLayer.source.clear();
+    }
+    if (this.distributionPointLayer && this.distributionPointLayer.source) {
+      this.distributionPointLayer.source.clear();
+    }
+  }
+
     initData(data) {
-        let that = this;
-        that.distributionLayer.source.clear();
-        that.distributionPointLayer.source.clear();
+    let that = this;
+    // 每次加载前先清空旧数据
+    this.clear();
         for (let item of data) {
             if (item.geom) {
                 const f = new Feature({
@@ -114,6 +148,10 @@ class DistributionLayer {
                     f.set("imgName", item.imgName);
                     f.set("label", item.label);
                     f.set("color", item.color);
+                    // 农场名称，用于点位下方显示
+                    if (item.farmName) {
+                        f.set("farmName", item.farmName);
+                    }
                     this.distributionPointLayer.source.addFeature(f);
                 }
             }