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

npm install react-leaflet leaflet

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';
import 'leaflet-contextmenu';

class CustomMap extends React.Component {
  componentDidMount() {
    const { map } = this.refs.map.leafletElement;
    
    // 添加contextmenu插件
    map.contextmenu({
      contextmenu: true,
      contextmenuWidth: 140,
      contextmenuItems: [{
        text: 'Custom Item',
        callback: (e) => {
          console.log('Custom Item clicked!', e.latlng);
        }
      }]
    });
  }

  render() {
    return (
      <Map ref="map" center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="Map data © <a href='https://openstreetmap.org'>OpenStreetMap</a> contributors"
        />
      </Map>
    );
  }
}

export default CustomMap;

import React from 'react';
import CustomMap from './CustomMap';

function App() {
  return (
    <div>
      <h1>React Leaflet Map with Context Menu</h1>
      <CustomMap />
    </div>
  );
}

export default App;