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

我终于找到了解决方案，我将标记的声明移到了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的“覆盖”？

1 个答案: