是否有示例扩展react-leaflet Map组件以使用leaflet.contextmenu？

Question

react-leaflet-context-menu是leaflet.contextmenu的反应版本。但是，它使用原始的传单地图来实现react中的插件，但未使用react-leaflet。

我使用组件在我的应用程序中采用了react-leaflet。我浏览了Internet，但没有太多示例来演示如何正确扩展Map。

这是我在应用中的地图代码：

<LeafletMap
        ref={m => {this.leafletMap = m;}}
        center={this.state.center}
        zoom={this.state.zoom}
        maxZoom={this.state.maxZoom}
        preferCanvas={this.state.preferCanvas}
        contextmenu={this.state.contextmenu}
        contextmenuWidth={this.state.contextmenuWidth}
        contextmenuItems={this.state.contextmenuItems}>
        <TileLayer
          url={mapsource}
          />
        <MarkerClusterGroup showCoverageOnHover={false} zoomToBoundsOnClick={false} maxClusterRadius={30}>
          {CamMarkers}
        </MarkerClusterGroup>
        <ScaleControl imperial={false} metric={true}/>
</LeafletMap>

我希望通过扩展react-leaflet的组件，它可以直接支持leaflet.contextmenu。道具contextmenu，contextmenuWidth，contextmenuItems将输入到扩展组件中，并在右键单击地图时显示一些控件。

Answer 1

在您的应用中安装leaflet-contextmenu，然后将其添加到您的代码中：

import "leaflet-contextmenu";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";

它将起作用。