有没有扩展react-leaflet Map组件来使用leaflet.contextmenu的例子？

Question

react-leaflet-context-menu是leaflet.contextmenu的react版本。但是，它在react中使用了原始的leaflet地图来实现插件，而不是使用react-leaflet。

我在我的应用中采用了react-leaflet，使用的是组件。我通过互联网，但没有多少例子来展示如何正确地扩展地图。

以下是我的应用程序中地图的代码：

<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。props contextmenu、contextmenuWidth、contextmenuItems将被输入到扩展组件中，并在地图上单击鼠标右键时显示一些控件。

Answer 1

在你的应用中安装leaflet-contextmenu，然后在你的代码中添加如下内容：

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

看起来不错。