feats: 加入对实时定位的支持

Author: 1bananachicken

README.md

@@ -107,3 +107,29 @@ pixelY = worldOriginPixel.y - lat * pixelsPerWorldUnit
 npm run build
 npm run qa
 ```
+
+## MaaNTE 实时定位
+
+页面会自动连接 `ws://127.0.0.1:8765`，接收 MaaNTE 的 Navi 定位状态，并在地图上展示玩家位置箭头、像素坐标和朝向角度。
+
+在 MaaNTE 中运行 `MapLocator.json` 提供的 `NaviWebSocket` 节点即可同时启动 NCC 定位、方向预测和本地广播。
+
+需要使用其他地址时，在构建前设置 `VITE_MAANTE_NAVI_WEBSOCKET_URL`。消息格式如下：
+
+```json
+{
+  "type": "maan-nav-state",
+  "version": 1,
+  "position": {
+    "pixelX": 5788,
+    "pixelY": 8902,
+    "score": 0.82,
+    "mode": "local",
+    "sourceWidth": 11264,
+    "sourceHeight": 11264
+  },
+  "angle": 123.4,
+  "angleConfidence": 0.96,
+  "timestamp": 1770000000.0
+}
+```

public/images/map_webview_pointer.png

@@ -7,6 +7,7 @@ import {
   MAP_HEIGHT,
   MAP_WIDTH,
   TILE_SIZE,
+  mapPixelToMapLatLng,
   mapLatLngToWorld,
   worldToMapLatLng,
 } from './data/locations'
@@ -26,6 +27,8 @@ const bounds = L.latLngBounds([-MAP_HEIGHT, 0], [0, MAP_WIDTH])
 const INITIAL_ZOOM = -3
 const MIN_ZOOM = -3
 const MARKER_FILTERS_STORAGE_KEY = 'nte-marker-filters'
+const NAVIGATION_WEBSOCKET_URL = import.meta.env.VITE_MAANTE_NAVI_WEBSOCKET_URL || 'ws://127.0.0.1:8765'
+const NAVIGATION_RECONNECT_DELAY = 2000
 
 function readStoredIds(key) {
   try {
@@ -59,6 +62,17 @@ const routePanelOpen = ref(false)
 const activeRouteId = ref(null)
 const isAddingSegment = ref(false)
 const segmentMarkerIds = ref([])
+const navigationConnection = ref('disconnected')
+const navigationState = ref({
+  position: null,
+  angle: null,
+  angleConfidence: 0,
+})
+const navigationConnectionLabel = computed(() => ({
+  connected: 'CONNECTED',
+  connecting: 'CONNECTING',
+  disconnected: 'OFFLINE',
+})[navigationConnection.value])
 
 const emptyLocationForm = () => ({
   name: '',
@@ -82,6 +96,11 @@ const editorCategoryGroups = computed(() => [...new Set(editorCategories.value.m
 let map
 let markerLayer
 let arrowLayer
+let navigationMarker
+let navigationSocket
+let navigationReconnectTimer
+let navigationClientStopped = false
+let navigationDisplayAngle = null
 const markerLookup = new Map()
 
 const activeRoute = computed(() => routes.value.find((route) => route.id === activeRouteId.value) || null)
@@ -301,6 +320,102 @@ function renderRouteArrows() {
   activeRoute.value?.segments.forEach((segment, index) => drawMarkerPath(segment.markerIds, colors[index % colors.length]))
 }
 
+function createNavigationIcon() {
+  return L.divIcon({
+    className: 'navigation-arrow-shell',
+    html: `<div class="navigation-arrow"><img src="${publicAssetUrl('/images/map_webview_pointer.png')}" alt=""></div>`,
+    iconSize: [30, 35],
+    iconAnchor: [15, 18],
+  })
+}
+
+function updateNavigationMarkerAngle(angle) {
+  if (!Number.isFinite(angle)) return
+  if (navigationDisplayAngle === null) {
+    navigationDisplayAngle = angle
+  } else {
+    const delta = ((angle - navigationDisplayAngle + 540) % 360) - 180
+    navigationDisplayAngle += delta
+  }
+  const image = navigationMarker?.getElement()?.querySelector('.navigation-arrow img')
+  if (image) image.style.transform = `rotate(${navigationDisplayAngle}deg)`
+}
+
+function renderNavigationArrow() {
+  if (!map || !navigationState.value.position) {
+    navigationMarker?.setOpacity(0)
+    return
+  }
+  if (!navigationMarker) {
+    navigationMarker = L.marker(mapPixelToMapLatLng(navigationState.value.position), {
+      icon: createNavigationIcon(),
+      interactive: false,
+      keyboard: false,
+      zIndexOffset: 1000000,
+    }).addTo(map)
+  }
+  navigationMarker.setLatLng(mapPixelToMapLatLng(navigationState.value.position))
+  navigationMarker.setOpacity(1)
+  const arrow = navigationMarker.getElement()?.querySelector('.navigation-arrow')
+  if (arrow) {
+    arrow.classList.toggle('navigation-arrow--angle-missing', navigationState.value.angle === null)
+  }
+  updateNavigationMarkerAngle(navigationState.value.angle)
+}
+
+function handleNavigationMessage(event) {
+  try {
+    const payload = JSON.parse(event.data)
+    if (payload.type !== 'maan-nav-state' || payload.version !== 1) return
+    const pixelX = Number(payload.position?.pixelX)
+    const pixelY = Number(payload.position?.pixelY)
+    const sourceWidth = Number(payload.position?.sourceWidth)
+    const sourceHeight = Number(payload.position?.sourceHeight)
+    const angle = Number(payload.angle)
+    navigationState.value = {
+      position: Number.isFinite(pixelX) && Number.isFinite(pixelY)
+        ? {
+            pixelX,
+            pixelY,
+            sourceWidth: Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : MAP_WIDTH,
+            sourceHeight: Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : MAP_HEIGHT,
+          }
+        : null,
+      angle: payload.angle !== null && Number.isFinite(angle) ? angle : null,
+      angleConfidence: Number(payload.angleConfidence) || 0,
+    }
+    renderNavigationArrow()
+  } catch {
+    // Ignore malformed messages and continue consuming the local stream.
+  }
+}
+
+function scheduleNavigationReconnect() {
+  if (navigationClientStopped || navigationReconnectTimer) return
+  navigationReconnectTimer = window.setTimeout(() => {
+    navigationReconnectTimer = null
+    connectNavigationSocket()
+  }, NAVIGATION_RECONNECT_DELAY)
+}
+
+function connectNavigationSocket() {
+  if (navigationClientStopped || navigationSocket) return
+  navigationConnection.value = 'connecting'
+  const socket = new WebSocket(NAVIGATION_WEBSOCKET_URL)
+  navigationSocket = socket
+  socket.addEventListener('open', () => {
+    if (navigationSocket === socket) navigationConnection.value = 'connected'
+  })
+  socket.addEventListener('message', handleNavigationMessage)
+  socket.addEventListener('close', () => {
+    if (navigationSocket !== socket) return
+    navigationSocket = null
+    navigationConnection.value = 'disconnected'
+    scheduleNavigationReconnect()
+  })
+  socket.addEventListener('error', () => socket.close())
+}
+
 function focusSegment(segment) {
   if (!map) return
   const points = segment.markerIds.map((id) => locationLookup.value[id]).filter(Boolean).map(worldToMapLatLng)
@@ -577,10 +692,15 @@ onMounted(async () => {
   mapElement.value.dataset.minZoom = String(map.getMinZoom())
   mapElement.value.dataset.initialZoom = String(map.getZoom())
   renderMarkers()
+  connectNavigationSocket()
   window.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
+  navigationClientStopped = true
+  if (navigationReconnectTimer) window.clearTimeout(navigationReconnectTimer)
+  navigationSocket?.close()
+  navigationMarker?.remove()
   window.removeEventListener('keydown', handleKeydown)
   map?.remove()
 })
@@ -721,6 +841,9 @@ onUnmounted(() => {
     <div class="map-hud glass-panel">
       <button type="button" @click="resetView">重置视野</button>
       <span>LAT {{ coordinates.lat.toFixed(2) }}</span><span>LNG {{ coordinates.lng.toFixed(2) }}</span>
+      <span class="navigation-status" :class="`navigation-status--${navigationConnection}`">NAVI {{ navigationConnectionLabel }}</span>
+      <span v-if="navigationState.position">POS {{ navigationState.position.pixelX.toFixed(0) }}, {{ navigationState.position.pixelY.toFixed(0) }}</span>
+      <span v-if="navigationState.angle !== null">ANGLE {{ navigationState.angle.toFixed(1) }}°</span>
     </div>
     <div v-if="editorMode" class="editor-tip glass-panel">编辑模式：点击地图空白处添加点位</div>
     <div v-if="statusMessage" class="status-toast glass-panel">{{ statusMessage }}</div>

src/App.vue

@@ -20,3 +20,10 @@ export function mapLatLngToWorld({ lat, lng }) {
     lng: (lng - MAP_CONFIG.worldOriginPixel.x) / MAP_CONFIG.pixelsPerWorldUnit,
   }
 }
+
+export function mapPixelToMapLatLng({ pixelX, pixelY, sourceWidth = MAP_WIDTH, sourceHeight = MAP_HEIGHT }) {
+  return [
+    -pixelY * MAP_HEIGHT / sourceHeight,
+    pixelX * MAP_WIDTH / sourceWidth,
+  ]
+}

src/data/locations.js

@@ -794,6 +794,18 @@ kbd {
   font-size: 12px;
 }
 
+.navigation-status {
+  color: #a7a7a7;
+}
+
+.navigation-status--connected {
+  color: #b8fff2;
+}
+
+.navigation-status--connecting {
+  color: #ffe0a6;
+}
+
 .detail-card + .map-hud {
   right: 400px;
 }
@@ -802,6 +814,31 @@ kbd {
   background: transparent;
 }
 
+.navigation-arrow-shell {
+  background: transparent;
+}
+
+.navigation-arrow {
+  display: flex;
+  width: 30px;
+  height: 35px;
+  align-items: center;
+  justify-content: center;
+}
+
+.navigation-arrow img {
+  width: 30px;
+  height: 35px;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
+  image-rendering: pixelated;
+  transform-origin: 50% 50%;
+  transition: transform 100ms linear;
+}
+
+.navigation-arrow--angle-missing {
+  opacity: 0.62;
+}
+
 .map-marker {
   position: relative;
   display: grid;