如何解决如何在 React-Leaflet 3 中使用传单路由机?
react-leaflet 2.8.0 的旧方法是使用 MapLayer
和 withLeaflet
。
但现在在 react-leaflet 中:
MapLayer
和 withLeaflet
在版本 3 中已弃用。
我正在尝试掌握核心文档:https://react-leaflet.js.org/docs/core-introduction
但以下不起作用,我明白了
提供的对象不是图层。
import React,{ Component,useEffect } from "react";
import { useLeafletContext,leafletElement,createLayerComponent } from '@react-leaflet/core'
import { MapContainer,TileLayer,useMap } from "react-leaflet";
import Leaflet from "leaflet";
import "leaflet-routing-machine";
function Routing(props) {
const context = useLeafletContext();
useEffect(() =>
{
let routing = createLayerComponent(Leaflet.Routing.control(
{
waypoints: [
Leaflet.latLng(33.52001088075479,36.26829385757446),Leaflet.latLng(33.50546582848033,36.29547681726967)
],lineOptions: {
styles: [{ color: "#6FA1EC",weight: 4 }]
},show: false,addWaypoints: false,routeWhileDragging: true,draggableWaypoints: true,fitSelectedRoutes: true,showAlternatives: false
}),)
const container = context.layerContainer || context.map
container.addLayer(routing)
return () => {
container.removeLayer(routing)
}
})
return null;
}
function MapComponent() {
return (
<MapContainer center={[33.5024,36.2988]} zoom={14} >
<TileLayer url="https://api.maptiler.com/maps/ch-swisstopo-lbm-dark/256/{z}/{x}/{y}.png?key=gR2UbhjBpXWL68Dc4a3f" />
<Routing />
</MapContainer>
);
}
export default MapComponent;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。