Mapbox GL JS：刷新 JSON 多边形答案

【问题标题】：Mapbox GL JS : Refreshing JSON polygonsMapbox GL JS：刷新 JSON 多边形
【发布时间】：2018-10-17 10:22:11
【问题描述】：

我正在使用 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 多边形源，我也愿意。我是一个初学者，并尽我所能。

【问题讨论】：

标签： javascript mapbox-gl-js

【解决方案1】：

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

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

【讨论】：