From e66905e57f4f764b515a955a612d10f4c79b5ea4 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sun, 5 Apr 2026 01:34:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  3 +-
 public/js/app.js  | 77 ++++++++++++++++++++---------------------------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/public/index.html b/public/index.html
index dcb81ec..026f5a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,6 @@
     rel="stylesheet">
   <link rel="stylesheet" href="/css/style.css">
   <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 () {
@@ -245,7 +244,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 af48221..e076dd8 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 myMap3D = null;
+  let myMap2D = null;
 
   // ---- Initialize ----
   function init() {
@@ -106,7 +106,7 @@
     networkChart = new AreaChart(dom.networkCanvas);
 
     // Initial map
-    initMap3D();
+    initMap2D();
 
     // Event listeners
     dom.btnSettings.addEventListener('click', openSettings);
@@ -360,12 +360,12 @@
     }
   }
 
-  // ---- Global 3D Map ----
-  async function initMap3D() {
+  // ---- Global 2D Map ----
+  async function initMap2D() {
     if (!dom.globeContainer) return;
     
     if (typeof echarts === 'undefined') {
-        console.warn('[Map3D] ECharts library not loaded.');
+        console.warn('[Map2D] ECharts library not loaded.');
         dom.globeContainer.innerHTML = `<div class="chart-empty">地图库加载失败</div>`;
         return;
     }
@@ -376,7 +376,7 @@
         const worldJSON = await resp.json();
         echarts.registerMap('world', worldJSON);
 
-        myMap3D = echarts.init(dom.globeContainer);
+        myMap2D = echarts.init(dom.globeContainer);
         
         const option = {
             backgroundColor: 'transparent',
@@ -400,68 +400,57 @@
                     `;
                 }
             },
-            geo3D: {
+            geo: {
                 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
+                roam: true,
+                emphasis: {
+                  label: { show: false },
+                  itemStyle: { areaColor: '#2d334d' }
                 },
                 itemStyle: {
-                    color: '#1a1d2d',
-                    opacity: 1,
-                    borderWidth: 0.8,
-                    borderColor: '#2d334d'
+                    areaColor: '#1a1d2d',
+                    borderColor: '#2d334d',
+                    borderWidth: 1
                 },
-                emphasis: {
-                    itemStyle: { color: '#2d334d' }
-                },
-                regions: []
+                select: {
+                  itemStyle: { areaColor: '#2d334d' }
+                }
             },
             series: [{
-                type: 'scatter3D',
-                coordinateSystem: 'geo3D',
-                symbol: 'circle',
-                symbolSize: 8,
+                type: 'effectScatter',
+                coordinateSystem: 'geo',
+                showEffectOn: 'render',
+                rippleEffect: { brushType: 'stroke', scale: 4, period: 4 },
+                symbolSize: 6,
                 itemStyle: {
                     color: '#06b6d4',
-                    opacity: 0.8,
-                    borderWidth: 0.5,
-                    borderColor: '#fff'
+                    shadowBlur: 10,
+                    shadowColor: '#06b6d4'
                 },
-                label: { show: false },
                 data: []
             }]
         };
 
-        myMap3D.setOption(option);
+        myMap2D.setOption(option);
 
-        window.addEventListener('resize', () => myMap3D.resize());
+        window.addEventListener('resize', () => myMap2D.resize());
         
         if (allServersData.length > 0) {
-            updateMap3D(allServersData);
+            updateMap2D(allServersData);
         }
     } catch (err) {
-        console.error('[Map3D] Initialization failed:', err);
+        console.error('[Map2D] Initialization failed:', err);
     }
   }
 
-  function updateMap3D(servers) {
-    if (!myMap3D) return;
+  function updateMap2D(servers) {
+    if (!myMap2D) return;
 
     const geoData = servers
         .filter(s => s.lat && s.lng)
         .map(s => ({
             name: s.job,
-            value: [s.lng, s.lat, 2], // 2 is altitude
+            value: [s.lng, s.lat],
             job: s.job,
             city: s.city,
             country: s.country,
@@ -470,7 +459,7 @@
             netTx: s.netTx
         }));
 
-    myMap3D.setOption({
+    myMap2D.setOption({
         series: [{ data: geoData }]
     });
 
@@ -515,7 +504,7 @@
     renderFilteredServers();
     
     // Update globe
-    updateMap3D(data.servers || []);
+    updateMap2D(data.servers || []);
 
     // Flash animation
     if (previousMetrics) {