地图实例的 React-leaflet v3 和 Leaflet-contextmenu 插件问题

Question

react-leavlet-v3 中没有可用的地图实例。

还有来自的传单上下文菜单 https://github.com/aratcliffe/Leaflet.contextmenu 不工作。

示例显示我的问题 https://codesandbox.io/s/show-problem-leaflet-contextmenu-on-react-leaflet-v3-o2x6z?file=/src/MapView.js

Answer 1

您可以使用 MapContainer 上的 whenCreated 属性获取地图实例

<MapContainer
        className="markercluster-map"
        center={currentLocation}
        zoom={zoom}
        maxZoom={18}
        contextmenu={true}
        contextmenuItems={[
          {
            text: 'Zoom in',
            callback: this.zoomIn
          },
          { text: 'Zoom out', callback: this.zoomOut }
        ]}
        whenCreated={(map) => this.setState({ map })}
      >
   ...
</MapContainer>

然后在你的事件监听器上

zoomOut = () => {
    const { map } = this.state;
...
}
zoomIn = () => {
    const { map } = this.state;
...
}

Demo