如何在 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 (将#修改为@）