反应传单和反应传单绘制

Question

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

• npm 安装 React React-dom 传单
• npm 安装反应传单

此时，我已经启动了应用程序，一切正常：地图正确可视化，中间有一个标记。

然后我添加了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;

这个包有什么问题吗？反应有用吗？

Answer 1

如果您检查此github问题，您将得出结论，

react-leaflet-draw

仅与

react-leaflet

版本2.x兼容，而不与版本3.x兼容。

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

如果您降级到版本 2.x 它应该按预期工作

最后但并非最不重要的一点是，您不需要导入

MapControl

，因为包中不需要它。您只需导入

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

就像你已经做的那样。

MapControl

在库内部使用，可能在新版本中发生了一些变化，这就是您收到错误的原因。

Answer 2

将

MapControl

添加到您的导入中：

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

Answer 3

似乎react-leaflet-draw包与您安装的react-leaflet版本的兼容性存在问题。该错误表明MapControl组件不是从react-leaflet导出的，而react-leaflet-draw中的EditControl依赖于它。

要解决此问题，您可以尝试以下步骤：

检查依赖关系： 确保您使用的是兼容版本的react-leaflet和react-leaflet-draw。有时，某些版本的软件包可能会发生重大更改。

您可以通过查看各自 GitHub 存储库上每个包的文档或发行说明来检查版本的兼容性。

更新包： 尝试将react-leaflet和react-leaflet-draw都更新到最新版本：

npm install react-leaflet@latest
npm install react-leaflet-draw@latest

替代方法： 如果问题仍然存在，您可以考虑使用替代方法将绘图功能添加到 React 应用程序中的 Leaflet 地图中。例如，您可以使用react-leaflet-draw包而不导入MapControl，看看它是否适合您的需求。

    import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
    import L from 'leaflet';
    import 'leaflet/dist/leaflet.css';
    import 'leaflet-draw/dist/leaflet.draw.css';
    import { EditControl } from 'react-leaflet-draw';

    // ... rest of the code ...

    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>
          <EditControl position="topright" />
        </MapContainer>
      );
    }

    export default App;

请记住彻底检查react-leaflet和react-leaflet-draw的文档和GitHub存储库，以获取与兼容性相关的任何具体说明或更新。