修复热力图模块的问题 更改了路由

Author: CzNd

…s/_layout/passenger_density_heat_map.tsx …fic_analysis/PassengerDensityHeatMap.tsxfrontend/src/routes/_layout/passenger_density_heat_map.tsx renamed to frontend/src/components/Traffic_analysis/PassengerDensityHeatMap.tsx frontend/src/routes/_layout/passenger_density_heat_map.tsx renamed to frontend/src/components/Traffic_analysis/PassengerDensityHeatMap.tsx

@@ -1,14 +1,9 @@
 import React, { useEffect, useRef, useState } from "react"
 import { Box, Container, Heading, Text, Flex, IconButton, VStack, Input } from "@chakra-ui/react"
-import { createFileRoute } from "@tanstack/react-router"
 import { FiArrowLeft, FiMaximize2, FiMinimize2 } from "react-icons/fi"
 import { useNavigate } from "@tanstack/react-router"
 
-export const Route = createFileRoute("/_layout/passenger_density_heat_map")({
-  component: StaticHeatmap,
-})
-
-function StaticHeatmap() {
+export default function PassengerDensityHeatMap() {
   const mapRef = useRef<HTMLDivElement>(null)
   const navigate = useNavigate()
   const [startUtc, setStartUtc] = useState("20130912011417")

frontend/src/components/Traffic_analysis/VehicleTrajectory.tsx

@@ -22,6 +22,7 @@ export default function VehicleTrajectory() {
   useEffect(() => {
     const initMap = () => {
       if (typeof window !== 'undefined' && window.BMap && mapRef.current) {
+        console.log('初始化百度地图...')
         const map = new window.BMap.Map(mapRef.current)
         mapInstanceRef.current = map
         // 设置济南市中心坐标
@@ -30,26 +31,42 @@ export default function VehicleTrajectory() {
         map.enableScrollWheelZoom(true)
         map.addControl(new window.BMap.NavigationControl())
         map.addControl(new window.BMap.ScaleControl())
+        console.log('百度地图初始化完成')
       }
     }
 
     const loadBaiduMap = () => {
       if (typeof window !== 'undefined' && !window.BMap) {
+        console.log('加载百度地图API...')
         const script = document.createElement('script')
         script.src = `https://api.map.baidu.com/api?v=3.0&ak=TtyedSKP6umaE86VQqLbcE1sHS0f65A8&callback=initBaiduMap`
         script.async = true
         document.head.appendChild(script)
         window.initBaiduMap = initMap
       } else {
+        console.log('百度地图API已存在，直接初始化')
         initMap()
       }
     }
-    loadBaiduMap()
+    
+    // 延迟加载地图，确保DOM已渲染
+    const timer = setTimeout(() => {
+      loadBaiduMap()
+    }, 100)
+    
+    return () => {
+      clearTimeout(timer)
+    }
   }, [])
 
   // 清空地图上的所有覆盖物
   const clearMap = () => {
-    if (!mapInstanceRef.current) return
+    if (!mapInstanceRef.current) {
+      console.log('地图实例不存在，无法清空')
+      return
+    }
+    
+    console.log('清空地图覆盖物...')
 
     // 清除之前的轨迹线
     if (polylineRef.current) {
@@ -170,6 +187,7 @@ export default function VehicleTrajectory() {
         ? `http://localhost:8000/api/v1/analysis/gps-records-corrected?commaddr=${commaddr}&start_utc=${startUtc}&end_utc=${endUtc}&coordinate_system=${coordinateSystem}`
         : `http://localhost:8000/api/v1/analysis/gps-records?commaddr=${commaddr}&start_utc=${startUtc}&end_utc=${endUtc}`
 
+      console.log('API URL:', apiUrl)
       const response = await fetch(apiUrl)
       const data = await response.json()
 
@@ -192,12 +210,15 @@ export default function VehicleTrajectory() {
 
       // 确保地图已初始化后再绘制轨迹
       if (mapInstanceRef.current && window.BMap) {
+        console.log('地图已初始化，开始绘制轨迹')
         // 延迟一点时间确保地图完全加载
         setTimeout(() => {
           drawTrajectoryOnMap(records)
-        }, 100)
+        }, 200)
       } else {
         console.error('地图未初始化，无法绘制轨迹')
+        console.log('mapInstanceRef.current:', mapInstanceRef.current)
+        console.log('window.BMap:', window.BMap)
       }
     } catch (error) {
       console.error('获取轨迹数据失败:', error)

frontend/src/routeTree.gen.ts

@@ -20,7 +20,6 @@ import { Route as LayoutIndexImport } from './routes/_layout/index'
 import { Route as LayoutTrafficAnalysisImport } from './routes/_layout/traffic-analysis'
 import { Route as LayoutSettingsImport } from './routes/_layout/settings'
 import { Route as LayoutRoadDetectionImport } from './routes/_layout/road-detection'
-import { Route as LayoutPassengerdensityheatmapImport } from './routes/_layout/passenger_density_heat_map'
 import { Route as LayoutItemsImport } from './routes/_layout/items'
 import { Route as LayoutFaceRecognitionImport } from './routes/_layout/face-recognition'
 import { Route as LayoutAdminImport } from './routes/_layout/admin'
@@ -72,12 +71,6 @@ const LayoutRoadDetectionRoute = LayoutRoadDetectionImport.update({
   getParentRoute: () => LayoutRoute,
 } as any)
 
-const LayoutPassengerdensityheatmapRoute =
-  LayoutPassengerdensityheatmapImport.update({
-    path: '/passenger_density_heat_map',
-    getParentRoute: () => LayoutRoute,
-  } as any)
-
 const LayoutItemsRoute = LayoutItemsImport.update({
   path: '/items',
   getParentRoute: () => LayoutRoute,
@@ -129,10 +122,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutItemsImport
       parentRoute: typeof LayoutImport
     }
-    '/_layout/passenger_density_heat_map': {
-      preLoaderRoute: typeof LayoutPassengerdensityheatmapImport
-      parentRoute: typeof LayoutImport
-    }
     '/_layout/road-detection': {
       preLoaderRoute: typeof LayoutRoadDetectionImport
       parentRoute: typeof LayoutImport
@@ -159,7 +148,6 @@ export const routeTree = rootRoute.addChildren([
     LayoutAdminRoute,
     LayoutFaceRecognitionRoute,
     LayoutItemsRoute,
-    LayoutPassengerdensityheatmapRoute,
     LayoutRoadDetectionRoute,
     LayoutSettingsRoute,
     LayoutTrafficAnalysisRoute,

frontend/src/routes/_layout/traffic-analysis.tsx

@@ -3,6 +3,7 @@ import { Container, Heading, Tabs, Text } from "@chakra-ui/react"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import PassengerCountChart from '../../components/Traffic_analysis/PassengerCountChart'
 import VehicleTrajectory from '../../components/Traffic_analysis/VehicleTrajectory'
+import PassengerDensityHeatMap from '../../components/Traffic_analysis/PassengerDensityHeatMap'
 
 export const Route = createFileRoute("/_layout/traffic-analysis")({
   component: TrafficAnalysis,
@@ -16,15 +17,13 @@ function TrafficAnalysis() {
       <Heading size="lg" pt={12}>交通数据分析</Heading>
       <Tabs.Root defaultValue="pickup-density" variant="subtle" mt={6}>
         <Tabs.List>
-          <Tabs.Trigger value="pickup-density" onClick={() => navigate({ to: "/passenger_density_heat_map" })}>上客点密度分析</Tabs.Trigger>
+          <Tabs.Trigger value="pickup-density">上客点密度分析</Tabs.Trigger>
           <Tabs.Trigger value="vehicle-trajectory">车辆轨迹可视化</Tabs.Trigger>
-          <Tabs.Trigger value="static-heatmap">静态热力图</Tabs.Trigger>
           <Tabs.Trigger value="statistics">统计数据</Tabs.Trigger>
         </Tabs.List>
         <Tabs.Content value="pickup-density">
           <Container maxW="full" mt={4}>
-            <Text>这里是上客点密度分析模块。</Text>
-            <Text mt={2}>可以显示各个上客点的密度分布情况。</Text>
+            <PassengerDensityHeatMap />
           </Container>
         </Tabs.Content>
         <Tabs.Content value="vehicle-trajectory">