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

Question

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

所以 leaflet-contextmenu 来自 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