リーフレットのルーティングマシンで色を変更する

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/