换成天地图底图服务

frontend/App.vue

@@ -268,22 +268,17 @@ function initMap() {
     attributionControl: false
   })
 
-  const tileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
-    maxZoom: 18,
-    subdomains: 'abcd'
-  }).addTo(map)
-
-  // 瓦片加载失败时自动重试（最多3次，间隔递增）
-  const retryCounts = new Map()
-  tileLayer.on('tileerror', (e) => {
-    const key = e.tile.src
-    const count = retryCounts.get(key) ?? 0
-    if (count >= 3) return
-    retryCounts.set(key, count + 1)
-    setTimeout(() => {
-      e.tile.src = e.tile.src.split('?')[0] + '?t=' + Date.now()
-    }, 500 * (count + 1)) // 500ms / 1000ms / 1500ms
-  })
+  const TIANDITU_KEY = '5316253e2d2d21b707996f1f5748839d'
+  // 矢量底图（白底行政区划）
+  L.tileLayer(
+    `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,
+    { subdomains: '01234567', maxZoom: 18 }
+  ).addTo(map)
+  // 中文地名标注层（叠加在底图上）
+  L.tileLayer(
+    `https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,
+    { subdomains: '01234567', maxZoom: 18 }
+  ).addTo(map)
 
   L.control.attribution({ prefix: false, position: 'bottomright' })
     .addAttribution('大唐双龙传 - 黄易')
@@ -332,7 +327,7 @@ function drawTerritories() {
       const label = L.marker([loc.lat + 0.35, loc.lng], {
         icon: L.divIcon({
           className: '',
-          html: `<div style="color:${f.color};font-size:11px;font-weight:bold;text-shadow:0 0 4px rgba(0,0,0,0.8);white-space:nowrap;text-align:center">${f.name}</div>`,
+          html: `<div style="color:${f.color};font-size:11px;font-weight:bold;text-shadow:0 0 3px #fff,0 0 6px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;white-space:nowrap;text-align:center">${f.name}</div>`,
           iconAnchor: [30, 8]
         })
       })
@@ -369,7 +364,7 @@ function drawLocations() {
     const nameLabel = L.marker([loc.lat - 0.15, loc.lng], {
       icon: L.divIcon({
         className: '',
-        html: `<div style="color:#ccc;font-size:11px;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap;text-align:center">${loc.name}</div>`,
+        html: `<div style="color:#333;font-size:11px;text-shadow:0 0 3px #fff,0 0 6px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;white-space:nowrap;text-align:center">${loc.name}</div>`,
         iconAnchor: [30, 0]
       })
     })

frontend/style.css

@@ -2,6 +2,9 @@
 body { font-family: 'Microsoft YaHei', 'SimSun', sans-serif; background: #1a1a2e; color: #e0e0e0 }
 #app { width: 100%; height: 100vh; overflow: hidden }
 #map { width: 100%; height: 100vh }
+#map .leaflet-tile-pane img {
+  filter: sepia(25%) saturate(60%) brightness(102%) contrast(92%);
+}
 
 .leaflet-popup-content-wrapper {
   background: rgba(30,30,50,0.95) !important;