从地图外部使用React Leaflet Draw

时间:2018-10-04 10:34:47

标签: javascript reactjs leaflet react-leaflet leaflet.draw

我想自定义最初显示在地图上的绘图图标。

如何从外部地图调用每个动作?

我设法通过使用redux来调用缩放控件并更改缩放状态。 是否有使用Redux状态以及打开或关闭绘制动作的有效选项。

这是编辑控件的当前实现

<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>

1 个答案:

答案 0 :(得分:0)

如果您不能这样做,则必须查看此问题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>