ruoyi-react-front/components/GISModule/gisMapJinggai.tsx

'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 GisMapJinggai(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, 15);
        // 启用滚轮放大缩小
        mapInstance.enableScrollWheelZoom(true);
        // 设置初始倾斜角度为30度（范围：0-45度）
        mapInstance.setTilt(45);
        // 添加控件
        mapInstance.setMinZoom(15);
        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 GisMapJinggai;