Question

我正在使用react-leaflet来显示非地理地图。我还添加了一些缩放变化事件。（的 onZoomEnd() ）

我想知道如何访问地图对象或地图组件并获取当前缩放级别。还是其他地图道具？

  <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                onZoomEnd={this.mapService.handleZoomstart(/* map.object */)}


               >
</Map

我需要在处理程序方法

中访问map对象

handleZoomstart = (map) => {
        // TODO handle move event
    };

Answer 1

您需要添加对地图的引用：

<Map
  ref={(ref) => { this.map = ref; }}
  {...}
>
(...)
</Map>

然后你可以访问地图：

handleZoomstart = (map) => {
  console.log(this.map && this.map.leafletElement);
};

目前的缩放：

getMapZoom() {
   return this.map && this.map.leafletElement.getZoom();
}

Answer 2

这也可以不使用引用来完成。使用事件“ onZoomEnd”。

此事件对象具有“ _zoom”属性，它是当前缩放状态。

e.target._zoom

Answer 3

我只是简单地解决了上述问题。 React传单提供了一个不错的“ onViewportChange”回调，可以在使用地图时捕获中心和缩放更改。

您需要三件事，即声明的“ Viewport”对象，该函数支持回调和回调。

const viewport = {
center: [49.32707, 19.10041],
zoom: 5,
};

const onViewportChanged = (viewport) => {
console.log(viewport);
};

return (

<Map viewport={viewport} onViewportChanged={onViewportChanged}></Map>)

最诚挚的问候

如何在zoom-leaflet上获取缩放更改事件中的Map对象

3 个答案: