From e03b317289bcbcc38a0b6213da796c54c6d181a9 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Thu, 27 Aug 2026 17:52:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=91=E6=8E=A7=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=94=B9=E6=B0=B4=E6=BB=B4=20symbol=20=E5=B9=B6=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=85=A8=E7=90=83=E6=80=BB=E8=A7=88=E7=9B=B8=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

加载状态 pin；清选中/查看全部回中国居中；去掉进页 fitBounds。
---
 src/views/MonitorView/MonitorView.vue | 160 +++++++++++++++++---------
 1 file changed, 104 insertions(+), 56 deletions(-)

diff --git a/src/views/MonitorView/MonitorView.vue b/src/views/MonitorView/MonitorView.vue
index 7af3f6f..fb76634 100644
--- a/src/views/MonitorView/MonitorView.vue
+++ b/src/views/MonitorView/MonitorView.vue
@@ -362,28 +362,29 @@
 <script setup>
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import mapboxgl from 'mapbox-gl'
 import { useDeviceStore } from '@/stores/modules/devicesStore'
 import { useUiStore } from '@/stores/modules/uiStore'
 import { useUserStore } from '@/stores/modules/userStore'
 import commonRefs from '@/utils/commonRefs'
 import mapHelper from '@/core/mapHelper'
-import mapConfig, { MAP_STYLES } from '@/config/map'
+import mapConfig, { MAP_STYLES, MAP_OVERVIEW, MAP_VIEW } from '@/config/map'
 import LivePlayer from '@/components/LivePlayer.vue'
 import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '@/api/live'
 
 const DEVICE_SOURCE = 'monitor-devices'
-const DEVICE_CIRCLE = 'monitor-devices-circle'
+const DEVICE_SYMBOL = 'monitor-devices-symbol'
+const DEVICE_HALO = 'monitor-devices-halo'
 const DEVICE_LABEL = 'monitor-devices-label'
 const BINDING_SOURCE = 'monitor-binding'
 const BINDING_LINE = 'monitor-binding-line'
 
-const STATUS_COLORS = {
-  online: '#21a06a',
-  mission: '#2d82da',
-  alarm: '#cc3d43',
-  offline: '#84909b',
-  pending: '#c48a2a',
+const PIN_KINDS = ['dock', 'drone']
+const PIN_STATUSES = ['online', 'mission', 'alarm', 'offline', 'pending']
+
+function pinImageId(kind, status) {
+  const s = PIN_STATUSES.includes(status) ? status : 'offline'
+  const k = PIN_KINDS.includes(kind) ? kind : 'dock'
+  return `${k}-pin-${s}`
 }
 
 const devices = useDeviceStore()
@@ -442,9 +443,6 @@ const mapMarkers = computed(() =>
   Object.values(devices.assets).filter((a) => a.hasCoordinates && !a.inDock)
 )
 
-function statusColor(statusClass) {
-  return STATUS_COLORS[statusClass] || STATUS_COLORS.offline
-}
 
 function devicesFeatureCollection() {
   return {
@@ -455,6 +453,7 @@ function devicesFeatureCollection() {
         const lat = Number(asset.latitude)
         if (!Number.isFinite(lon) || !Number.isFinite(lat)) return null
         const selected = selectedId.value === asset.id
+        const status = asset.statusClass || 'offline'
         return {
           type: 'Feature',
           // asset.id 多为字符串，省略 numeric Feature.id，靠 setData 全量刷新
@@ -462,9 +461,9 @@ function devicesFeatureCollection() {
             assetId: String(asset.id),
             name: asset.name || '',
             kind: asset.type,
+            status,
             selected: selected ? 1 : 0,
-            color: statusColor(asset.statusClass),
-            radius: asset.type === 'drone' ? (selected ? 10 : 8) : (selected ? 12 : 10),
+            icon: pinImageId(asset.type, status),
           },
           geometry: { type: 'Point', coordinates: [lon, lat] },
         }
@@ -490,14 +489,40 @@ function bindingFeatureCollection() {
   }
 }
 
-function ensureMonitorLayers() {
+async function ensurePinImages(map) {
+  if (!map) return
+  const jobs = []
+  for (const kind of PIN_KINDS) {
+    for (const status of PIN_STATUSES) {
+      const id = pinImageId(kind, status)
+      if (map.hasImage(id)) continue
+      const url = `/assets/icons/${id}.svg`
+      jobs.push(
+        new Promise((resolve) => {
+          map.loadImage(url, (err, image) => {
+            if (!err && image && !map.hasImage(id)) {
+              map.addImage(id, image, { pixelRatio: 2 })
+            }
+            resolve()
+          })
+        }),
+      )
+    }
+  }
+  await Promise.all(jobs)
+}
+
+async function ensureMonitorLayers() {
   if (!mapInstance || !mapInstance.isStyleLoaded()) return
+  await ensurePinImages(mapInstance)
+
   if (!mapInstance.getSource(DEVICE_SOURCE)) {
     mapInstance.addSource(DEVICE_SOURCE, { type: 'geojson', data: devicesFeatureCollection() })
   }
   if (!mapInstance.getSource(BINDING_SOURCE)) {
     mapInstance.addSource(BINDING_SOURCE, { type: 'geojson', data: bindingFeatureCollection() })
   }
+
   if (!mapInstance.getLayer(BINDING_LINE)) {
     mapInstance.addLayer({
       id: BINDING_LINE,
@@ -511,33 +536,51 @@ function ensureMonitorLayers() {
       },
     })
   }
-  if (!mapInstance.getLayer(DEVICE_CIRCLE)) {
+
+  if (!mapInstance.getLayer(DEVICE_HALO)) {
     mapInstance.addLayer({
-      id: DEVICE_CIRCLE,
+      id: DEVICE_HALO,
       type: 'circle',
       source: DEVICE_SOURCE,
+      filter: ['==', ['get', 'selected'], 1],
       paint: {
-        'circle-radius': ['get', 'radius'],
-        'circle-color': ['get', 'color'],
-        'circle-stroke-color': '#fff',
-        'circle-stroke-width': [
+        'circle-radius': 22,
+        'circle-color': 'rgba(45,130,218,0.22)',
+        'circle-stroke-width': 0,
+      },
+    })
+  }
+
+  if (!mapInstance.getLayer(DEVICE_SYMBOL)) {
+    mapInstance.addLayer({
+      id: DEVICE_SYMBOL,
+      type: 'symbol',
+      source: DEVICE_SOURCE,
+      layout: {
+        'icon-image': ['get', 'icon'],
+        'icon-size': [
           'case',
           ['==', ['get', 'selected'], 1],
-          3,
-          2,
+          1.25,
+          1,
         ],
+        'icon-anchor': 'bottom',
+        'icon-allow-overlap': true,
+        'icon-ignore-placement': true,
       },
     })
   }
+
   if (!mapInstance.getLayer(DEVICE_LABEL)) {
     mapInstance.addLayer({
       id: DEVICE_LABEL,
       type: 'symbol',
       source: DEVICE_SOURCE,
+      minzoom: 4,
       layout: {
         'text-field': ['get', 'name'],
         'text-size': 11,
-        'text-offset': [0, 1.4],
+        'text-offset': [0, 0.6],
         'text-anchor': 'top',
         'text-allow-overlap': false,
       },
@@ -548,12 +591,13 @@ function ensureMonitorLayers() {
       },
     })
   }
+
   layersReady = true
 }
 
 function clearMonitorLayers() {
   if (!mapInstance) return
-  for (const id of [DEVICE_LABEL, DEVICE_CIRCLE, BINDING_LINE]) {
+  for (const id of [DEVICE_LABEL, DEVICE_SYMBOL, DEVICE_HALO, BINDING_LINE]) {
     if (mapInstance.getLayer(id)) mapInstance.removeLayer(id)
   }
   for (const id of [DEVICE_SOURCE, BINDING_SOURCE]) {
@@ -623,11 +667,11 @@ function cancelPendingMapHandlers() {
   }
 }
 
-function rebuildAfterStyle() {
+async function rebuildAfterStyle() {
   pendingStyleHandler = null
   if (!mapInstance) return
   layersReady = false
-  ensureMonitorLayers()
+  await ensureMonitorLayers()
   syncMarkers()
   updateMapScale()
 }
@@ -652,33 +696,23 @@ function setMapMode(mode) {
   mapInstance.once('style.load', pendingStyleHandler)
 }
 
+function resetOverviewCamera() {
+  if (!mapInstance) return
+  mapInstance.easeTo({
+    center: MAP_OVERVIEW.center,
+    zoom: MAP_OVERVIEW.zoom,
+    pitch: 0,
+    bearing: 0,
+    duration: 450,
+  })
+}
+
 function fitAll() {
   if (selectedId.value) {
     clearSelection()
     return
   }
-  fitAllMarkers()
-}
-
-function fitAllMarkers() {
-  if (!mapInstance) return
-  const coords = mapMarkers.value
-    .map((a) => [Number(a.longitude), Number(a.latitude)])
-    .filter(([lon, lat]) => Number.isFinite(lon) && Number.isFinite(lat))
-
-  if (!coords.length) {
-    mapInstance.jumpTo({ center: mapConfig.center, zoom: mapConfig.zoom })
-    return
-  }
-  if (coords.length === 1) {
-    mapInstance.easeTo({ center: coords[0], zoom: 16, duration: 450 })
-    return
-  }
-  const bounds = coords.reduce(
-    (b, c) => b.extend(c),
-    new mapboxgl.LngLatBounds(coords[0], coords[0]),
-  )
-  mapInstance.fitBounds(bounds, { padding: 60, duration: 450 })
+  resetOverviewCamera()
 }
 
 function flyToSelected() {
@@ -690,7 +724,7 @@ function flyToSelected() {
   if (!Number.isFinite(lon) || !Number.isFinite(lat)) return
   mapInstance.easeTo({
     center: [lon, lat],
-    zoom: Math.max(mapInstance.getZoom(), 16),
+    zoom: Math.max(mapInstance.getZoom(), MAP_VIEW.detailZoom),
     duration: 450,
   })
 }
@@ -698,7 +732,7 @@ function flyToSelected() {
 function onMapClick(e) {
   if (suppressMapClick) return
   if (!layersReady) return
-  const layers = [DEVICE_CIRCLE, DEVICE_LABEL].filter((id) => mapInstance.getLayer(id))
+  const layers = [DEVICE_SYMBOL, DEVICE_LABEL].filter((id) => mapInstance.getLayer(id))
   if (!layers.length) return
   const feats = mapInstance.queryRenderedFeatures(e.point, {
     layers,
@@ -713,6 +747,16 @@ function onMapClick(e) {
   clearSelection()
 }
 
+function onSymbolEnter() {
+  if (!mapInstance) return
+  mapInstance.getCanvas().style.cursor = 'pointer'
+}
+
+function onSymbolLeave() {
+  if (!mapInstance) return
+  mapInstance.getCanvas().style.cursor = ''
+}
+
 async function setupMap() {
   const map = await commonRefs.getRef('map')
   if (!map) {
@@ -722,13 +766,13 @@ async function setupMap() {
   mapInstance = map
   mapHelper.toggleMapMode({ is2D: true })
 
-  const onReady = () => {
+  const onReady = async () => {
     pendingLoadHandler = null
     if (!mapInstance) return
-    ensureMonitorLayers()
+    await ensureMonitorLayers()
     syncMarkers()
     if (selectedId.value) flyToSelected()
-    else fitAllMarkers()
+    else resetOverviewCamera()
     updateMapScale()
   }
 
@@ -740,6 +784,8 @@ async function setupMap() {
   }
 
   map.on('click', onMapClick)
+  map.on('mouseenter', DEVICE_SYMBOL, onSymbolEnter)
+  map.on('mouseleave', DEVICE_SYMBOL, onSymbolLeave)
   map.on('zoom', updateMapScale)
   map.on('move', updateMapScale)
 }
@@ -748,6 +794,8 @@ function teardownMap() {
   cancelPendingMapHandlers()
   if (mapInstance) {
     mapInstance.off('click', onMapClick)
+    mapInstance.off('mouseenter', DEVICE_SYMBOL, onSymbolEnter)
+    mapInstance.off('mouseleave', DEVICE_SYMBOL, onSymbolLeave)
     mapInstance.off('zoom', updateMapScale)
     mapInstance.off('move', updateMapScale)
     clearMonitorLayers()
@@ -783,7 +831,7 @@ watch(mapMarkers, () => {
 watch(selectedId, () => {
   syncMarkers()
   if (selectedId.value) flyToSelected()
-  else fitAllMarkers()
+  else resetOverviewCamera()
 })
 
 const selectedAsset = computed(() => (selectedId.value ? devices.asset(selectedId.value) : null))
@@ -1088,7 +1136,7 @@ async function reload() {
     })
     syncMarkers()
     if (selectedId.value) flyToSelected()
-    else fitAllMarkers()
+    else resetOverviewCamera()
     ui.toast('设备状态已刷新')
   } catch (e) {
     ui.toast(e.message || '刷新设备状态失败')