反应传单和反应传单绘制答案

【问题标题】：React leaflet and react-leaflet-draw反应传单和反应传单绘制
【发布时间】：2020-12-19 12:51:00
【问题描述】：

我正在尝试在传单地图上实现绘图功能。我创建了一个仅安装了 react-leaflet 的新应用，使用 npx create-react-app 并安装了以下软件包：

npm install react react-dom 传单
npm install react-leaflet

此时，我已启动应用程序，一切正常：地图已正确显示，中间有一个标记。

然后我添加了react-leaflet-draw包，用npm install react-leaflet-draw，导入到页面出现如下错误：

./node_modules/react-leaflet-draw/dist/esm/EditControl.js
Attempted import error: 'MapControl' is not exported from 'react-leaflet'

这是完整的代码：

import './App.css';
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, Marker, Popup, MapControl } from 'react-leaflet'
import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';

import 'leaflet-draw/dist/leaflet.draw.css';
import { EditControl } from "react-leaflet-draw";


delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetina,
  iconUrl: icon,
  shadowUrl: iconShadow
})



function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={10} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;

这个包有什么问题？它对反应有效吗？

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet react-leaflet-draw

【解决方案1】：

如果您检查此github issue，您会得出结论，react-leaflet-draw 仅与 2.x 版本的react-leaflet 兼容，而与 3.x 版本不兼容。

因此，它不适用于您的情况，因为您使用的是 react-leaflet 版本 3.x。

如果您降级到版本 2.x，它应该可以正常工作

最后但并非最不重要的一点是，您不需要导入 MapControl，因为包中不需要它。你只需要导入

import { EditControl } from "react-leaflet-draw"

就像你已经做过的那样。 MapControl 在库内部使用，并且可能在较新版本中发生了某些更改，这就是您收到错误的原因。

【讨论】：

【解决方案2】：

将MapControl 添加到您的导入中：

import { MapContainer, TileLayer, Marker, Popup, MapControl } from 'react-leaflet'

【讨论】：

完成了，但仍然是同样的错误。我忘了把代码粘贴到我实际添加的地方