Javascript 如何在Mapbox GL JS动画中以不同方式为线字符串段着色

我正在制作一个动画，根据我得到的一些历史GPS数据显示狼去了哪里。 代码基于此Mapbox示例：

我想根据白天还是夜间给线段上色，晚上用蓝色，白天用红色。像这样：

在时间段1，狼向东北偏东移动；现在是夜间，所以线段是蓝色的。在时间段2，狼向东北移动；现在是白天，所以线段是红色的。在时间段3，狼再次向东北偏东移动；现在是夜间，所以线段又是蓝色的

但我似乎无法让不同的颜色发挥作用。我有一些玩具/示例数据：

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {
"type": "LineString", "coordinates" : [[-112.191833, 57.073668],
[-112.181833, 57.083668],
[-112.181833, 57.073668],
[-112.201833, 57.075668]]} } ], 
"properties": {"daytime" : [0, 1, 1, 0] }}

有4个时段，中间两个时段为白天（设置为1）

这是我的密码。（需要粘贴到地图框键中才能使其工作）：

mapboxgl.accessToken='在此处插入您的MAPBOX密钥'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/satellite-v9',
缩放：0
});
map.on（'load'，function（））{
//我们在这里使用D3获取JSON来分别解析和使用它
//在添加的源代码中使用GL JS。您可以使用任何请求方法
//你想要的。
d3.json(
"https://raw.githubusercontent.com/pete-rodrigue/wolves_of_alberta/data_store/wolves_geojson_example.geojson?token=ACEMB42EH5NKZSF24MHPQSS6JFTMU",
功能（错误、数据）{
如果（错误）抛出错误；
//保存完整的坐标列表供以后使用
var坐标=数据。要素[0]。几何体。坐标；
//保存1和0以备以后使用
var daynight=data.properties.dayday
//首先只显示第一个坐标
data.features[0].geometry.coordinates=[coordinates[0]]；
//下一行是我失败方法的一部分：
data.properties.day=['blue']；//将初始颜色值设置为蓝色
//把它添加到地图上
addSource（'trace'，{type:'geojson'，data:data}）；
map.addLayer({
'id'：'trace'，
“类型”：“行”，
“源”：“跟踪”，
“油漆”：{
//这很好用
“线条颜色”：“橙色”，
//“线条颜色”：['to-string'，['get'，'day']]，//不起作用
“线宽”：8
},
布局：{'line-cap'：'round'，'line join'：'round'}
});
//设置视口
map.jumpTo（{'center'：坐标[0]，'zoom'：13}）；
地图设置间距（30）；
//定期从保存的列表中添加更多坐标以更新地图
var i=0；
var timer=window.setInterval（函数（）{
if（i<坐标长度）{
data.features[0].geometry.coordinates.push(
坐标[i]
);
//如果是白天，加上蓝色；如果是夜间，加上红色
if（昼夜[i]==0）{
data.properties.dayday.push（['blue']）；
}else{data.properties.daily.push（['red']）；}
map.getSource（'trace'）.setData（数据）；
panTo地图（坐标[i]）；
i++；
}否则{
窗口清除间隔（计时器）；
}
}, 150);
}
);
});
body{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}

全球定位系统领子示例数据
当您指定：

'line-color': ['to-string', ['get', 'daytime']]

在带有
Map#addLayer
的
'trace'
层中，地图渲染器被告知使用
'[0,1,1,0]'
（对于您提供的示例数据）作为id为
的
源代码中的行的颜色
'trace'
。它不会等待您设置计时器，即使设置了计时器，您也可能会在JavaScript的异步性方面遇到一些问题。如Mapbox中所述，
'line-color'
需要一个HTML样式的十六进制值、RGB、RGBA、HSL或HSLA形式的数组，因此您可能会遇到错误，因为字符串化数组不是这些形式

相反，我建议将每个时间段分解为自己的
LineString
，其中
'line-color'
由其在原始颜色数组中的相应值指定，并将这些
LineString
作为单独的层添加到地图中。然后，您可以通过设置一些间隔来创建动画效果，以指定层的添加顺序和动画效果，如中所述。
谢谢！我想试试这个。