feat: MapLayer/mapHelper 切换到 mapbox-gl

常驻地图改用官方样式；容器搬迁改为 resize。

src/core/mapHelper.js

@@ -1,8 +1,7 @@
 /**
- * 地图助手（最小集）
- * maptalks@1.12.x 使用 checkSize 刷新容器尺寸
+ * 地图助手（Mapbox）
+ * replace/restore 移动 #map 容器后必须 resize()
  */
-
 class MapHelper {
   _map = null
   _originParent = null
@@ -20,17 +19,17 @@ class MapHelper {
     if (!this._map) return
 
     if (is3D) {
-      this._map.setPitch(45)
-      this._map.setBearing(0)
-      this._map.config('dragRotate', true)
-      this._map.config('dragPitch', true)
+      this._map.easeTo({ pitch: 45, bearing: 0, duration: 0 })
+      this._map.dragRotate.enable()
+      this._map.touchZoomRotate.enableRotation()
+      if (this._map.dragPitch) this._map.dragPitch.enable()
     }
 
     if (is2D) {
-      this._map.setPitch(0)
-      this._map.setBearing(0)
-      this._map.config('dragRotate', false)
-      this._map.config('dragPitch', false)
+      this._map.easeTo({ pitch: 0, bearing: 0, duration: 0 })
+      this._map.dragRotate.disable()
+      this._map.touchZoomRotate.disableRotation()
+      if (this._map.dragPitch) this._map.dragPitch.disable()
     }
   }
 
@@ -39,14 +38,15 @@ class MapHelper {
 
     const el = this._map.getContainer()
     this._originParent = this._originParent || el.parentNode
+    const c = this._map.getCenter()
     this._savedView = {
-      center: this._map.getCenter(),
+      center: [c.lng, c.lat],
       zoom: this._map.getZoom(),
       pitch: this._map.getPitch(),
       bearing: this._map.getBearing(),
     }
     newParent.appendChild(el)
-    this._map.checkSize()
+    this._map.resize()
   }
 
   restoreMapContainer() {
@@ -56,13 +56,15 @@ class MapHelper {
     this._originParent.appendChild(el)
 
     if (this._savedView) {
-      this._map.setCenter(this._savedView.center)
-      this._map.setZoom(this._savedView.zoom)
-      this._map.setPitch(this._savedView.pitch)
-      this._map.setBearing(this._savedView.bearing)
+      this._map.jumpTo({
+        center: this._savedView.center,
+        zoom: this._savedView.zoom,
+        pitch: this._savedView.pitch,
+        bearing: this._savedView.bearing,
+      })
     }
 
-    this._map.checkSize()
+    this._map.resize()
     this._originParent = null
     this._savedView = null
   }

src/layout/MapLayer.vue

@@ -1,33 +1,29 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
-import * as maptalks from 'maptalks'
-import mapConfig, { createTiandituLayerOptions } from '@/config/map'
+import mapboxgl from 'mapbox-gl'
+import mapConfig, { MAP_STYLES } from '@/config/map'
 import commonRefs from '@/utils/commonRefs'
 import mapHelper from '@/core/mapHelper'
-import 'maptalks/dist/maptalks.css'
+import 'mapbox-gl/dist/mapbox-gl.css'
 
 let map = null
 
 function initMap() {
   const tk = mapConfig.token
   if (!tk) {
-    console.error('[MapLayer] 缺少 APP_TIANDITU_TOKEN，跳过地图初始化')
+    console.error('[MapLayer] 缺少 APP_MAPBOX_TOKEN，跳过地图初始化')
     commonRefs.setRef('map', null)
     return
   }
 
-  const layers = createTiandituLayerOptions(tk)
-  const baseLayer = new maptalks.GroupTileLayer('tianditu-base', [
-    new maptalks.TileLayer('tdt-img', layers.img),
-    new maptalks.TileLayer('tdt-cia', layers.cia),
-  ])
-
-  map = new maptalks.Map('map', {
+  mapboxgl.accessToken = tk
+  map = new mapboxgl.Map({
+    container: 'map',
+    style: MAP_STYLES.satellite,
     center: mapConfig.center,
     zoom: mapConfig.zoom,
     minZoom: 3,
-    attribution: false,
-    baseLayer,
+    attributionControl: false,
   })
 
   commonRefs.setRef('map', map)
@@ -35,7 +31,6 @@ function initMap() {
 }
 
 onMounted(() => {
-  // 等布局完成后再初始化，避免容器尺寸为 0
   setTimeout(() => {
     try {
       initMap()

src/styles/prototype.css

@@ -372,8 +372,14 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
 .waypoint-item-actions { display: flex; align-items: center; }.waypoint-item-actions button { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 3px; color: #788792; background: transparent; }.waypoint-item-actions button:hover { color: var(--blue); background: #eaf2fc; }.waypoint-item-actions button:last-child:hover { color: var(--red); background: #fff0f0; }.waypoint-item-actions button svg { width: 11px; }
 .route-form-error { min-height: 25px; padding-top: 8px; color: var(--red); font-size: 10px; }
 .route-planner-map { position: relative; min-width: 0; min-height: 430px; overflow: hidden; background: #75887a; cursor: crosshair; isolation: isolate; }
-.route-planner-map > .maptalks-wrapper,
-.route-planner-map > #map { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; }
+.route-planner-map > #map,
+.route-planner-map > .mapboxgl-map {
+  position: absolute !important;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+  z-index: 0;
+}
 .route-map-status, .route-map-legend { position: absolute; z-index: 5; display: flex; align-items: center; border-radius: 4px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(20,36,45,.13); color: #52616d; font-size: 10px; pointer-events: none; }
 .route-map-status { top: 12px; right: 12px; height: 30px; padding: 0 9px; gap: 13px; }.route-map-status span { display: flex; align-items: center; gap: 5px; }.route-map-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
 .route-map-legend { right: 12px; bottom: 12px; height: 31px; padding: 0 10px; gap: 11px; }.route-map-legend span { display: flex; align-items: center; gap: 4px; }.route-map-legend i { width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #7e8c97; }.route-map-legend i.start { background: var(--green); }.route-map-legend i.end { background: #c56c28; }