简体   繁体   中英

Use React Leaflet Draw from outside of the map

I want to customize draw icons that are initially displayed on the map.

How can I call each action from outside map?

I manage to call zoom controls by using redux and change zoom state. Is there a valid option to use redux state and open or close draw actions.

This is the current implementation of edit controls

<Map
                 style={this.leafletMapService.getMapStyle()}
                 selectArea={true}
                 onAreaSelected={(event) => this.handleAreaSelection(event)}
                 boxZoom={false}
                 ref={map => {this.map = map}}
                 center={this.props.center}
                 zoom={this.props.zoom}
                 minZoom={this.props.minZoom}
                 maxZoom={this.props.maxZoom}
                 attributionControl={false}
                 doubleClickZoom={false}
                 zoomControl={false}
                 editable={true}
                 onZoomEnd={this.handleZoomEnd}
                 bounceAtZoomLimits={false}
                 crs={this.leafletMapService.getNonGeographicMapCRS()}
                 dragging={!!this.props.selectedSection}
                 scrollWheelZoom={false}>
                <FeatureGroup>
                    <EditControl position={'topright'}
                                 onCreated={(event) => this.onCreatedHandler(event)}
                                 onEdited={(event) => this.onEditedHandler(event)}
                                 onDeleted={(event) => this.onDeletedHandler(event)}
                    />
                    {this.props.children}
                </FeatureGroup>
            </Map>

if you cant this, you must look at this issue https://github.com/alex3165/react-leaflet-draw/issues/1

  _onDraw = () => {
        // this code is enable drawing polygon.
        this.drawControl._toolbars.draw._modes.polygon.handler.enable();
   }

   _onMounted = (drawControl) => {
        this.drawControl = drawControl;
    }
      <FeatureGroup >
         <EditControl
            onMounted={this._onMounted}
    ........ > .....</EditControl>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM