我正在尝试在传单地图上实现绘制功能。我创建了一个仅安装了react-leaflet的新应用程序,使用npx create-react-app并安装了以下软件包:
- npm install 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='© <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问题你会得出这样的结论react-leaflet-draw
仅兼容react-leaflet
版本2.x而不是版本3.x.
因此,它不适用于您的情况,因为您使用的是反应传单版本3.x.
如果您降级到版本2.x它应该按预期工作
最后但并非最不重要的一点是您不需要导入MapControl
因为包装中不需要它。您只需要导入
import { EditControl } from "react-leaflet-draw"
就像你已经做的那样。MapControl
在库内部使用,并且可能在新版本中发生了一些变化,这就是您收到错误的原因。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)