ruoyi-react-front/components/gisMap.tsx

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