ruoyi-react-front/components/gisMapBaidu.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 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;