ruoyi-react-front/app/(business)/test/test2/page.tsx

"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;