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

Question

我用 React 创建了一个简单的卡片，我想显示一个叠加层。但是叠加层没有显示，我在控制台中也没有错误。

我在构造函数中声明地图

 // Declaration of the map
    this.olmap = new Map({
      target: null,
      layers: [this.osm],
      view: new View({
        center: this.state.center,
        zoom: this.state.zoom
      })

    })

    // Déclaration of the Marker
    this.marker = new Overlay({
      position: fromLonLat([1.3529599, 44.0221252]),
      positioning: "center-center",
      element: document.getElementById("marker"),
      stopEvent: false
    });
    //console.log(this.marker);

    // Adding to the Map Object
    this.olmap.addOverlay(this.marker);

这是效果图

render() {

    return (
      <>
        <div id="map15" style={{ width: "100%", height: "360px" }} />
        <div style={{ display: "none" }}>
          {/* Marker */}
          <div 
          id="marker" 
          title="Marker"
          style={{
            width: "20px",
            height: "20px",
            border: "1px solid #088",
            borderRadius: "10px",
            backgroundColor: "#0FF",
            opacity: "0.5"
          }}
          />
        </div>
      </>
    );
  }
}

Answer 1

终于找到解决办法了，把Marker的声明移到componentDidMount

componentDidMount() {
    this.olmap.setTarget("map15");

    // Déclaration of the Marker
    this.marker = new Overlay({
      position: fromLonLat([-43.3307, -22.9201]),
      positioning: "center-center",
      element: document.getElementById("marker"),
      stopEvent: false
    });
    //console.log(this.marker);

    // Adding to the Map Object
    this.olmap.addOverlay(this.marker);
    console.log(this.olmap);
  }

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

How can I use an Openlayer 'overlay' inside React?

openlayers

reactjs