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

Question

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

\n\n

import L from \'leaflet\';\n\nclass CarteController {\n  /* @ngInject */\n  constructor($http) {\n    this.name = \'carte\';\n    this.$http = $http;\n\n    this.map = L.map(\'map\');\n\n    L.tileLayer(\'http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png\', {\n      attribution: \'\xc2\xa9 OpenStreetMap contributors\'\n    }).addTo(this.map);\n\n    const control = L.Routing.control({\n      waypoints: [\n        L.latLng(45.750000, 4.850000),\n        L.latLng(45.188529, 5.724523999999974),\n        L.latLng(45.00, 5.74)\n      ],\n      routeWhileDragging: true,\n      geocoder: L.Control.Geocoder.photon()\n    });\n    control.addTo(this.map);\n    control.on(\'waypointschanged\', () => {\n      console.log(control._routes[0].summary.totalDistance);\n      this.distance = `${Math.round(control._routes[0].summary.totalDistance / 1000)} km`;\n      this.temps = this.secondsToHm(control._routes[0].summary.totalTime);\n    });\n\n    new L.Routing.Plan({\n      geocoderPlaceholder: (i, numberWaypoints) => {\n        return i === 0 ?\n          \'D\xc3\xa9part\' :\n          (i < numberWaypoints - 1 ?\n            `Via ${i}` :\n            \'Arriv\xc3\xa9e\');\n      }\n    }).addTo(this.map);\n  }\n\n  secondsToHm(d) {\n    console.log(d);\n    d = Number(d);\n    const h = Math.floor(d / 3600);\n    const m = Math.floor(d % 3600 / 60);\n    return ((h > 0 ? h + " h " + (m < 10 ? "0" : "") : "") + m + " min"); // eslint-disable-line\n  }\n}\n\nexport default CarteController;\n

\n

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/