1

app/(business)/layout.tsx

@@ -5,17 +5,15 @@ import {
   ExclamationCircleFilled,
   FullscreenExitOutlined,
   FullscreenOutlined,
-  GithubOutlined,
   HomeOutlined,
   LogoutOutlined,
   MenuOutlined,
-  QuestionCircleFilled,
   SearchOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import {ProConfigProvider} from "@ant-design/pro-components";
 import type {SelectProps} from "antd";
-import {App, Dropdown, MenuProps, Modal, Select, Tooltip} from "antd";
+import {App, Dropdown, MenuProps, Modal, Select} from "antd";
 import {deleteCookie, getCookie} from "cookies-next";
 import Link from "next/link";
 import {usePathname, useRouter} from "next/navigation";
@@ -219,8 +217,8 @@ export default function RootLayout({
     <App>
       <ProConfigProvider dark={isDark}>
         <ProLayout
-          title="MorTnon 若依"
-          logo="https://static.dongfangzan.cn/img/mortnon.svg"
+          title="沅陵县太常片区城市地下管网"
+          logo="./logo.png"
           menu={{ request: getRoutes }}
           layout="mix"
           splitMenus={false}
@@ -282,16 +280,6 @@ export default function RootLayout({
                   />
                 )}
               </div>,
-              <Link key="github" href="https://github.com/mortise-and-tenon/RuoYi-React-Pro" target="_blank">
-                <Tooltip title="Github 源码仓库">
-                  <GithubOutlined style={{ color: "gray" }} />
-                </Tooltip>
-              </Link>,
-              <Link key="question" href="https://doc.ruoyi.vip/ruoyi-vue/" target="_blank">
-                <Tooltip title="RuoYi 文档">
-                  <QuestionCircleFilled style={{ color: "gray" }} />
-                </Tooltip>
-              </Link>,
               isFullscreen ? (
                 <FullscreenExitOutlined key="exit" onClick={closeFullscreen} />
               ) : (

app/(business)/test/test2/BaiduMapPage.css

@@ -1,119 +0,0 @@
-/* BaiduMapPage.css */
-.baidu-map-page {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    font-family: 'Microsoft YaHei', sans-serif;
-}
-
-.map-header {
-    background-color: #2c3e50;
-    color: white;
-    padding: 15px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-.map-header h1 {
-    margin: 0;
-    font-size: 1.5rem;
-}
-
-.search-box {
-    display: flex;
-}
-
-.search-box input {
-    padding: 8px 12px;
-    border: none;
-    border-radius: 4px 0 0 4px;
-    width: 300px;
-    font-size: 1rem;
-}
-
-.search-box button {
-    padding: 8px 16px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 0 4px 4px 0;
-    cursor: pointer;
-    font-size: 1rem;
-}
-
-.search-box button:hover {
-    background-color: #2980b9;
-}
-
-.map-container {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-}
-
-.map-sidebar {
-    width: 300px;
-    background-color: #f8f9fa;
-    padding: 20px;
-    overflow-y: auto;
-    border-right: 1px solid #e0e0e0;
-}
-
-.sidebar-section {
-    margin-bottom: 25px;
-}
-
-.sidebar-section h3 {
-    margin-top: 0;
-    color: #2c3e50;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 8px;
-}
-
-.sidebar-section input {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-
-.sidebar-section button {
-    width: 100%;
-    padding: 10px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-bottom: 8px;
-    font-size: 0.9rem;
-}
-
-.sidebar-section button:hover {
-    background-color: #2980b9;
-}
-
-.sidebar-section ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
-
-.sidebar-section li {
-    padding: 8px;
-    border-bottom: 1px solid #eee;
-    cursor: pointer;
-}
-
-.sidebar-section li:hover {
-    background-color: #eef7ff;
-}
-
-.map-content {
-    flex: 1;
-    height: 100%;
-}

app/(business)/test/test2/index.json

@@ -1,165 +0,0 @@
-{
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {
-        "name": "demo1"
-      },
-      "geometry": {
-        "type": "LineString",
-        "coordinates": [
-          [
-            110.38610462091575,
-            28.454479080323917
-          ],
-          [
-            110.38542861338578,
-            28.4540740124794
-          ],
-          [
-            110.38481562350695,
-            28.453830971019975
-          ],
-          [
-            110.38399066516533,
-            28.453714513453928
-          ],
-          [
-            110.38289072070982,
-            28.453815780910016
-          ],
-          [
-            110.3822186303937,
-            28.45396096609794
-          ],
-          [
-            110.377726997206,
-            28.454937527654547
-          ],
-          [
-            110.37592060798265,
-            28.455005623997177
-          ],
-          [
-            110.37432386904591,
-            28.454608727972595
-          ],
-          [
-            110.38039133426261,
-            28.4425768384854
-          ],
-          [
-            110.38072704269584,
-            28.442101638733757
-          ],
-          [
-            110.38127671027327,
-            28.441534790413552
-          ],
-          [
-            110.38208455504613,
-            28.440813342657773
-          ],
-          [
-            110.38263422262357,
-            28.44044525515267
-          ],
-          [
-            110.38326717316727,
-            28.44011397529155
-          ],
-          [
-            110.38451641766143,
-            28.439583925333327
-          ],
-          [
-            110.38537423221406,
-            28.43935570855264
-          ],
-          [
-            110.38647356736892,
-            28.439186386103568
-          ],
-          [
-            110.38754791763388,
-            28.439156938693166
-          ],
-          [
-            110.40679728069908,
-            28.437735398674064
-          ]
-        ]
-      }
-    }
-  ,{
-      "type": "Feature",
-      "properties": {
-        "name": "demo2"
-      },
-      "geometry": {
-        "type": "LineString",
-        "coordinates": [
-          [
-            110.40679764263473,
-            28.437773200884614
-          ],[
-            110.39292518161196,
-            28.43883904523382
-          ],[
-            110.38755754669334,
-            28.43908968687996
-          ],[
-            110.38648781358151,
-            28.439250479598762
-          ],[
-            110.38535058778619,
-            28.439300632793273
-          ],[
-            110.38447798620564,
-            28.439527149612115
-          ],[
-            110.3832287483216,
-            28.440060877928715
-          ],[
-            110.38259131668329,
-            28.44041339195609
-          ],[
-            110.38204182636873,
-            28.44078050682482
-          ],[
-            110.38123899861102,
-            28.441510586952738
-          ],[
-            110.38069756669027,
-            28.44208810725976
-          ],[
-            110.3803815350833,
-            28.44257543254846
-          ],[
-            110.37437700312626,
-            28.454480664749013
-          ],[
-            110.37434401691543,
-            28.45454379763257
-          ],[
-            110.37430213041681,
-            28.45464325593481
-          ],[
-            110.37395050351577,
-            28.455341035859266
-          ],[
-            110.37236616668203,
-            28.45848056271767
-          ],[
-            110.3722404347138,
-            28.458659091476388
-          ],[
-            110.37157800605496,
-            28.4592211211463
-          ]
-        ]
-      }
-    }
-  ]
-}

app/(business)/test/test2/index.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from 'react';
-import 'ol/ol.css';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import { fromLonLat } from 'ol/proj';
-
-const MapComponent = () => {
-    const mapContainer = useRef(null);
-    const mapInstance = useRef(null); // 保存地图实例
-
-    useEffect(() => {
-        if (!mapContainer.current) return;
-        // 确保容器有明确的高度（修复100vh可能为0的问题）
-        mapContainer.current.style.height = 'calc(100vh - 2px)'; // 减去边框宽度
-
-        // 创建地图实例
-        mapInstance.current = new Map({
-            target: mapContainer.current,
-            layers: [
-                new TileLayer({
-                    source: new OSM()
-                })
-            ],
-            view: new View({
-                // 正确转换坐标到EPSG:3857
-                center: fromLonLat([116.4074, 39.9042]),
-                zoom: 4
-            })
-        });
-
-        // 添加窗口大小变化监听
-        const handleResize = () => {
-            setTimeout(() => {
-                if (mapInstance.current) {
-                    mapInstance.current.updateSize();
-                }
-            }, 100);
-        };
-
-        window.addEventListener('resize', handleResize);
-
-        // 组件卸载时清理
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            if (mapInstance.current) {
-                mapInstance.current.setTarget(null); // 解除地图与容器的绑定
-                mapInstance.current = null;
-            }
-        };
-    }, []);
-
-    return (
-        <div
-            ref={mapContainer}
-            style={{
-                width: '100%',
-                height: '100vh', // 保留100vh但添加安全计算
-                border: '1px solid red',
-                boxSizing: 'border-box' // 确保边框不增加额外尺寸
-            }}
-        />
-    );
-};
-
-export default MapComponent;

app/(business)/test/test2/markerData.json

@@ -1,209 +0,0 @@
-{
-  "list": {
-    "dataOne": [
-      {
-        "state":"A",
-        "name":"燃气阀门1",
-        "lng":110.38610462091575,
-        "lat":28.454479080323917
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门2",
-        "lng":110.38542861338578,
-        "lat":28.4540740124794
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门3",
-        "lng":110.38481562350695,
-        "lat":28.453830971019975
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门4",
-        "lng":110.38399066516533,
-        "lat":28.453714513453928
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门5",
-        "lng":110.38289072070982,
-        "lat":28.453815780910016
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门6",
-        "lng":110.3822186303937,
-        "lat":28.45396096609794
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门7",
-        "lng":110.377726997206,
-        "lat":28.454937527654547
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门8",
-        "lng":110.37592060798265,
-        "lat":28.455005623997177
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门9",
-        "lng":110.37432386904591,
-        "lat":28.454608727972595
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门10",
-        "lng":110.38039133426261,
-        "lat":28.4425768384854
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门11",
-        "lng":110.38072704269584,
-        "lat":28.442101638733757
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门12",
-        "lng":110.38127671027327,
-        "lat":28.441534790413552
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门13",
-        "lng":110.38208455504613,
-        "lat":28.440813342657773
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门14",
-        "lng":110.38263422262357,
-        "lat":28.44044525515267
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门15",
-        "lng":110.38326717316727,
-        "lat":28.44011397529155
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门16",
-        "lng":110.38451641766143,
-        "lat":28.439583925333327
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门17",
-        "lng":110.38537423221406,
-        "lat":28.43935570855264
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门18",
-        "lng":110.38647356736892,
-        "lat":28.439186386103568
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门19",
-        "lng":110.38754791763388,
-        "lat":28.439156938693166
-      },
-      {
-        "state":"A",
-        "name":"燃气阀门20",
-        "lng":110.40679728069908,
-        "lat":28.437735398674064
-      }
-    ],
-    "dataTwo": [
-      {
-        "state":"B",
-        "name":"供水阀门1",
-        "lng":110.40679764263473,
-        "lat":28.437773200884614
-      },{
-        "state":"B",
-        "name":"供水阀门2",
-        "lng":110.39292518161196,
-        "lat":28.43883904523382
-      },{
-        "state":"B",
-        "name":"供水阀门3",
-        "lng":110.38755754669334,
-        "lat":28.43908968687996
-      },{
-        "state":"B",
-        "name":"供水阀门4",
-        "lng":110.38648781358151,
-        "lat":28.439250479598762
-      },{
-        "state":"B",
-        "name":"供水阀门5",
-        "lng":110.38535058778619,
-        "lat":28.439300632793273
-      },{
-        "state":"B",
-        "name":"供水阀门6",
-        "lng":110.38447798620564,
-        "lat":28.439527149612115
-      },{
-        "state":"B",
-        "name":"供水阀门7",
-        "lng":110.3832287483216,
-        "lat":28.440060877928715
-      },{
-        "state":"B",
-        "name":"供水阀门8",
-        "lng":110.38259131668329,
-        "lat":28.44041339195609
-      },{
-        "state":"B",
-        "name":"供水阀门8",
-        "lng":110.38204182636873,
-        "lat":28.44078050682482
-      },{
-        "state":"B",
-        "name":"供水阀门10",
-        "lng":110.38069756669027,
-        "lat":28.44208810725976
-      },{
-        "state":"B",
-        "name":"供水阀门11",
-        "lng":110.3803815350833,
-        "lat":28.44257543254846
-      },{
-        "state":"B",
-        "name":"供水阀门14",
-        "lng":110.37430213041681,
-        "lat":28.45464325593481
-      },{
-        "state":"B",
-        "name":"供水阀门15",
-        "lng":110.37395050351577,
-        "lat":28.455341035859266
-      },{
-        "state":"B",
-        "name":"供水阀门16",
-        "lng":110.37236616668203,
-        "lat":28.45848056271767
-      },{
-        "state":"B",
-        "name":"供水阀门17",
-        "lng":110.3722404347138,
-        "lat":28.458659091476388
-      },{
-        "state":"B",
-        "name":"供水阀门18",
-        "lng":110.37157800605496,
-        "lat":28.4592211211463
-      }
-    ]
-  }
-}

app/(business)/test/test2/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import React from 'react';
-import GisMap from "@/components/gisMap";
+import GisMapBaidu from "@/components/gisMapBaidu";
 
 const BaiduMapPage = () => {
 
     return (
-        <GisMap height={'50'} />
+        <GisMapBaidu height={'50'} />
     );
 };
 

app/(other)/test10/page.tsx

@@ -51,6 +51,7 @@ import AlarmPanel from "./components/AlarmPanel"
 import VideoMonitoring from "./components/VideoMonitoring"
 import DataManagement from "./components/DataManagement"
 import globalMessage from "@/app/_modules/globalMessage"
+import GisMapBaidu from "@/components/gisMapBaidu";
 
 const { RangePicker } = DatePicker
 const MapView = dynamic(() => import("./components/MapView"), {
@@ -516,7 +517,7 @@ function DashboardContent({ onButtonClick, autoRefresh, setAutoRefresh }: {
       <Row gutter={[16, 16]}>
         <Col span={16}>
           <Card 
-            title="GIS 一张图" 
+            title="GIS"
             className="h-96"
             extra={
               <Space>
@@ -526,7 +527,7 @@ function DashboardContent({ onButtonClick, autoRefresh, setAutoRefresh }: {
               </Space>
             }
           >
-            <MapView />
+            <GisMapBaidu height={'50'} />
           </Card>
         </Col>
         <Col span={8}>

app/(other)/test11/page.tsx

@@ -33,6 +33,7 @@ import {
 } from "@ant-design/icons"
 import dynamic from "next/dynamic"
 import EChart from "@/components/echarts"
+import GisMapBaidu from "@/components/gisMapBaidu";
 
 const { Header, Sider, Content } = Layout
 const { TabPane } = Tabs
@@ -451,7 +452,7 @@ export default function ManholeMonitoringSystem() {
           <div className="space-y-6">
             <Card title="监测设备 GIS 一张图">
               <div style={{ height: "600px" }}>
-                <MapView devices={devices} />
+                <GisMapBaidu height={'50'} />
               </div>
             </Card>
           </div>

app/(other)/test5/page.tsx

@@ -54,17 +54,24 @@ import dayjs from "dayjs"
 import "dayjs/locale/zh-cn"
 import zhCN from "antd/es/locale/zh_CN"
 import 'leaflet/dist/leaflet.css'
-import L from 'leaflet'
+import GisMapBaidu from "@/components/gisMapBaidu";
 
-import GisMap from "@/components/gisMap";
+// 动态导入Leaflet，只在客户端渲染
+const L = typeof window !== 'undefined' ? require('leaflet') : null
 
-// 修复Leaflet默认图标问题
-delete (L.Icon.Default.prototype as any)._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
-  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
-  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
-});
+// 修复Leaflet默认图标问题（仅在客户端）
+const fixLeafletIcons = () => {
+  if (typeof window !== 'undefined' && L) {
+    delete (L.Icon.Default.prototype as any)._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+      iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+    });
+  }
+};
+
+fixLeafletIcons();
 
 dayjs.locale("zh-cn")
 
@@ -638,7 +645,7 @@ export default function Page() {
                 </Row>
 
                 <Card title="监测分布（示意）" extra={<span className="text-xs text-slate-500">标注颜色代表风险等级</span>}>
-                  <GisMap height={'50'}/>
+                  <GisMapBaidu height={'50'}/>
                 </Card>
               </section>
             )}

app/login/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import type {ProFormInstance} from "@ant-design/pro-components";
-import {LoginFormPage, ProConfigProvider, ProFormCheckbox, ProFormText,} from "@ant-design/pro-components";
-import {App, Divider, Spin, theme} from "antd";
+import {LoginFormPage, ProConfigProvider, ProFormText,} from "@ant-design/pro-components";
+import {App, Checkbox, Divider, Spin, theme} from "antd";
 import {deleteCookie, getCookie, setCookie} from "cookies-next";
 import {useRouter} from "next/navigation";
 
@@ -197,17 +197,17 @@ export default function Login() {
         <LoginFormPage
           formRef={loginFormRef}
           backgroundImageUrl={background}
-          logo="https://static.dongfangzan.cn/img/mortnon.svg"
-          title={(<span>MorTnon 若依后台管理</span>) as any}
+          logo="./logo.png"
+          title={(<span className={'text-2xl text-white'}>沅陵县太常片区城市地下管网</span>) as any}
           containerStyle={{
             backgroundColor: "rgba(0,0,0,0)",
             backdropFilter: "blur(4px)",
           }}
-          subTitle={
-            <span style={{color: "rgba(255,255,255,1)"}}>
-              MorTnon，高质量的快速开发框架
-            </span>
-          }
+          // subTitle={
+          //   <span style={{color: "rgba(255,255,255,1)"}}>
+          //     沅陵县太常片区城市地下管网
+          //   </span>
+          // }
           actions={
             <div
               style={{
@@ -217,13 +217,13 @@ export default function Login() {
               }}
             >
               <p style={{color: "rgba(255,255,255,.6)"}}>
-                ©{new Date().getFullYear()} Mortnon.
+                ©{new Date().getFullYear()} zksy.
               </p>
             </div>
           }
           onFinish={userLogin}
         >
-          <Divider>账号密码登录</Divider>
+          <Divider style={{color: "white"}}>账号密码登录</Divider>
           <>
             <ProFormText
               name="username"
@@ -320,9 +320,9 @@ export default function Login() {
               marginBlockEnd: 24,
             }}
           >
-            <ProFormCheckbox noStyle name="autoLogin">
+            <Checkbox name="autoLogin" style={{color: "white"}}>
               记住密码
-            </ProFormCheckbox>
+            </Checkbox>
           </div>
         </LoginFormPage>
       </div>

app/page.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { Flex, Spin } from "antd";
+import {Flex} from "antd";
 
-import { getCookie } from "cookies-next";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import {getCookie} from "cookies-next";
+import {useRouter} from "next/navigation";
+import {useEffect, useState} from "react";
 
 import PuffLoader from "react-spinners/PuffLoader";
 
 import styles from "./page.module.css";
-import { displayModeIsDark } from "./_modules/func";
+import {displayModeIsDark} from "./_modules/func";
 
 //浅色
 const lightColor = "white";
@@ -50,7 +50,7 @@ export default function Home() {
         aria-label="Loading"
       />
       <span style={{ color: color, marginTop: "16px" }}>
-        MorTnon，高质量的快速开发框架
+        正在加载...请稍后...
       </span>
     </Flex>
   );

components/assets/index.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import React, {useEffect, useRef} from 'react';
-import 'ol/ol.css';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import {fromLonLat} from 'ol/proj';
-
-const MapComponent = () => {
-    const mapContainer = useRef(null);
-    const mapInstance = useRef(null); // 保存地图实例
-
-    useEffect(() => {
-        if (!mapContainer.current) return;
-        // 确保容器有明确的高度（修复100vh可能为0的问题）
-        mapContainer.current.style.height = 'calc(100vh - 2px)'; // 减去边框宽度
-
-        // 创建地图实例
-        mapInstance.current = new Map({
-            target: mapContainer.current,
-            layers: [
-                new TileLayer({
-                    source: new OSM()
-                })
-            ],
-            view: new View({
-                // 正确转换坐标到EPSG:3857
-                center: fromLonLat([116.4074, 39.9042]),
-                zoom: 4
-            })
-        });
-
-        // 添加窗口大小变化监听
-        const handleResize = () => {
-            setTimeout(() => {
-                if (mapInstance.current) {
-                    mapInstance.current.updateSize();
-                }
-            }, 100);
-        };
-
-        window.addEventListener('resize', handleResize);
-
-        // 组件卸载时清理
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            if (mapInstance.current) {
-                mapInstance.current.setTarget(null); // 解除地图与容器的绑定
-                mapInstance.current = null;
-            }
-        };
-    }, []);
-
-    return (
-        <div
-            ref={mapContainer}
-            style={{
-                width: '100%',
-                height: '100vh', // 保留100vh但添加安全计算
-                border: '1px solid red',
-                boxSizing: 'border-box' // 确保边框不增加额外尺寸
-            }}
-        />
-    );
-};
-
-export default MapComponent;

components/gisMapBaidu.tsx

@@ -0,0 +1,180 @@
+'use client'
+import React, {useEffect, useRef, useState} from 'react';
+import deom1 from "./assets/deom1.png";
+import deom2 from "./assets/deom2.png";
+import Uptow from "./assets/up-two.png";
+import markerData from "./assets/markerData.json";
+import fameng from "./assets/fameng.png";
+import shuifa from "./assets/shuifa.png";
+import dataJson from "./assets/index.json";
+import "./assets/BaiduMapPage.css";
+
+// 仅在浏览器环境中声明 window 类型
+declare global {
+  interface Window {
+    BMapGL: any;
+    initMap: () => void;
+  }
+}
+
+function GisMapBaidu(props: {height: string}) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const [map, setMap] = useState<any>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  // 标记是否在浏览器环境
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // 初始化地图
+  useEffect(() => {
+    if (!isClient || !mapRef.current) return;
+
+    // 检查是否已加载百度地图 GL JS API
+    if (!window.BMapGL) {
+      // 动态加载百度地图 GL JS API
+      const script = document.createElement('script');
+      script.src = `https://api.map.baidu.com/api?v=2.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0&type=webgl`;
+      script.async = true;
+      script.onload = () => {
+        initializeMap();
+      };
+      document.head.appendChild(script);
+    } else {
+      initializeMap();
+    }
+
+    return () => {
+      // 清理工作
+      if (map && map.destroy) {
+        map.destroy();
+      }
+    };
+  }, [isClient]);
+
+  const initializeMap = () => {
+    if (!window.BMapGL || !mapRef.current) return;
+
+    // 创建地图实例
+    const mapInstance = new window.BMapGL.Map(mapRef.current);
+    // 设置中心点坐标
+    const point = new window.BMapGL.Point(110.39573035064166, 28.44628067667752);
+    mapInstance.centerAndZoom(point, 16);
+    // 启用滚轮放大缩小
+    mapInstance.enableScrollWheelZoom(true);
+
+    // 添加控件
+    mapInstance.setMinZoom(16);
+    mapInstance.setMaxZoom(19);
+    mapInstance.setMapStyleV2({
+      styleId: '62ce43ad2a1362c23e612b783d7406e7'
+    });
+
+    // 添加标记点
+    if (markerData?.list?.dataOne) {
+      markerData.list.dataOne.forEach((item: any) => {
+        const icon = new window.BMapGL.Icon(fameng.src, new window.BMapGL.Size(23, 25), {
+          anchor: new window.BMapGL.Size(10, 25),
+        });
+        const markers = new window.BMapGL.Point(item.lng, item.lat);
+        const marker = new window.BMapGL.Marker(markers, {icon});
+        mapInstance.addOverlay(marker);
+
+        // 创建信息窗口
+        const opts = {
+          width: 300,
+          title: item.name
+        };
+        const infoWindow = new window.BMapGL.InfoWindow(
+          "倾斜角度：188deg<br/>" +
+          "状态：正常运行<br/>" +
+          "信噪比：16db<br/>" +
+          "负责人：张三<br/>" +
+          "联系方式：121234564", opts
+        );
+
+        marker.addEventListener('click', () => {
+          mapInstance.openInfoWindow(infoWindow, markers);
+        });
+      });
+    }
+
+    if (markerData?.list?.dataTwo) {
+      markerData.list.dataTwo.forEach((item: any) => {
+        const icon = new window.BMapGL.Icon(shuifa.src, new window.BMapGL.Size(23, 25), {
+          anchor: new window.BMapGL.Size(20, 0),
+        });
+        const markers = new window.BMapGL.Point(item.lng, item.lat);
+        const marker = new window.BMapGL.Marker(markers, {icon});
+        mapInstance.addOverlay(marker);
+
+        // 创建信息窗口
+        const opts = {
+          width: 300,
+          title: item.name
+        };
+        const infoWindow = new window.BMapGL.InfoWindow(
+          "倾斜角度：188deg<br/>" +
+          "状态：正常运行<br/>" +
+          "信噪比：16db<br/>" +
+          "负责人：张三<br/>" +
+          "联系方式：121234564", opts
+        );
+
+        marker.addEventListener('click', () => {
+          mapInstance.openInfoWindow(infoWindow, markers);
+        });
+      });
+    }
+
+    // 添加线路图层
+    if (window.BMapGL.LineLayer && dataJson) {
+      const lineLayer = new window.BMapGL.LineLayer({
+        enablePicked: true,
+        autoSelect: true,
+        pickWidth: 30,
+        pickHeight: 30,
+        opacity: 1,
+        selectedColor: 'blue',
+        style: {
+          sequence: false,
+          marginLength: 18,
+          borderMask: true,
+          strokeWeight: 10,
+          strokeLineJoin: 'round',
+          strokeLineCap: 'round',
+          strokeTextureUrl: ['match', ['get', 'name'], 'demo1', deom1.src, 'demo2', deom2.src, Uptow.src],
+        }
+      });
+
+      lineLayer.setData(dataJson);
+      mapInstance.addNormalLayer(lineLayer);
+    }
+
+    setMap(mapInstance);
+
+    // 添加点击地图事件
+    mapInstance.addEventListener('click', (e: any) => {
+      console.log('点击位置经纬度:', e.latlng?.lng, e.latlng?.lat);
+    });
+  };
+
+  if (!isClient) {
+    return (
+      <div className="flex items-center justify-center h-full bg-gray-100">
+        <div className="text-gray-500">地图加载中...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col font-sans" style={{height: props.height + "vh"}}>
+      <div className="flex flex-1 overflow-hidden">
+        <div ref={mapRef} className="flex-1 h-full"></div>
+      </div>
+    </div>
+  );
+}
+
+export default GisMapBaidu;