在反应传单地图中捕捉事件

Question

我想知道如何在 react-leaflet 地图组件上捕获 zoomstart 和 zoomend 事件。

我有一些自定义的非地理地图

            <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                attributionControl={false}
                doubleClickZoom={false}
                zoomControl={false}
                crs={this.mapService.getProjectionType()}
            >



                <ZoomControl position={'topright'} zoomInText={"<img src=" + this.mapService.getPlusIconPath() + " alt='plus' />"} zoomOutText={"<img src=" + this.mapService.getMinusIconPath() + " alt='minus' />"} />
                <CategoryControl />
                <Layers data={this.showPlanService.getJSONResponse()} />

            </Map>

我需要根据缩放级别显示和隐藏一些组件。

Answer 1

问题总是微不足道的:)

这个URL是原生传单活动

http://leafletjs.com/reference-1.2.0.html#map-event

要在 React-leaflet 中使用它们，您需要添加 ass 属性事件，如下所示（on + 事件名称 ) 我必须补充一点，事件调用者不区分大小写

即

<Map ...  onZoomStart={this.handleZoomStart} onMoveEnd={this.handleMoveEnd} ...> 
</Map

在反应传单地图中捕捉事件

Catch Event in react-leaflet map

leaflet

reactjs

react-leaflet