如何让 Mapbox 在点之间路由而不是绘制直线？

Question

我正在使用 Mapbox 在地图上的点之间绘制折线，但线条很混乱，它没有按照地图路线打印，有人可以帮我解决这个问题，或者请建议一些替代方案。

 var myMap = L.mapbox.map('map')
.setView([34.2445899, -119.1842238], 13)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var markers = new L.MarkerClusterGroup();
var refreshRealTime;
var featureLayer = L.mapbox.featureLayer().addTo(myMap); 

 

request.onreadystatechange = function () {
      if (this.readyState === 4) {
        let body = JSON.parse(this.responseText);
        let coords_line = [];
        let stopArr = [];
        for(let i=0; i<body.length; i++){
            let data = body[i];
            let stop =  data.stop;
            
            if(!stopArr.includes(stop.name)){
                coords_line.push([stop.lat, stop.lon ]);
                let marker = L.marker(new L.LatLng(stop.lat, stop.lon), {
                    icon: L.mapbox.marker.icon({'marker-symbol': 'bus', 'marker-color': '0044FF', 'description':'<div><p><b>Cpanacity: </b></div>'}),
                    title: stop.name
                });
                marker.bindPopup(stop.name);
                markers.addLayer(marker);
                stopArr.push(stop.name);
            }
        
        }
        myMap.addLayer(markers);
        if(coords_line.length > 0){
            myMap.setView(coords_line[0], 13);
            setTimeout(function(){ 
                let routeId= $("#route").val();
                let routecolor = routeObj[routeId].color;
                
                polyline = L.polyline(coords_line, {color: routecolor}).addTo(myMap);
                
                
             }, 1000);
        }
      }
    };

Answer 1

经过调试我找到了解决方案，首先我们需要根据给定的点调用方向API

 $.get('https://api.mapbox.com/matching/v5/mapbox/driving/' + qry + '?geometries=geojson&steps=true&access_token='+token, 
        function( data ) {
        // var coords = polyline.decode(data.routes[0].geometry);
        var coords = data.matchings[0].geometry.coordinates;
        let coords_line = [];
        for(let i=0; i<coords.length; i++){
            coords_line.push([coords[i][1],coords[i][0]]);
        }
        polyline = L.polyline(coords_line, {color: '<?= $color ?>'}).addTo(myMap)

然后我们应该打印折线

完整代码在这里

    var myMap = L.mapbox.map('map')
.setView([34.2445899, -119.1842238], 13)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var markers = new L.MarkerClusterGroup();
var refreshRealTime;
var featureLayer = L.mapbox.featureLayer().addTo(myMap); 

 

request.onreadystatechange = function () {
      if (this.readyState === 4) {
        let body = JSON.parse(this.responseText);
        let coords_line = [];
        let stopArr = [];
        let qry = [];
        for(let i=0; i<body.length; i++){
            let data = body[i];
            let stop =  data.stop;
            
            if(!stopArr.includes(stop.name)){
                coords_line.push([stop.lat, stop.lon ]);
                qry.push(stop.lon+','+stop.lat);
                let marker = L.marker(new L.LatLng(stop.lat, stop.lon), {
                    icon: L.mapbox.marker.icon({'marker-symbol': 'bus', 'marker-color': '0044FF', 'description':'<div><p><b>Cpanacity: </b></div>'}),
                    title: stop.name
                });
                marker.bindPopup(stop.name);
                markers.addLayer(marker);
                stopArr.push(stop.name);
            }
        
        }
        myMap.addLayer(markers);
        if(coords_line.length > 0){
            myMap.setView(coords_line[0], 13);
            setTimeout(function(){ 
                let routeId= $("#route").val();
                let routecolor = routeObj[routeId].color;
                
                calculateRoute(qry.join(";"));
                
                
             }, 1000);
        }
      }
    };

    function calculateRoute(qry) {
          $.get('https://api.mapbox.com/matching/v5/mapbox/driving/' + qry + '?geometries=geojson&steps=true&access_token='+token, 
            function( data ) {
            // var coords = polyline.decode(data.routes[0].geometry);
            var coords = data.matchings[0].geometry.coordinates;
            let coords_line = [];
            for(let i=0; i<coords.length; i++){
                coords_line.push([coords[i][1],coords[i][0]]);
            }
            polyline = L.polyline(coords_line, {color: '<?= $color ?>'}).addTo(myMap)
                // addRoute(coords);
            // var line = L.polyline(coords).addTo(myMap);

          });  
        }

Answer 2

很明显，您没有使用帮助显示路线的路线API，这里是您需要根据代码实现的一般设置：

const fetchRoute = async () => {
    try {
      const response = await fetch(
        `https://api.mapbox.com/directions/v5/mapbox/driving/${userLocation[0]},${userLocation[1]};${selectedLocation[0]},${selectedLocation[1]}?access_token=${accessToken}`
      );
      const data = await response.json();
      
      const routeGeometry = data.routes[0].geometry;
      const decodedCoordinates = polyline.decode(routeGeometry);
      setRouteCoordinates(decodedCoordinates);
    } catch (error) {
      console.error('Error fetching or processing route:', error);
    }
  }
};