如何通过按钮清除reactjs中的传单地图？

IT技术 reactjs react-leaflet leaflet.draw
2021-05-17 08:39:23

我想通过单击按钮清除我的传单地图...如何执行此操作...我想清除地图上所有绘制的形状，以便清除地图

这是我在 return 语句中的传单地图代码：

 <Map
            key={this.state.keyMAP}
            style={{ height: "50vh" }}
            center={position}
            zoom={13}
            onClick={this.handleClick}
            onCreate={this.onCreate}
            onLocationfound={this.handleLocationFound}
          >
            {/* startDirectly */}

            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
              layers="NDVI"
              // baseUrl="https://services.sentinel-hub.com/ogc/wms/bb1c8a2f-5b11-42bb-8ce4-dbf7f5300663"
            />

            <FeatureGroup>
              {viewMap && (
                <EditControl
                  position="topleft"
                  onEdited={this._onEditPath}
                  onCreated={this.onCreate}
                  onDeleted={this._onDeleted}
                  onMounted={this._mounted}
                  onEditStart={this._onEditStart}
                  onEditStop={this._onEditStop}
                  onDeleteStart={this._onDeleteStart}
                  onDeleteStop={this._onDeleteStop}
                  draw={{
                    rectangle: false,
                    marker: false,
                    circleMarker: false,
                    circle: false,
                    circlemarker: false,
                  }}
                />
              )}
            </FeatureGroup>
          </Map>

按钮：

 <button
            className="waves-effect waves-light btn"
            onClick={this.resetMap}
          >
            Clear map
          </button>

清除方法：

resetMap() {
    console.log("Reset");
  }

我的组件的完整代码：

https://github.com/SoilViews/SoilViews/blob/master/src/components/dashboard/Dashboard.js

1个回答

我将提出两种解决方案，以便您可以选择最适合您的解决方案。您只需要在 React 中创建地图/功能组的 DOM 引用（取决于选择的方法）。如何创建参考：

在您的构造函数中，插入以下行：

 this.mapRef = React.createRef(); // Create a Map reference

或者

 this.fgRef = React.createRef(); // Create a Feature group reference

然后在您的<Map>或<FeatureGroup>组件中，您应该相应地添加以下属性：

<Map ref={this.mapRef} key={this.state.keyMAP} ....rest of the code

或者

<FeatureGroup ref={this.fgRef}> {viewMap && ( ....rest of the code

  1. 如果选择地图清除方式，则可以这样进行：

    function clearMap() {
  const map = this.mapRef.current.leafletElement;
  map.eachLayer(function (layer) {
    map.removeLayer(layer);
  });
}

  2. 或者，如果您选择特征组方法：

    function clearFeatureGroup() {
    const fg = this.fgRef.current.leafletElement;
    fg.clearLayers();
 }

最后，在您的按钮中，您可以调用相应的方法：

<button onClick={clearMap}>
   Clear!
</button>

或者

<button onClick={clearFeatureGroup}>
   Clear!
</button>
其它你可能感兴趣的问题
上一篇如何删除选定的元素react 下一篇管理员休息，编辑页面 - 不正确的元素错误