along/Novel-Map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

换成天地图底图服务

Browse Source
This commit is contained in:
龙澳
2026-03-31 16:55:26 +08:00
parent 08d67c9ec8
commit 7b1b92d825
2 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/App.vue
View File

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

3
frontend/style.css
View File

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