在react-leaflet 2.8.0中旧的做法是使用MapLayer
and withLeaflet
.
但现在在反应传单中:
MapLayer
and 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;