From 767e69e456c75482a88790624490e9eaa6f926d3 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 13 Apr 2026 14:15:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20monitor=20=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 react-query 替代 useEffect 获取远程地图数据
- 改用 gw.alipayobjects.com 远程 JSON 数据源
- 地图样式从 blank 改为 light

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../monitor/components/Map/index.tsx          | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/pages/dashboard/monitor/components/Map/index.tsx b/src/pages/dashboard/monitor/components/Map/index.tsx
index bc33d877..43cc2b16 100644
--- a/src/pages/dashboard/monitor/components/Map/index.tsx
+++ b/src/pages/dashboard/monitor/components/Map/index.tsx
@@ -1,7 +1,6 @@
 import { PageLoading } from '@ant-design/pro-components';
 import { HeatmapLayer, MapboxScene, PointLayer } from '@antv/l7-react';
-import { useEffect, useState } from 'react';
-import { queryMapGeo, queryMapGrid } from '@/pages/dashboard/monitor/service';
+import { useQuery } from '@tanstack/react-query';
 
 const colors = [
   '#eff3ff',
@@ -14,31 +13,29 @@ const colors = [
 ];
 
 export default function MonitorMap() {
-  const [data, setData] = useState<Record<string, unknown>[] | null>(null);
-  const [grid, setGrid] = useState<Record<string, unknown>[] | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    async function fetchData() {
+  const { isLoading, data } = useQuery({
+    queryKey: ['map-data'],
+    queryFn: async () => {
       const [geoData, gridData] = await Promise.all([
-        queryMapGeo(),
-        queryMapGrid(),
+        fetch(
+          'https://gw.alipayobjects.com/os/bmw-prod/c5dba875-b6ea-4e88-b778-66a862906c93.json',
+        ).then((d) => d.json()),
+        fetch(
+          'https://gw.alipayobjects.com/os/bmw-prod/8990e8b4-c58e-419b-afb9-8ea3daff2dd1.json',
+        ).then((d) => d.json()),
       ]);
-      setData(geoData);
-      setGrid(gridData);
-      setLoading(true);
-    }
-    fetchData();
-  }, []);
+      return { geoData, grid: gridData };
+    },
+  });
 
-  return loading === false ? (
+  return isLoading ? (
     <PageLoading />
   ) : (
     <MapboxScene
       map={{
         center: [110.19382669582967, 50.258134],
         pitch: 0,
-        style: 'blank',
+        style: 'light',
         zoom: 1,
       }}
       style={{
@@ -47,11 +44,11 @@ export default function MonitorMap() {
         height: '452px',
       }}
     >
-      {grid && (
+      {data?.grid && (
         <HeatmapLayer
           key="1"
           source={{
-            data: grid,
+            data: data.grid,
             transforms: [
               {
                 type: 'hexagon',
@@ -73,14 +70,14 @@ export default function MonitorMap() {
           }}
         />
       )}
-      {data && [
+      {data?.geoData && [
         <PointLayer
           key="2"
           options={{
             autoFit: true,
           }}
           source={{
-            data,
+            data: data.geoData,
           }}
           scale={{
             values: {
@@ -117,7 +114,7 @@ export default function MonitorMap() {
         <PointLayer
           key="5"
           source={{
-            data,
+            data: data.geoData,
           }}
           color={{
             values: '#fff',