javascript - Mapbox GL JS : Refreshing JSON polygons

Question

我正在开发一个使用 Mapbox GL JS 显示天气信息的网络应用程序。我编写了一个 JS 函数来刷新雷达图像，具体取决于文本文件的时间戳是否与应用程序存储的当前时间戳匹配。调用该函数时，它会删除图像源并添加另一个具有相同 ID 的图像源，从而刷新图像。这很好用。

但是，我尝试对 JSON 源做同样的事情，当函数被调用刷新时 - 它将从 map 中删除多边形但不会将它们添加回去。还有其他方法吗？

找到函数in this JS file . (目前还没有太多内容。)

函数 refreshWARNINGS_A() 是问题所在(粘贴在下面)。每个警告(洪水、山洪、强雷暴和 Tornado 警告)有 2 个 JSON 多边形，因为有一个彩色填充层和一个复制层以形成实心边框。 (有不同的 ID，因此不应相互干扰)。

function refreshWARNINGS_A()
{



topleftmapbox.removeLayer('FlashFloodWarningOuter');
topleftmapbox.removeLayer('FlashFloodWarningInner');    

topleftmapbox.removeLayer('FloodWarningOuter');
topleftmapbox.removeLayer('FloodWarningInner');

topleftmapbox.removeLayer('SevereThunderstormWarningOuter');
topleftmapbox.removeLayer('SevereThunderstormWarningInner');

topleftmapbox.removeLayer('TornadoWarningOuter');
topleftmapbox.removeLayer('TornadoWarningInner');

// (Below should re-add the JSON layers, but it does nothing.)
//////////////////////////////////Add Flash Flood Warning 
topleftmapbox.addLayer({
'id': 'FlashFloodWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/FlashFloodWarning.json'
},
'paint': {
'line-color': 'rgba(51,118, 34, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'FlashFloodWarningInner',
'type': 'fill',
'source': {
'type': 'geojson',
'data': 'warnings/FlashFloodWarning.json'
},
'paint': {
'fill-color': 'rgba(72, 187 ,45, 0.2)',
'fill-outline-color': 'rgba(51,118, 34, 1)'
}
});  

//////////////////////////////////Add Flood Warning 

topleftmapbox.addLayer({
'id': 'FloodWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/FloodWarning.json'
},
'paint': {
'line-color': 'rgba(51,118, 34, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'FloodWarningInner',
'type': 'fill',
'source': {   
'type': 'geojson',
'data': 'warnings/FloodWarning.json'
},
'paint': {
'fill-color': 'rgba(72, 187 ,45, 0.2)',
'fill-outline-color': 'rgba(51,118, 34, 1)'
}
});

//////////////////////////////////Add Severe Thunderstorm Warning 


topleftmapbox.addLayer({
'id': 'SevereThunderstormWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/SevereThunderstormWarning.json'
},
'paint': {
'line-color': 'rgba(191,0, 0, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'SevereThunderstormWarningInner',
'type': 'fill',
'source': {  
'type': 'geojson',  
'data': 'warnings/SevereThunderstormWarning.json'
},
'paint': {
'fill-color': 'rgba(229, 23 ,23, 0.2)',
'fill-outline-color': 'rgba(238,0, 0, 1)'
}

});


//////////////////////////////////Add Tornado Warning 

topleftmapbox.addLayer({
'id': 'TornadoWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/TornadoWarning.json'
},
'paint': {
'line-color': 'rgba(256,90, 256, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'TornadoWarningInner', 
'type': 'fill',  
'source': { 
'type': 'geojson',
'data': 'warnings/TornadoWarning.json'
},
'paint': {
'fill-color': 'rgba(256, 90 ,256, 0.3)',
'fill-outline-color': 'rgba(200,60, 200, 1)'
}

});

}


} // end  refreshWARNINGS_A()

如果有更好或更简单的方法来刷新 JSON 多边形源，我也愿意接受。我是一个初学者，正在尽力而为。

Answer 1

很明显，有一个函数可以更新 JSON 源，并且不需要删除/添加层。以下是更新源代码的可接受且简单的方法。我的代码应该已经(并且可以)使用:

topleftmapbox.getSource('FlashFloodWarningInner').setData('warnings/FlashFloodWarning.json');