leaflet - 无法从 react-leaflet-draw 导入 EditControl

Question

版本：传单 - 1.3.4

反应传单 - 2.0.1

传单绘制 - 1.0.4

反应传单绘制-0.19.8

代码：

import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { EditControl } from "react-leaflet-draw";

import "./styles.css";

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

错误：

找不到依赖项：'@react-leaflet/core' 相对于'/node_modules/react-leaflet-draw/dist/esm/EditControl.js'

我尝试将 react-leaflet 升级到 3.x，但同样的错误。

Answer 1

深入研究 react-leaflet-draw repo 有点令人困惑。自述文件显示了一个示例import { Map } from 'react-leaflet'，但 package.json 显示了 react-leaflet v3 的依赖项，它不是 importMap而是MapContainer. 该仓库中的源代码和示例确实显示import { MapContainer } from 'react-leaflet'.

您可能想尝试一个简单npm install @react-leaflet/core的.MapContainerMap