跟新

.env.local

@@ -1 +1 @@
-BACKEND_URL=http://localhost:8080
+BACKEND_URL=http://192.168.110.93:8080

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

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

@@ -0,0 +1,119 @@
+/* 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

@@ -0,0 +1,165 @@
+{
+  "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

@@ -0,0 +1,69 @@
+"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

@@ -0,0 +1,209 @@
+{
+  "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,158 @@
-'use client'
-import React from 'react';
-
-function Page() {
-  return (
-    <div className="text-5xl font-bold underline">
-      Hello world!
-    </div>
-  );
-}
-
-export default Page;
+"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';
+
+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>
+    );
+};
+
+export default BaiduMapPage;

app/(other)/test5/BaiduMapPage.css

@@ -0,0 +1,127 @@
+/* BaiduMapPage.css */
+.baidu-map-page {
+    height: 50vh;
+    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%;
+}
+
+.BMap_cpyCtrl {
+    display: none;
+}
+
+.anchorBL {
+    display: none;
+}

app/(other)/test5/index.json

@@ -0,0 +1,165 @@
+{
+  "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/(other)/test5/index.tsx

@@ -0,0 +1,69 @@
+"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/(other)/test5/markerData.json

@@ -0,0 +1,209 @@
+{
+  "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/(other)/test5/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, {useEffect, useMemo, useState} from "react"
+import React, {useEffect, useMemo, useState, useRef} from "react"
 import type {MenuProps, TableColumnsType} from "antd"
 import {
   Badge,
@@ -57,6 +57,17 @@ 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";
+
 // 修复Leaflet默认图标问题
 delete (L.Icon.Default.prototype as any)._getIconUrl;
 L.Icon.Default.mergeOptions({
@@ -532,6 +543,143 @@ 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}>
@@ -636,32 +784,10 @@ export default function Page() {
                 </Row>
 
                 <Card title="监测分布（示意）" extra={<span className="text-xs text-slate-500">标注颜色代表风险等级</span>}>
-                  <div className="relative w-full h-[380px] rounded-md overflow-hidden bg-slate-100">
-                    {/* 替换为react-leaflet地图 */}
-                    <MapContainer 
-                      center={[28.1941, 112.9873]} // 长沙市坐标
-                      zoom={12} 
-                      style={{ height: '100%', width: '100%' }}
-                      zoomControl={true}
-                    >
-                      <TileLayer
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                      />
-                      {markers.map((m) => (
-                        <Marker 
-                          key={m.id} 
-                          position={[
-                            28.1941 + (parseFloat(m.top) - 50) / 100, 
-                            112.9873 + (parseFloat(m.left) - 50) / 100
-                          ]}
-                        >
-                          <Popup>
-                            {m.title}
-                          </Popup>
-                        </Marker>
-                      ))}
-                    </MapContainer>
+                  <div className="baidu-map-page">
+                    <div className="map-container">
+                      <div ref={mapRef} className="map-content"></div>
+                    </div>
                   </div>
                 </Card>
               </section>

app/layout.tsx

@@ -28,6 +28,13 @@ export default function RootLayout({
       </App>
     </AntdRegistry>
     </body>
+    <script
+        type="text/javascript"
+        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0"
+    ></script>
+    <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script>
+    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
+    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
     </html>
   );
 }