如何在_如何在MapboxGLJS动画中为LineString分段着色不同

mapboxgl.accessToken = 'INSERT YOUR MAPBOX KEY HERE';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 0
);
map.on('load', function()
// We use D3 to fetch the JSON here to parse and use it separately
// from GL JS's use in the added source. You can use any request method
// that you want.
d3.json(
"https://raw.githubusercontent.com/pete-rodrigue/wolves_of_alberta/data_store/wolves_geojson_example.geojson?token=ACEMB42EH5NKZSF24MHPQSS6JFTMU",
function(err, data)
if (err) throw err;

// save full coordinate list for later
var coordinates = data.features[0].geometry.coordinates;
// save 1's and 0's for later
var daynight = data.properties.daytime

// start by showing just the first coordinate
data.features[0].geometry.coordinates = [coordinates[0]];
// THIS NEXT LINE IS ONE PART OF MY FAILED APPROACH:
data.properties.daytime = ['blue']; // set initial color value to blue

// add it to the map
map.addSource('trace', type: 'geojson', data: data );
map.addLayer(
'id': 'trace',
'type': 'line',
'source': 'trace',
'paint':
// THIS WILL WORK FINE
'line-color': 'orange',
// 'line-color': ['to-string', ['get', 'daytime']], // DOES NOT WORK
'line-width': 8
,
layout: 'line-cap': 'round', 'line-join': 'round'
);

// setup the viewport
map.jumpTo( 'center': coordinates[0], 'zoom': 13 );
map.setPitch(30);

// on a regular basis, add more coords from the saved list to update map
var i = 0;
var timer = window.setInterval(function()
if (i data.features[0].geometry.coordinates.push(
coordinates[i]
);

// if it's daytime, append blue; if it's nighttime, append red
if (daynight[i] == 0)
data.properties.daytime.push(['blue']);
else data.properties.daytime.push(['red']);

map.getSource('trace').setData(data);
map.panTo(coordinates[i]);
i++;
else
window.clearInterval(timer);

, 150);

);
);

body margin: 0; padding: 0;
#map position: absolute; top: 0; bottom: 0; width: 100%;