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

Question

react-leaflet-context-menu 是leaflet.contextmenu 的react 版本。然而它使用原始的传单映射来实现反应中的插件而不是使用反应传单。

我在我的应用程序中采用了 react-leaflet，使用组件。我浏览了互联网，但没有多少示例来展示如何正确扩展 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";

它会起作用的。