修复地图渲染的问题
This commit is contained in:
@@ -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: [{
|
||||
|
||||
Reference in New Issue
Block a user