React Leaflet.draw：如何在不使用react-leaflet工具栏的情况下使用标准按钮创建绘图功能，但是请使用“ React”编写

Question

我如何在单独的控件框中创建驻留在传单地图上的自定义按钮，以创建“折线”，“多边形”或“标记”，它们将全部位于单独的按钮上，而无需使用传单绘图< / strong> 标准用户界面工具栏。我真的很想知道如何相对于Vanilla Javascript用“ React” 方式编写它，因为我的整个程序都是用React编写的。如果任何人都可以编写一个简单的程序来显示如何使用单独的按钮在React中绘制“折线，多边形”等，将不胜感激。

这是我的一些代码的摘要。 谢谢

z

其他组件

  <Map
                            zoomControl={false}
                            center={position}
                            zoom={this.state.zoom}
                            className={classes.height}
                            ref={m => {
                                this.leafletMap = m;
                            }}>
                            {/* LAYER CONTROL ON TOP OF MAP*/}
                            <LayersControl position="topright">
                                <BaseLayer checked name="OpenStreetMap.Mapnik">
                                    <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                    />
                                </BaseLayer>
                                <BaseLayer name="OpenStreetMap.BlackAndWhite">
                                    <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
                                    />
                                </BaseLayer>
                            </LayersControl>

                            **CALLS OTHER COMPONENT WHICH RENDERS FEATUREGROUP, EDITCONTROL**
                            **<Mapediting save={this.setSave} myIcon={myIcon} />**

                            <ZoomControl position="topright" />
                            <TileLayer
                                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            />
                            {/* show users general area */}
                            <Marker position={position} icon={myIcon} title="Your Position" draggable={true}>
                                {/* <Popup>
                                      Your Mapped Location <br /> Lat: {this.state.location.lat} Long:
                                   {this.state.location.lng}  
                                </Popup> */}
                            </Marker>
                        </Map>