javascript - 使用传单路由机更改行程的颜色

Question

如何使用传单路由机库将行程的颜色从红色更改为其他颜色？我必须使用 L.Routing.Line 更改样式选项，但我不知道如何更改。 http://www.liedman.net/leaflet-routing-machine/api/

import L from 'leaflet';

class CarteController {
  /* @ngInject */
  constructor($http) {
    this.name = 'carte';
    this.$http = $http;

    this.map = L.map('map');

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(this.map);

    const control = L.Routing.control({
      waypoints: [
        L.latLng(45.750000, 4.850000),
        L.latLng(45.188529, 5.724523999999974),
        L.latLng(45.00, 5.74)
      ],
      routeWhileDragging: true,
      geocoder: L.Control.Geocoder.photon()
    });
    control.addTo(this.map);
    control.on('waypointschanged', () => {
      console.log(control._routes[0].summary.totalDistance);
      this.distance = `${Math.round(control._routes[0].summary.totalDistance / 1000)} km`;
      this.temps = this.secondsToHm(control._routes[0].summary.totalTime);
    });

    new L.Routing.Plan({
      geocoderPlaceholder: (i, numberWaypoints) => {
        return i === 0 ?
          'Départ' :
          (i < numberWaypoints - 1 ?
            `Via ${i}` :
            'Arrivée');
      }
    }).addTo(this.map);
  }

  secondsToHm(d) {
    console.log(d);
    d = Number(d);
    const h = Math.floor(d / 3600);
    const m = Math.floor(d % 3600 / 60);
    return ((h > 0 ? h + " h " + (m < 10 ? "0" : "") : "") + m + " min"); // eslint-disable-line
  }
}

export default CarteController;

Answer 1

根据文档:

 L.Routing.line(yourRoute, {
   styles:[{color: 'black', opacity: 0.15, weight: 9}, {color: 'white', opacity: 0.8, weight: 6}, {color: 'green', opacity: 1, weight: 2}]
});

来源:http://www.liedman.net/leaflet-routing-machine/api/#lineoptions

您也可以在控件中尝试:

L.Routing.control({
   waypoints: waypoints,
   lineOptions: {
      styles: [{color: 'white', opacity: 1, weight: 5}]
   }
}).addTo(this.map)

来源:https://trustdarkness.com/wordpress/leaflet-routing-machine-custom-icons-and-custom-lines/