Question

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

但是，我尝试对JSON源执行相同的操作，并且在调用该函数进行刷新时-它会从地图上删除多边形，但不会将其重新添加回去。我应该有另一种方法吗？

找到该功能in this JS file。（到目前为止，它还没有太多。）

函数refreshWARNINGS_A（）是问题所在（粘贴在下面）。每个警告都有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');

Mapbox GL JS：刷新JSON多边形

1 个答案: