Merge branch 'Malaysia' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map into Malaysia

src/components/PdfDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
       class="my-dialog yse-events"
-      :align-center="true"
+      align-center
       with-header="false"
       destroy-on-close
       :model-value="showDialog"
@@ -51,7 +51,7 @@ $body-height:calc(100% - $title-height);
   font-family: PingFangSC-Regular, PingFang SC;
   position: fixed;
   left: calc(50% - 700px);
-  top:0px;
+  top: 2.5%;
   width: 80%;
   height: calc(100% - 100px);
   background: rgba(1,17,22,0.8);

src/components/static_map_change/pointLayer.js

@@ -1,9 +1,11 @@
 import * as KMap from '@/utils/ol-map/KMap';
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
+import { Cluster, Vector as VectorSource } from "ol/source.js";
+import { Circle, Fill, Stroke, Text } from "ol/style.js";
 import { newPoint } from "@/utils/map.js";
 import flyPointIcon from "@/assets/images/warningHome/chat/fly-point.png";
-import activePointIcon from "@/assets/images/map/active-icon-small.png";
+import activePointIcon from "@/assets/images/map/poing-icon.png";
 
 /**
  *
@@ -11,6 +13,17 @@ import activePointIcon from "@/assets/images/map/active-icon-small.png";
 class pointLayer {
   constructor(kmap) {
     this.kmap = kmap
+    
+    // 创建原始点位数据源
+    this.imgSource = new VectorSource({});
+    
+    // 创建聚合数据源
+    this.clusterSource = new Cluster({
+      distance: 80, // 聚合距离（像素）
+      minDistance: 50, // 最小聚合距离
+      source: this.imgSource,
+    });
+    
     // 位置图标
     this.pointLayer = new KMap.VectorLayer("pointLayer", 1000, {
       visible: false,
@@ -26,14 +39,16 @@ class pointLayer {
     });
     this.kmap.addLayer(this.pointLayer.layer);
 
+    // 使用聚合数据源的图层
     this.imgLayer = new KMap.VectorLayer("imgLayer", 1000, {
       visible: false,
+      source: this.clusterSource,
       style: () => {
         return new Style({
           image: new Icon({
-            // 使用打包器可识别的静态资源路径
             src: activePointIcon,
             scale: 0.7,
+            anchor: [0.5, 0.5],
           }),
         });
       },
@@ -137,10 +152,21 @@ class pointLayer {
   }
 
   showImg(arr) {
+    // 先清空之前的数据
+    this.imgSource.clear();
+    
+    // 将数据添加到原始数据源
     arr.map((item) => {
       let point = newPoint(item, 'centerPoint');
-      this.imgLayer.addFeature(point)
-    })
+      // 保留原始数据属性
+      if(item.imageUrl) point.set('imageUrl', item.imageUrl);
+      if(item.id) point.set('id', item.id);
+      if(item.url) point.set('url', item.url);
+      
+      this.imgSource.addFeature(point);
+    });
+    
+    // 显示图层
     this.imgLayer.layer.setVisible(true);
     this.pointLayer.layer.setVisible(false);
   }
@@ -148,6 +174,8 @@ class pointLayer {
   hidePoint() {
     this.pointLayer.layer.setVisible(false);
     this.imgLayer.layer.setVisible(false);
+    // 清空聚合数据源
+    this.imgSource.clear();
   }
 
 }

src/views/warningHome/index.vue

@@ -23,6 +23,7 @@
     </div>
     <div ref="mapRef" class="bottom-map"></div>
     <track-dialog></track-dialog>
+    <PdfDialog title="果园报告"></PdfDialog>
 </template>
 
 <script setup>
@@ -41,6 +42,7 @@ import WaterLayer from "./map/waterLayer";
 import eventBus from "@/api/eventBus";
 import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
+import PdfDialog from "../../components/PdfDialog";
 
 let store = useStore();
 const router = useRouter();
@@ -101,6 +103,8 @@ const handleBaseTabClick = (tab) => {
         staticMapLayers.showSingle("Dongguan物候期", false);
     }else if (tab === "Hydrology") {
         waterLayer && waterLayer.toggleLayer(true)
+    }else {
+        eventBus.emit("homePage:gybg", { filename: '/东莞水稻平台8月报告.pdf', title: "果园报告" });
     }
 };
 
@@ -514,7 +518,7 @@ const getTreeChecks = async (nodeData, data) => {
             margin-right: 15px;
             border: 2px solid rgba(255, 212, 137, 0.3);
             border-radius: 4px;
-            padding: 8px 14px 11px;
+            padding: 8px 14px;
             background: rgba(29, 29, 29, 0.54);
             cursor: pointer;
         }
@@ -539,7 +543,7 @@ const getTreeChecks = async (nodeData, data) => {
 
             .tab-item {
                 border-radius: 6px;
-                padding: 6px 15px 8px;
+                padding: 6px 15px;
                 margin-right: 12px;
                 text-align: center;
                 font-size: 20px;