根据移动地图更新点位

ruoyi-screen/src/components/GisMap.vue

@@ -22,7 +22,6 @@ import {
   buildTownshipInfo,
   flyToTownship,
   getTownshipLabelPoints,
-  getTownshipPoiSearchCenter,
   removeTownshipBoundaryLayers
 } from '@/utils/gisTownshipBoundary'
 import { getTownshipLivestockStats } from '@/constants/townshipLivestock'
@@ -48,7 +47,7 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  /** 点击乡镇后是否展示该乡镇中心点周边 POI（默认不加载，点击后才查） */
+  /** 是否展示地图中心点周边 POI（移动地图后防抖查询） */
   showPoiMarkers: {
     type: Boolean,
     default: true
@@ -87,6 +86,10 @@ let unbindWheelZoom = null
 /** 滚轮缩放防抖：停止滚动后再合并应用，减少瓦片 canceled */
 const WHEEL_ZOOM_DEBOUNCE_MS = 150
 const WHEEL_ZOOM_RATE = 0.0022
+/** 地图移动结束后防抖再查 POI，避免拖拽过程中频繁请求 */
+const POI_SEARCH_DEBOUNCE_MS = 400
+/** 仅 zoom >= 16 时查询并展示 POI */
+const POI_SEARCH_MIN_ZOOM = 16
 
 let wheelDeltaAccum = 0
 let wheelDebounceTimer = null
@@ -94,8 +97,68 @@ let lastWheelAround = null
 let poiMarkers = []
 let townshipMarkers = []
 let unbindTownshipClick = null
-/** 当前 POI 查询中心，仅点击乡镇后赋值 */
-let poiSearchCenter = null
+let unbindPoiSearch = null
+let poiSearchDebounceTimer = null
+
+function getMapViewCenter() {
+  if (!map || typeof map.getCenter !== 'function') {
+    return null
+  }
+  const center = map.getCenter()
+  const lng = Number(center?.lng ?? center?.[0])
+  const lat = Number(center?.lat ?? center?.[1])
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+    return null
+  }
+  return [lng, lat]
+}
+
+function getMapZoom() {
+  if (!map || typeof map.getZoom !== 'function') {
+    return null
+  }
+  const zoom = map.getZoom()
+  return Number.isFinite(zoom) ? zoom : null
+}
+
+function shouldSearchPoiAtCurrentZoom() {
+  const zoom = getMapZoom()
+  return zoom != null && zoom >= POI_SEARCH_MIN_ZOOM
+}
+
+function schedulePoiSearch() {
+  if (!props.showPoiMarkers || !map) {
+    return
+  }
+  if (poiSearchDebounceTimer) {
+    clearTimeout(poiSearchDebounceTimer)
+  }
+  poiSearchDebounceTimer = setTimeout(() => {
+    poiSearchDebounceTimer = null
+    if (!shouldSearchPoiAtCurrentZoom()) {
+      clearPoiMarkers()
+      return
+    }
+    renderPoiMarkers()
+  }, POI_SEARCH_DEBOUNCE_MS)
+}
+
+function bindPoiSearchListener() {
+  if (!map || typeof map.on !== 'function') {
+    return () => {}
+  }
+  const onMoveEnd = () => {
+    schedulePoiSearch()
+  }
+  map.on('moveend', onMoveEnd)
+  return () => {
+    if (poiSearchDebounceTimer) {
+      clearTimeout(poiSearchDebounceTimer)
+      poiSearchDebounceTimer = null
+    }
+    map.off('moveend', onMoveEnd)
+  }
+}
 
 function logClickCoordinate(lngLat) {
   if (!lngLat) {
@@ -176,16 +239,6 @@ function bindTownshipDrillDown() {
       zoom: props.townshipDrillMaxZoom
     })
     emit('township-click', info)
-
-    if (props.showPoiMarkers) {
-      const searchCenter = getTownshipPoiSearchCenter(feature)
-      if (searchCenter) {
-        poiSearchCenter = searchCenter
-        map.once('moveend', () => {
-          renderPoiMarkers()
-        })
-      }
-    }
   })
 }
 
@@ -285,16 +338,24 @@ function createPoiMarkerElement(name) {
 }
 
 async function renderPoiMarkers() {
-  if (!props.showPoiMarkers || !map || !cmmapglRef || !poiSearchCenter) {
+  if (!props.showPoiMarkers || !map || !cmmapglRef) {
     return
   }
+  if (!shouldSearchPoiAtCurrentZoom()) {
+    clearPoiMarkers()
+    return
+  }
+
+  const center = getMapViewCenter()
+  if (!center) {
+    return
+  }
+
   clearPoiMarkers()
 
   let pois = []
   try {
-    pois = await searchNearbyPois({
-      center: poiSearchCenter
-    })
+    pois = await searchNearbyPois({ center })
   } catch {
     return
   }
@@ -328,6 +389,10 @@ async function renderPoiMarkers() {
 }
 
 function destroyMap() {
+  if (typeof unbindPoiSearch === 'function') {
+    unbindPoiSearch()
+    unbindPoiSearch = null
+  }
   if (typeof unbindWheelZoom === 'function') {
     unbindWheelZoom()
     unbindWheelZoom = null
@@ -335,7 +400,6 @@ function destroyMap() {
   wheelDeltaAccum = 0
   lastWheelAround = null
   clampingZoom = false
-  poiSearchCenter = null
   clearPoiMarkers()
   teardownTownshipBoundary()
   if (map) {
@@ -569,6 +633,7 @@ async function initMap() {
     bindMapListeners()
     bindZoomClampListener()
     unbindWheelZoom = bindDebouncedWheelZoom()
+    unbindPoiSearch = bindPoiSearchListener()
     configureScrollZoom()
     map.on('load', () => {
       applyMapLimits()
@@ -577,6 +642,7 @@ async function initMap() {
       syncWmtsLayerVisibility(map)
       resizeMap()
       renderTownshipBoundary()
+      schedulePoiSearch()
       emit('ready', map)
     })
     // 瓦片/遥测等非致命错误不向页面报错
@@ -602,9 +668,13 @@ watch(
   () => props.showPoiMarkers,
   (show) => {
     if (!map || !cmmapglRef) return
-    if (show && poiSearchCenter) {
-      renderPoiMarkers()
-    } else if (!show) {
+    if (show) {
+      schedulePoiSearch()
+    } else {
+      if (poiSearchDebounceTimer) {
+        clearTimeout(poiSearchDebounceTimer)
+        poiSearchDebounceTimer = null
+      }
       clearPoiMarkers()
     }
   }

ruoyi-screen/src/utils/gisTownshipBoundary.js

@@ -70,6 +70,15 @@ export function getTownshipPoiSearchCenter(feature) {
   return null
 }
 
+/** POI 多边形搜索范围：取乡镇边界外环 [经度, 纬度][] */
+export function getTownshipPoiSearchPolygon(feature) {
+  const ring = getPolygonOuterRing(feature)
+  if (!Array.isArray(ring) || ring.length < 3) {
+    return null
+  }
+  return ring.map(([lng, lat]) => [Number(lng), Number(lat)])
+}
+
 export function getTownshipGeoJson() {
   return townshipGeoJson
 }