From 672ea11598f572e4de08652127ded63c41a08d97 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sun, 5 Apr 2026 01:32:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |   5 +-
 public/js/app.js  | 167 ++++++++++++++++++++++++++--------------------
 2 files changed, 96 insertions(+), 76 deletions(-)

diff --git a/public/index.html b/public/index.html
index 69e1641..dcb81ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,8 @@
     href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
     rel="stylesheet">
   <link rel="stylesheet" href="/css/style.css">
-  <script src="//unpkg.com/globe.gl"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
   <script>
     // Prevent theme flicker
     (function () {
@@ -244,7 +245,7 @@
                 <circle cx="12" cy="12" r="10" />
                 <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
               </svg>
-              全球节点分布
+              全球服务器分布 (3D Map)
             </h2>
           </div>
           <div class="globe-body" id="globeContainer"></div>
diff --git a/public/js/app.js b/public/js/app.js
index 4e2c0f1..af48221 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -92,7 +92,7 @@
   let currentSourceFilter = 'all';
   let currentPage = 1;
   let pageSize = 20;
-  let myGlobe = null;
+  let myMap3D = null;
 
   // ---- Initialize ----
   function init() {
@@ -105,8 +105,8 @@
     // Network chart
     networkChart = new AreaChart(dom.networkCanvas);
 
-    // Initial globe
-    initGlobe();
+    // Initial map
+    initMap3D();
 
     // Event listeners
     dom.btnSettings.addEventListener('click', openSettings);
@@ -360,107 +360,126 @@
     }
   }
 
-  // ---- Global Globe ----
-  function initGlobe() {
+  // ---- Global 3D Map ----
+  async function initMap3D() {
     if (!dom.globeContainer) return;
     
-    if (typeof Globe !== 'function') {
-        console.warn('[Globe] Globe.gl library not loaded. 3D visualization will be disabled.');
-        dom.globeContainer.innerHTML = `
-            <div style="height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 20px;">
-                Globe.gl 库加载失败<br>请检查网络连接或刷新页面
-            </div>
-        `;
+    if (typeof echarts === 'undefined') {
+        console.warn('[Map3D] ECharts library not loaded.');
+        dom.globeContainer.innerHTML = `<div class="chart-empty">地图库加载失败</div>`;
         return;
     }
 
     try {
-        const width = dom.globeContainer.clientWidth || 400;
-        const height = dom.globeContainer.clientHeight || 280;
+        // Fetch map data
+        const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json');
+        const worldJSON = await resp.json();
+        echarts.registerMap('world', worldJSON);
 
-        myGlobe = Globe()
-          (dom.globeContainer)
-          .width(width)
-          .height(height)
-          .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
-          .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
-          .backgroundColor('rgba(0,0,0,0)')
-          .showAtmosphere(true)
-          .atmosphereColor('#6366f1')
-          .atmosphereDaylightAlpha(0.1)
-          .pointsData([])
-          .pointColor(() => '#06b6d4')
-          .pointAltitude(0.05)
-          .pointRadius(0.8)
-          .pointsMerge(true)
-          .pointLabel(d => `
-            <div style="background: rgba(10, 14, 26, 0.9); padding: 8px 12px; border: 1px solid var(--accent-indigo); border-radius: 8px; backdrop-filter: blur(8px);">
-                <div style="font-weight: 700; color: #fff; margin-bottom: 4px;">${escapeHtml(d.job)}</div>
-                <div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div>
-                <div style="font-size: 0.75rem; margin-top: 4px;">
-                    <span style="color: var(--accent-indigo);">BW:</span> ↓${formatBandwidth(d.netRx)} ↑${formatBandwidth(d.netTx)}
-                </div>
-            </div>
-          `);
-
-        // Resizing with initial dimensions
-        myGlobe.width(dom.globeContainer.clientWidth).height(dom.globeContainer.clientHeight);
-
-        const resizeObserver = new ResizeObserver(() => {
-            if (myGlobe && dom.globeContainer.clientWidth > 0) {
-                myGlobe.width(dom.globeContainer.clientWidth).height(dom.globeContainer.clientHeight);
-            }
-        });
-        resizeObserver.observe(dom.globeContainer);
-
-        // Initial view
-        myGlobe.controls().autoRotate = true;
-        myGlobe.controls().autoRotateSpeed = 1.2; // Slightly faster for visual appeal
-        myGlobe.controls().enableZoom = false; 
+        myMap3D = echarts.init(dom.globeContainer);
+        
+        const option = {
+            backgroundColor: 'transparent',
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                backgroundColor: 'rgba(10, 14, 26, 0.9)',
+                borderColor: 'var(--accent-indigo)',
+                textStyle: { color: '#fff', fontSize: 12 },
+                formatter: (params) => {
+                    const d = params.data;
+                    if (!d) return '';
+                    return `
+                        <div style="padding: 4px;">
+                            <div style="font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 4px; padding-bottom: 4px;">${escapeHtml(d.job)}</div>
+                            <div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div>
+                            <div style="font-size: 0.75rem; margin-top: 4px;">
+                                <span style="color: var(--accent-cyan);">BW:</span> ↓${formatBandwidth(d.netRx)} ↑${formatBandwidth(d.netTx)}
+                            </div>
+                        </div>
+                    `;
+                }
+            },
+            geo3D: {
+                map: 'world',
+                shading: 'lambert',
+                environment: 'transparent',
+                light: {
+                    main: { intensity: 1.2, shadow: true, alpha: 45, beta: 45 },
+                    ambient: { intensity: 0.3 }
+                },
+                viewControl: {
+                    autoRotate: true,
+                    autoRotateSpeed: 5,
+                    distance: 80,
+                    alpha: 40,
+                    beta: 0
+                },
+                itemStyle: {
+                    color: '#1a1d2d',
+                    opacity: 1,
+                    borderWidth: 0.8,
+                    borderColor: '#2d334d'
+                },
+                emphasis: {
+                    itemStyle: { color: '#2d334d' }
+                },
+                regions: []
+            },
+            series: [{
+                type: 'scatter3D',
+                coordinateSystem: 'geo3D',
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                    color: '#06b6d4',
+                    opacity: 0.8,
+                    borderWidth: 0.5,
+                    borderColor: '#fff'
+                },
+                label: { show: false },
+                data: []
+            }]
+        };
+
+        myMap3D.setOption(option);
+
+        window.addEventListener('resize', () => myMap3D.resize());
         
-        // Initial data sync if available
         if (allServersData.length > 0) {
-            updateGlobe(allServersData);
+            updateMap3D(allServersData);
         }
     } catch (err) {
-        console.error('[Globe] Initialization failed:', err);
+        console.error('[Map3D] Initialization failed:', err);
     }
   }
 
-  function updateGlobe(servers) {
-    if (!myGlobe) return;
+  function updateMap3D(servers) {
+    if (!myMap3D) return;
 
-    // Filter servers with lat/lng
     const geoData = servers
         .filter(s => s.lat && s.lng)
         .map(s => ({
-            lat: s.lat,
-            lng: s.lng,
+            name: s.job,
+            value: [s.lng, s.lat, 2], // 2 is altitude
             job: s.job,
             city: s.city,
             country: s.country,
             countryName: s.countryName,
             netRx: s.netRx,
-            netTx: s.netTx,
-            size: Math.max(0.2, Math.min(1.5, (s.netRx + s.netTx) / 1024 / 1024 / 5)) // Scale by bandwidth (MB/s)
+            netTx: s.netTx
         }));
 
-    myGlobe.pointsData(geoData);
-    
+    myMap3D.setOption({
+        series: [{ data: geoData }]
+    });
+
     // Update footer stats
     if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
     if (dom.globeTotalRegions) {
         const regions = new Set(geoData.map(d => d.country)).size;
         dom.globeTotalRegions.textContent = regions;
     }
-    
-    // Also add arcs for "traffic flow" if we have multiple servers
-    // For now, let's just show rings or pulses for active traffic
-    myGlobe.ringsData(geoData.filter(d => (d.netRx + d.netTx) > 1024 * 1024)); // Pulse for servers > 1MB/s
-    myGlobe.ringColor(() => '#6366f1');
-    myGlobe.ringMaxRadius(3);
-    myGlobe.ringPropagationSpeed(1);
-    myGlobe.ringRepeatPeriod(1000);
   }
 
   // ---- Update Dashboard ----
@@ -496,7 +515,7 @@
     renderFilteredServers();
     
     // Update globe
-    updateGlobe(data.servers || []);
+    updateMap3D(data.servers || []);
 
     // Flash animation
     if (previousMetrics) {