使用 React.js 在 OpenLayers 中疊加

Question

使用 React.js 16 和 OpenLayers 6.5，我創建了一個組件，該組件顯示帶有疊加層的地圖：

import React from "react";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import Map from "ol/Map";
import View from "ol/View";
import Overlay from "ol/Overlay";

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
    this.overlayRef = React.createRef();
  }

  componentDidMount() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.mapRef.current,
      view: new View({
        center: [800000, 5000000],
        zoom: 5,
      }),
    });

    const overlay = new Overlay({
      position: [800000, 5000000],
      element: this.overlayRef.current,
    });
    this.map.addOverlay(overlay);
  }
  render() {
    return (
      <>
        <div ref={this.mapRef} id="map"></div>
        <div ref={this.overlayRef}>Overlay</div>
      </>
    );
  }
}

export default Map;

此代碼工作正常，直到組件被卸載。 然后我收到錯誤

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node

應用程序崩潰。 我猜這是因為 OpenLayers 正在修改 DOM 結構，因此 React 會感到困惑。

有人知道如何添加不修改 DOM 結構的疊加層嗎？ 或任何其他解決方案來規避問題？

Answer 1

問題是 OL Overlay類接受傳入的元素this.overlayRef.current並將其作為子元素附加到其內部元素，從而改變 DOM 結構。 您可以預見到這一點，並使用React 門戶搶先將您的自定義疊加元素放置在Overlay的內部元素中：

ReactDOM.createPortal((<div>Overlay</div>), overlay.element)