refactor(components): 提取百度地图组件

- 将百度地图相关代码提取到单独的 GisMap 组件中
- 在 test2 和 test5 页面中使用 GisMap 组件替换原有的地图代码- 优化了代码结构，提高了地图功能的复用性

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

@@ -1,157 +1,12 @@
 "use client";
 
-import React, {useEffect, useRef, useState} from 'react';
-import './BaiduMapPage.css';
-import dataJson from './index.json';
-import markerData from './markerData.json';
-import fameng from '../../../../public/fameng.png';
-import shuifa from '../../../../public/shuifa.png';
-import deom1 from '../../../../public/deom1.png';
-import deom2 from '../../../../public/deom2.png';
-import Uptow from '../../../../public/up-two.png';
+import React from 'react';
+import GisMap from "@/components/gisMap";
 
 const BaiduMapPage = () => {
-    const mapRef = useRef(null);
-    const [map, setMap] = useState(null);
-    var lineLayer = null;
-    var icon1 = deom1.src;
-    var icon2 = deom2.src;
-    var upTwo = Uptow.src;
-    // 初始化地图
-    useEffect(() => {
-        // 检查是否已加载百度地图 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;
-            document.head.appendChild(script);
 
-            window.initMap = () => {
-                initializeMap();
-            };
-        } else {
-            initializeMap();
-        }
-
-        return () => {
-            // 清理工作
-            if (map) {
-                map.destroy();
-            }
-        };
-    }, []);
-
-    const initializeMap = () => {
-        // 创建地图实例
-        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.addControl(new window.BMapGL.NavigationControl());
-        // mapInstance.addControl(new window.BMapGL.ScaleControl());
-        // mapInstance.addControl(new window.BMapGL.OverviewMapControl());
-        // mapInstance.addControl(new window.BMapGL.MapTypeControl());
-        mapInstance.setMinZoom(16);
-        mapInstance.setMaxZoom(19);
-        mapInstance.setMapStyleV2({
-            styleId: '62ce43ad2a1362c23e612b783d7406e7'
-        });
-
-        markerData.list.dataOne.forEach(item => {
-            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:icon
-            });
-            mapInstance.addOverlay(marker);
-
-            // 创建信息窗口
-            let opts = {
-                width: 300,
-                title: item.name
-            };
-            let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
-                "状态：" + '正常运行' + "<br/>" +
-                "信噪比：" + '16db' + "<br/>" +
-                "负责人：" + '张三' + "<br/>" +
-                "联系方式：" + '121234564', opts);
-            // 点标记添加点击事件
-            marker.addEventListener('click', function() {
-                mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
-            });
-        })
-
-        markerData.list.dataTwo.forEach(item => {
-            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:icon
-            });
-            mapInstance.addOverlay(marker);
-
-            // 创建信息窗口
-            let opts = {
-                width: 300,
-                title: item.name
-            };
-            let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
-                "状态：" + '正常运行' + "<br/>" +
-                "信噪比：" + '16db' + "<br/>" +
-                "负责人：" + '张三' + "<br/>" +
-                "联系方式：" + '121234564', opts);
-            // 点标记添加点击事件
-            marker.addEventListener('click', function() {
-                mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
-            });
-        })
-
-
-        if (!lineLayer) {
-            lineLayer = new window.BMapGL.LineLayer({
-                enablePicked: true,
-                autoSelect: true,
-                pickWidth: 30,
-                pickHeight: 30,
-                opacity: 1,
-                selectedColor: 'blue', // 选中项颜色
-                style: {
-                    sequence: false, // 是否采用间隔填充纹理，默认false
-                    marginLength: 18, // 间隔距离，默认16，单位像素
-                    // borderColor: '#999',
-                    borderMask: true, // 是否受内部填充区域掩膜，默认true,如果存在borderWeight小于0，则自动切换false
-                    // borderWeight: ['match', ['get', 'name'], 'demo1', 2, 0], // 描边宽度，可以设置负值
-                    strokeWeight: 10, // 描边线宽度，默认0
-                    strokeLineJoin: 'round',//描边线连接处类型, 可选'miter', 'round', 'bevel'
-                    strokeLineCap: 'round',// 描边线端头类型，可选'round', 'butt', 'square'，默认round
-                    // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
-                    strokeTextureUrl: ['match', ['get', 'name'], 'demo1', icon1, 'demo2', icon2, upTwo],
-                }
-            });
-        }
-        lineLayer.setData(dataJson);
-        mapInstance.addNormalLayer(lineLayer);
-
-        setMap(mapInstance);
-        // 添加点击地图事件
-        mapInstance.addEventListener('click', (e) => {
-            console.log('点击位置经纬度:', e.latlng.lng, e.latlng.lat);
-        });
-    };
     return (
-        <div className="baidu-map-page" style={{margin:'-32px -40px -32px -40px'}}>
-            <div className="map-container">
-                <div ref={mapRef} className="map-content"></div>
-            </div>
-        </div>
+        <GisMap height={'50'} />
     );
 };
 

app/(other)/test5/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, {useEffect, useMemo, useState, useRef} from "react"
+import React, {useEffect, useMemo, useState} from "react"
 import type {MenuProps, TableColumnsType} from "antd"
 import {
   Badge,
@@ -53,20 +53,10 @@ import EChart from "@/components/echarts"
 import dayjs from "dayjs"
 import "dayjs/locale/zh-cn"
 import zhCN from "antd/es/locale/zh_CN"
-import {MapContainer, Marker, Popup, TileLayer} from 'react-leaflet'
 import 'leaflet/dist/leaflet.css'
 import L from 'leaflet'
 
-//地图控件部分
-import './BaiduMapPage.css';
-import dataJson from './index.json';
-import markerData from './markerData.json';
-import fameng from './fameng.png';
-import shuifa from './shuifa.png';
-import deom1 from './deom1.png';
-import deom2 from './deom2.png';
-import Uptow from './up-two.png';
-import BaiduMapPage from "@/app/(business)/test/test2/page";
+import GisMap from "@/components/gisMap";
 
 // 修复Leaflet默认图标问题
 delete (L.Icon.Default.prototype as any)._getIconUrl;
@@ -543,143 +533,7 @@ export default function Page() {
     }),
     [isDark]
   )
-  // const BaiduMapPage = () => {
-    const mapRef = useRef(null);
-    const [map, setMap] = useState(null);
-    var lineLayer = null;
-    var icon1 = deom1.src;
-    var icon2 = deom2.src;
-    var upTwo = Uptow.src;
-    // 初始化地图
-    useEffect(() => {
-      // 检查是否已加载百度地图 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;
-        document.head.appendChild(script);
 
-        window.initMap = () => {
-          initializeMap();
-        };
-      } else {
-        initializeMap();
-      }
-
-      return () => {
-        // 清理工作
-        if (map) {
-          map.destroy();
-        }
-      };
-    }, []);
-
-    const initializeMap = () => {
-      // 创建地图实例
-      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.addControl(new window.BMapGL.NavigationControl());
-      // mapInstance.addControl(new window.BMapGL.ScaleControl());
-      // mapInstance.addControl(new window.BMapGL.OverviewMapControl());
-      // mapInstance.addControl(new window.BMapGL.MapTypeControl());
-      mapInstance.setMinZoom(16);
-      mapInstance.setMaxZoom(19);
-      mapInstance.setMapStyleV2({
-        styleId: '62ce43ad2a1362c23e612b783d7406e7'
-      });
-
-      markerData.list.dataOne.forEach(item => {
-        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:icon
-        });
-        mapInstance.addOverlay(marker);
-
-        // 创建信息窗口
-        let opts = {
-          width: 300,
-          title: item.name
-        };
-        let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
-            "状态：" + '正常运行' + "<br/>" +
-            "信噪比：" + '16db' + "<br/>" +
-            "负责人：" + '张三' + "<br/>" +
-            "联系方式：" + '121234564', opts);
-        // 点标记添加点击事件
-        marker.addEventListener('click', function() {
-          mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
-        });
-      })
-
-      markerData.list.dataTwo.forEach(item => {
-        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:icon
-        });
-        mapInstance.addOverlay(marker);
-
-        // 创建信息窗口
-        let opts = {
-          width: 300,
-          title: item.name
-        };
-        let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
-            "状态：" + '正常运行' + "<br/>" +
-            "信噪比：" + '16db' + "<br/>" +
-            "负责人：" + '张三' + "<br/>" +
-            "联系方式：" + '121234564', opts);
-        // 点标记添加点击事件
-        marker.addEventListener('click', function() {
-          mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
-        });
-      })
-
-
-      if (!lineLayer) {
-        lineLayer = new window.BMapGL.LineLayer({
-          enablePicked: true,
-          autoSelect: true,
-          pickWidth: 30,
-          pickHeight: 30,
-          opacity: 1,
-          selectedColor: 'blue', // 选中项颜色
-          style: {
-            sequence: false, // 是否采用间隔填充纹理，默认false
-            marginLength: 18, // 间隔距离，默认16，单位像素
-            // borderColor: '#999',
-            borderMask: true, // 是否受内部填充区域掩膜，默认true,如果存在borderWeight小于0，则自动切换false
-            // borderWeight: ['match', ['get', 'name'], 'demo1', 2, 0], // 描边宽度，可以设置负值
-            strokeWeight: 10, // 描边线宽度，默认0
-            strokeLineJoin: 'round',//描边线连接处类型, 可选'miter', 'round', 'bevel'
-            strokeLineCap: 'round',// 描边线端头类型，可选'round', 'butt', 'square'，默认round
-            // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
-            strokeTextureUrl: ['match', ['get', 'name'], 'demo1', icon1, 'demo2', icon2, upTwo],
-          }
-        });
-      }
-      lineLayer.setData(dataJson);
-      mapInstance.addNormalLayer(lineLayer);
-
-      setMap(mapInstance);
-      // 添加点击地图事件
-      mapInstance.addEventListener('click', (e) => {
-        console.log('点击位置经纬度:', e.latlng.lng, e.latlng.lat);
-      });
-    // };
-  };
 
   return (
     <ConfigProvider locale={zhCN} theme={themeTokens}>
@@ -784,11 +638,7 @@ export default function Page() {
                 </Row>
 
                 <Card title="监测分布（示意）" extra={<span className="text-xs text-slate-500">标注颜色代表风险等级</span>}>
-                  <div className="baidu-map-page">
-                    <div className="map-container">
-                      <div ref={mapRef} className="map-content"></div>
-                    </div>
-                  </div>
+                  <GisMap height={'50'}/>
                 </Card>
               </section>
             )}

app/(other)/test5/index.tsx → components/assets/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React, { useEffect, useRef } from 'react';
+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';
+import {fromLonLat} from 'ol/proj';
 
 const MapComponent = () => {
     const mapContainer = useRef(null);

components/gisMap.tsx

@@ -0,0 +1,172 @@
+'use client'
+declare const window: Window & typeof globalThis & {
+  BMapGL: any;
+  initMap:() => void;
+};
+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";
+
+function GisMap(props:{height:string}) {
+
+  // const BaiduMapPage = () => {
+  const mapRef = useRef(null);
+  const [map, setMap] = useState<{ destroy: () => void}>();
+  var lineLayer: {
+    setData: (arg0: {
+      type: string;
+      features: {
+        type: string;
+        properties: { name: string; };
+        geometry: { type: string; coordinates: number[][]; };
+      }[];
+    }) => void;
+  };
+  var icon1 = deom1.src;
+  var icon2 = deom2.src;
+  var upTwo = Uptow.src;
+  // 初始化地图
+  useEffect(() => {
+    // 检查是否已加载百度地图 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;
+      document.head.appendChild(script);
+
+      window.initMap = () => {
+        initializeMap();
+      };
+    } else {
+      initializeMap();
+    }
+
+    return () => {
+      // 清理工作
+      if (map) {
+        map.destroy();
+      }
+    };
+  }, []);
+
+  const initializeMap = () => {
+    // 创建地图实例
+    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'
+    });
+
+    markerData.list.dataOne.forEach(item => {
+      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: icon
+      });
+      mapInstance.addOverlay(marker);
+
+      // 创建信息窗口
+      let opts = {
+        width: 300,
+        title: item.name
+      };
+      let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
+        "状态：" + '正常运行' + "<br/>" +
+        "信噪比：" + '16db' + "<br/>" +
+        "负责人：" + '张三' + "<br/>" +
+        "联系方式：" + '121234564', opts);
+      // 点标记添加点击事件
+      marker.addEventListener('click', function () {
+        mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
+      });
+    })
+
+    markerData.list.dataTwo.forEach(item => {
+      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: icon
+      });
+      mapInstance.addOverlay(marker);
+
+      // 创建信息窗口
+      let opts = {
+        width: 300,
+        title: item.name
+      };
+      let infoWindow = new window.BMapGL.InfoWindow("倾斜角度：" + '188deg' + "<br/>" +
+        "状态：" + '正常运行' + "<br/>" +
+        "信噪比：" + '16db' + "<br/>" +
+        "负责人：" + '张三' + "<br/>" +
+        "联系方式：" + '121234564', opts);
+      // 点标记添加点击事件
+      marker.addEventListener('click', function () {
+        mapInstance.openInfoWindow(infoWindow, markers); // 开启信息窗口
+      });
+    })
+
+
+    if (!lineLayer) {
+      lineLayer = new window.BMapGL.LineLayer({
+        enablePicked: true,
+        autoSelect: true,
+        pickWidth: 30,
+        pickHeight: 30,
+        opacity: 1,
+        selectedColor: 'blue', // 选中项颜色
+        style: {
+          sequence: false, // 是否采用间隔填充纹理，默认false
+          marginLength: 18, // 间隔距离，默认16，单位像素
+          // borderColor: '#999',
+          borderMask: true, // 是否受内部填充区域掩膜，默认true,如果存在borderWeight小于0，则自动切换false
+          // borderWeight: ['match', ['get', 'name'], 'demo1', 2, 0], // 描边宽度，可以设置负值
+          strokeWeight: 10, // 描边线宽度，默认0
+          strokeLineJoin: 'round',//描边线连接处类型, 可选'miter', 'round', 'bevel'
+          strokeLineCap: 'round',// 描边线端头类型，可选'round', 'butt', 'square'，默认round
+          // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
+          strokeTextureUrl: ['match', ['get', 'name'], 'demo1', icon1, 'demo2', icon2, upTwo],
+        }
+      });
+    }
+    lineLayer.setData(dataJson);
+    mapInstance.addNormalLayer(lineLayer);
+
+    setMap(mapInstance);
+    // 添加点击地图事件
+    mapInstance.addEventListener('click', (e: any) => {
+      console.log('点击位置经纬度:', e.latlng.lng, e.latlng.lat);
+    });
+    // };
+  };
+
+  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 GisMap;