Я разрабатываю веб-приложение с использованием Mapbox GL JS для отображения информации о погоде.Я написал функцию JS для обновления радиолокационных изображений в зависимости от того, соответствует ли временная метка текстового файла текущей, сохраненной приложением.Когда функция вызывается, она удаляет источник изображения и добавляет еще один с тем же идентификатором и, таким образом, обновляет изображение.Это хорошо работает.
Однако я попытался сделать то же самое с источником JSON, и когда функция вызывается для обновления - она удалит многоугольники с карты, но не добавит их обратно.Есть ли другой способ, которым я должен делать это?
Функция найдена в этом файле JS .(На данный момент ничего особенного.)
Функция refreshWARNINGS_A () - это то, где проблема (вставлена ниже).Для каждого предупреждения есть 2 полигона JSON (Flood, Flash Flood, Severe Thunderstorm и Tornado Warning), потому что есть цветной закрашенный слой и дублирующий слой для создания сплошной границы.(Существуют разные идентификаторы, поэтому ничто не должно мешать друг другу.)
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, я тоже открыт для этого.Я очень начинающий и стараюсь изо всех сил.