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

Question

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

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

这是我的应用程序中的 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。 Prop contextmenu、contextmenuWidth、contextmenuItems 将被输入到扩展组件，并在 map 上右键单击时显示一些控件。

Answer 1

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

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

它会起作用。