如何在React中使用Openlayer 'overlay‘？

npm install ol

import React, { useRef, useEffect } from "react";
import "ol/ol.css";
import { Map, View } from "ol";
import Overlay from "ol/Overlay";
import OverlayPositioning from "ol/OverlayPositioning";
import { fromLonLat } from "ol/proj";

const OverlayMap = () => {
  const mapRef = useRef();
  const overlayRef = useRef();

  useEffect(() => {
    // 初始化地图
    const map = new Map({
      target: mapRef.current,
      layers: [],
      view: new View({
        center: fromLonLat([0, 0]),
        zoom: 2
      })
    });

    // 创建一个overlay
    const overlay = new Overlay({
      element: overlayRef.current,
      positioning: OverlayPositioning.BOTTOM_LEFT,
      offset: [10, -10]
    });

    // 将overlay添加到地图中
    map.addOverlay(overlay);

    return () => {
      // 清理地图实例和overlay
      map.setTarget(null);
      map.dispose();
      overlay.setMap(null);
    };
  }, []);

  return (
    <div>
      <div ref={mapRef} className="map"></div>
      <div ref={overlayRef} className="overlay">
        This is an overlay
      </div>
    </div>
  );
};

export default OverlayMap;

import React from "react";
import OverlayMap from "./OverlayMap";

const App = () => {
  return (
    <div>
      <h1>React OpenLayers Overlay Example</h1>
      <OverlayMap />
    </div>
  );
};

export default App;

.map {
  width: 100%;
  height: 400px;
}

.overlay {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border: 1px solid #ccc;
}