如何用单张选路机逐个点画路线？

Question

我想使用leaflet和leaflet-routing-machine从多个点拖动路由。我不知道如何将所有的位置传递到waypoints。

import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import "leaflet-routing-machine";
import { useMap } from "react-leaflet";

L.Marker.prototype.options.icon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png"
});

export default function RoutingLayer({ route }) {
    const map = useMap();
    const waypoints = route ? route : null;
    const [routing, setRouting] = useState([]);

    useEffect(() => {
        var temp = get_route(waypoints)
        setRouting(temp);

        if (!map) return;
        const routingControl = L.Routing.control({
            waypoints: routing.length > 0 && routing,
            // waypoints: [L.latLng(37.2461188, 49.6219894), L.latLng(35.7074147, 51.3376843)],
            routeWhileDragging: true
        }).addTo(map);

        return () => map.removeControl(routingControl);
    }, [map, waypoints]);

    async function get_route(waypoints) {
        let temp = []
        for (let i = 0; i < waypoints.length; i++) {
            temp.push(L.latLng(waypoints[i][0], waypoints[i][1]))
        }
        return temp;
    }

    return null;
}

上面的代码适用于waypoints: [L.latLng(37.2461188, 49.6219894), L.latLng(35.7074147, 51.3376843)],，但我想让这一点成为动态的。此代码没有错误，但没有拖动路由。因为路标是空的。

我想对get_route使用异步等待，但不起作用。

我是MapContainer

import React, { useEffect, useState } from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import "./monitoring.css";
import RoutingLayer from "./RoutingLayer";

function Map() {
    const [allLocations, setAllLocations] = useState([])
    const [allDetails, setAllDetails] = useState([])
    const [route, setRoute] = useState([])

    useEffect(() => {
        GetAllBusLocation().then((res) => {
            const data = res.data.data;
            var points = []
            setAllDetails(data);
            for (let i = 0; i < data.length; i++) {
                points.push(data[i].spanData.coordinates)
            }
            data.map((bus) => {
                points.push(bus.spanData.coordinates)
            })
            setAllLocations(points)
            map_route(points);
        })
    }, [])

    const map_route = (waypoints) => {
        let route = []
        for (let i = 0; i < waypoints.length; i++) {
            let temp = []
            temp.push(waypoints[i][0], waypoints[i][1])
            route.push(temp)
        }
        setRoute(route);
        return route;
    }

    return (
        <div style={{ width: "100%", height: "100%" }}>
            <MapContainer center={[32.4279, 53.6880]} zoom={7} scrolWheelZoom={true}>
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <RoutingLayer route={route ? route : null} />
            </MapContainer>
        </div>
    )
}

export default Map

Answer 1

最后，我解决了这个问题。这是一个异步问题。首先，加载点或位置，然后转换为路由，然后绘制路由。因此，在使用get_route(points)完全执行await之前，我停止了其余的运行。

import L from "leaflet";

function Map() {

    const [waypoints, setWaypoints] = useState([])

    useEffect(() => {
        GetAllBusLocation(user).then(async (res) => {
            ...
            // points is my coordinates
            var route = await get_route(points);
            setWaypoints(route);
        })
    }, [])

    async function get_route(waypoints) {
        let temp = []
        for (let i = 0; i < waypoints?.length; i++) {
            temp.push(L.latLng(waypoints[i][0], waypoints[i][1]))
        }
        return temp;
    }

return (
        <MapContainer>
        ...
             <RoutingBusLayer waypoints={waypoints ? waypoints : null} />
        </MapContainer>            
    )
}

export default Map