reactjs - 在 React 中显示 openlayers 信息窗口

Question

当用户单击地图上显示的标记之一时，我试图显示一个信息窗口（叠加弹出窗口）。这是代码：

export const Home = () => {
  const { centerPoint, zoomValue, testSites } = useContext(AppContext);
  const [layer, setLayer] = useState<VectorLayer>(new VectorLayer({}));
  const [popup, setPopup] = useState<Overlay>(new Overlay({}));
  const popupRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const [map] = useState(
    new Map({
      interactions: defaultInteractions().extend([
        new DragRotateAndZoom()
      ]),
      controls: defaultControls().extend([
        new ScaleLine({
          units: 'imperial'
        })
      ]),
      target: '',
      layers: [new TileLayer({
        source: new SourceOSM()
      })],
      view: new View({
        center: fromLonLat([centerPoint.longitude, centerPoint.latitude]),
        zoom: zoomValue
      })
    })
  );

  useEffect(() => {
    map.setTarget('map');
    map.on('click', (event) => {
      const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
        return feature;
      });

      if (feature) {
        popup.setPosition(event.coordinate);
        if (contentRef.current) {
          contentRef.current.innerHTML = '<p>' + feature.getProperties().name + '</p>';
        }
      }
    });
    map.on('pointermove', (event) => {
      if (!event.dragging) {
        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(map.getEventPixel(event.originalEvent)) ? 'pointer' : '';
      }
    });

    setPopup(new Overlay({
      element: popupRef.current,
      positioning: 'bottom-center' as OverlayPositioning,
      stopEvent: false,
      offset: [9, 9],
    }));
  }, [map]);

  useEffect(() => {
    map.addOverlay(popup);
  }, [popup, map]);

  useEffect(() => {
    if (testSites.length) {
      const features: Feature[] = [];
      testSites.forEach((testSite: TestSite) => {
        const feature = new Feature({
          geometry: new Point(fromLonLat([testSite.longitude, testSite.latitude])),
          name: testSite.name,
          address: testSite.address,
          city: testSite.city,
          state: testSite.state,
          notes: testSite.notes
        });

        feature.setStyle(new Style({
          image: new Icon({
            src: 'images/site.png'
          })
        }));
        features.push(feature);
      });
      setLayer(new VectorLayer({
        source: new VectorSource({
          features: features
        })
      }));
      if (layer.getProperties().source !== null) {
        map.addLayer(layer);
      }
    }
    map.getView().animate({zoom: zoomValue}, {center: fromLonLat([centerPoint.longitude, centerPoint.latitude])}, {duration: 1000});
  }, [centerPoint, zoomValue, map, testSites]);

  return (
    <div className="map-wrapper">
      <div id="map"></div>
      <div id="popup" className="map-popup" ref={popupRef}>
        <div id="popup-content" ref={contentRef}></div>
      </div>
    </div>
  );
};

除了在功能图标单击时显示信息窗口外，几乎一切工作正常。据我所知，点击定位被应用于不同的 div，而不是包含 . 请参阅下面的屏幕截图。任何帮助，将不胜感激。谢谢。

Answer 1

好的，我解决了。我为我的叠加层分配了一个 id，然后在点击事件函数中引用它。

setPopup(new Overlay({
  id: 'info',
  element: popupRef.current,
  positioning: 'bottom-center' as OverlayPositioning,
  stopEvent: false,
  offset: [9, 9],
}));

……

if (feature) {
  map.getOverlayById('info').setPosition(event.coordinate);
  if (contentRef.current) {
    contentRef.current.innerHTML = '<p>' + feature.getProperties().name + '</p>';
  }
}