修复地图渲染的问题

This commit is contained in:
CN-JS-HuiBai
2026-04-06 00:45:17 +08:00
parent cc3c67eae9
commit b2f14528a9
2 changed files with 100 additions and 75 deletions

View File

@@ -569,23 +569,32 @@
const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json');
const worldJSON = await resp.json();
// Transform to Pacific-centered: shift longitudes < -20 to 340-360 range
// This puts America on the right of Asia
// Transform to Pacific-centered correctly
const transformCoords = (coords) => {
if (!Array.isArray(coords)) return;
if (typeof coords[0] === 'number') return; // Point
if (typeof coords[0][0] === 'number') { // Ring
// Calculate average to decide if we should shift the whole ring
let sum = 0;
coords.forEach(pt => sum += pt[0]);
let avg = sum / coords.length;
if (avg < -20) {
coords.forEach(pt => pt[0] += 360);
}
// Fix internal wrap-around jumps to keep polygons contiguous
for (let i = 1; i < coords.length; i++) {
let prev = coords[i - 1][0];
while (coords[i][0] - prev > 180) coords[i][0] -= 360;
while (coords[i][0] - prev < -180) coords[i][0] += 360;
}
} else {
coords.forEach(transformCoords);
}
};
worldJSON.features.forEach(feature => {
if (feature.geometry.type === 'Polygon') {
feature.geometry.coordinates.forEach(ring => {
ring.forEach(coords => {
if (coords[0] < -20) coords[0] += 360;
});
});
} else if (feature.geometry.type === 'MultiPolygon') {
feature.geometry.coordinates.forEach(polygon => {
polygon.forEach(ring => {
ring.forEach(coords => {
if (coords[0] < -20) coords[0] += 360;
});
});
});
if (feature.geometry && feature.geometry.coordinates) {
transformCoords(feature.geometry.coordinates);
}
});
@@ -625,19 +634,20 @@
geo: {
map: 'world',
roam: true,
center: [165, 20], // Centered in Pacific
center: [160, 25], // Centered slightly better for global view
zoom: 1.1,
aspectScale: 0.85, // Adjust aspect ratio to reduce vertical stretching in northern regions
emphasis: {
label: { show: false },
itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
},
itemStyle: {
areaColor: isLight ? '#eef0f5' : '#1a1d2d',
areaColor: isLight ? '#f4f6fa' : '#1a1d2e',
borderColor: isLight ? '#cbd5e1' : '#2d334d',
borderWidth: 1
},
select: {
itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' }
}
},
series: [{