diff --git a/frontend/App.vue b/frontend/App.vue index b0592e6..be18e37 100644 --- a/frontend/App.vue +++ b/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: `
${f.name}
`, + html: `
${f.name}
`, iconAnchor: [30, 8] }) }) @@ -369,7 +364,7 @@ function drawLocations() { const nameLabel = L.marker([loc.lat - 0.15, loc.lng], { icon: L.divIcon({ className: '', - html: `
${loc.name}
`, + html: `
${loc.name}
`, iconAnchor: [30, 0] }) }) diff --git a/frontend/style.css b/frontend/style.css index dc0907d..8eba88f 100644 --- a/frontend/style.css +++ b/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;