如何解决反应传单和反应传单绘制
我正在尝试在传单地图上实现绘图功能。我创建了一个只安装了 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='© <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;
这个包有什么问题?它对反应有效吗?
解决方法
如果您检查此 github issue,您会得出结论:react-leaflet-draw
仅与 react-leaflet
版本 2.x 兼容,而不与 3 版本兼容。 x.
因此,它不适用于您的情况,因为您使用的是 react-leaflet 版本 3.x。
如果您降级到 2.x 版本,它应该可以正常工作
最后但并非最不重要的是,您不需要从包中导入 MapControl
。你只需要导入
import { EditControl } from "react-leaflet-draw"
正如你所做的那样。 MapControl
在库内部使用,可能在较新版本中发生了一些变化,这就是您收到错误的原因。
将 MapControl
添加到您的导入:
import { MapContainer,TileLayer,Marker,Popup,MapControl } from 'react-leaflet'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。