docs:首页模块

src/views/index.vue

@@ -4,13 +4,11 @@
       <div id="mapContainer" class="map" style="height: calc(100vh - 50px);">
       </div>
     </div>
-
   </div>
 </template>
 
-
 <script setup name="Index">
-  import { onMounted, ref, reactive, nextTick } from "vue";
+  import { onMounted, ref, reactive, nextTick, onUnmounted } from "vue";
   import _ from "lodash";
   import L from 'leaflet'
   import dayjs from 'dayjs'
@@ -19,7 +17,6 @@
 
   const { proxy } = getCurrentInstance()
 
-
   import qtGeojsonData from '@/assets/data/qingtian.json'
   const tdtKey = 'e0d855b509f09b891605c4dc5f29868b'
 
@@ -84,7 +81,6 @@
   const TownGov = [28.205423, 120.165288] // 青田县
 
   const initMap = () => {
-
     // 初始底图和注记
     const defaultBase = '影像'
     tiandituMap = L.map('mapContainer', {
@@ -153,6 +149,7 @@
     // 确保遮罩层在最上层
     maskLayer.bringToFront();
   };
+  
   let MapData = []
   // 获取地图初始化数据
   const getIndexData = async () => {
@@ -162,7 +159,7 @@
       if (res.code == 0) {
         let rawData = res.data
         rawData = _.filter(rawData, function (o) {
-          return !o.longitude == "" || !o.latitude == '';
+          return o.longitude !== "" && o.latitude !== "";
         });
         MapData = _.map(rawData, item => {
           item.position_xy = [item.latitude, item.longitude]
@@ -178,12 +175,12 @@
         addMarkers()
       }
     } catch (error) {
-
+      console.error(error)
     } finally {
       mapLoading.value = false
     }
-
   };
+  
   let dialogVisible = ref(false) // 弹窗
   let popupData = ref([])
   let pinMarkers = []; // 所有单个marker
@@ -191,6 +188,35 @@
   let autoPlayInterval = null; // 自动播放定时器
   let isPaused = false; // 是否暂停状态
   let currentPopup = null; // 当前打开的弹窗
+  
+  // 显示标记点弹窗的通用方法
+  const showMarkerPopup = (e) => {
+    popupData.value = e.target.options;
+    const popupContent = `
+      <div style="color: white; padding: 10px; font-size: 14px;">
+        <h3 style="margin-top: 0;">${popupData.value.stnm}</h3>
+        <table class='dialog-table' style="width: 100%; border-collapse: collapse;">
+          ${popupData.value.data ? popupData.value.data.map(row => `
+            <tr>
+              <td style="padding: 5px; width: 50%;">${row.name}${row.unit ? `（${row.unit}）` : ''}</td>
+              <td style="padding: 5px; width: 50%;">${row.value || row.latestValue || ''}</td>
+            </tr>
+          `).join('') : ''}
+        </table>
+      </div>
+    `;
+
+    // 创建 popup 并设置位置
+    if (currentPopup) {
+      tiandituMap.closePopup(currentPopup);
+    }
+    
+    currentPopup = L.popup()
+      .setLatLng(e.target._latlng)
+      .setContent(popupContent)
+      .openOn(tiandituMap);
+  };
+  
   // 开始自动播放
   const startAutoPlay = () => {
     if (autoPlayInterval) {
@@ -234,7 +260,7 @@
     // 清除旧的
     pinMarkers.forEach(m => tiandituMap.removeLayer(m));
     pinMarkers = [];
-    MapData.forEach(item => {
+    MapData.forEach((item, index) => {
       let marker;
       const markerIcon = L.icon({
         iconUrl: item.icon || rain0,
@@ -245,7 +271,7 @@
         icon: markerIcon,
         data: item.data,
         stnm: item.stnm,
-        stnmId:item.stnmId
+        stnmId: item.stnmId
       });
       // 添加鼠标事件监听
       marker.on('mouseover', (e) => {
@@ -265,6 +291,7 @@
       });
 
       marker.on('click', (e) => {
+        currentIndex = index; // 更新当前索引
         showMarkerPopup(e);
       });
       pinMarkers.push(marker);
@@ -280,7 +307,6 @@
           firstMarker.fire('click');
         }
         // 启动自动播放
-/**************************** CodeGeeX Inline Diff ****************************/
         startAutoPlay();
       }
     }, 1000);
@@ -289,42 +315,20 @@
     tiandituMap.on('click', () => {
       if (currentPopup) {
         tiandituMap.closePopup(currentPopup);
+      }
+    })
   }
-  // 显示标记点弹窗的通用方法
-  const showMarkerPopup = (e) => {
-/******************** 49ec4b3d-3bf0-41fc-a821-48f719365cbd ********************/
-    popupData.value = e.target.options;
-    const popupContent = `
-      <div style="color: white; padding: 10px; font-size: 14px;">
-        <h3 style="margin-top: 0;">${popupData.value.stnm}</h3>
-        <table class='dialog-table' style="width: 100%; border-collapse: collapse;">
-          ${popupData.value.data.map(row => `
-            <tr>
-              <td style="padding: 5px; width: 50%;">${row.name}${row.unit ? `（${row.unit}）` : ''}</td>
-              <td style="padding: 5px; width: 50%;">${row.value || row.latestValue}</td>
-            </tr>
-          `).join('')}
-        </table>
-      </div>
-    `;
-
-    // 创建 popup 并设置位置
-    currentPopup = L.popup()
-      .setLatLng(e.target._latlng)
-      .setContent(popupContent)
-      .openOn(tiandituMap);
-  };
-  /***********************************************************   弹窗  *****************************************/
 
   onMounted(() => {
     initMap()
   })
+  
   // 组件卸载时清理定时器
   onUnmounted(() => {
     if (autoPlayInterval) {
       clearInterval(autoPlayInterval);
     }
-  });
+  })
 </script>
 
 <style scoped lang="scss">
@@ -343,8 +347,6 @@
       }
     }
 
-
-
     .el-table,
     .el-table__expanded-cell,
     .el-table tr,
@@ -375,8 +377,6 @@
         color: skyblue;
       }
     }
-
-
   }
 
   /* 隐藏popup的关闭按钮 */