The performance of the application was very low due to a heavy czml file. Therefore, it is split into 24 files and each file contains the czml data within 1 hour.
Those files are stored in a state ‘allCzml’ and are shown by Resium CzmlDataSource.
e.g allCzml = {
0000: [czml],
0100: [czml],
0200: [czml],
…
}
When I tick the timeline, if current hour (which means the data within that hour are showing on screen ) is different from the selected hour (new hour range ticked), the app loads the czml for that hour from allCzml.
For example, the current datetime is 10:05 and the 1000 czml dataset is loaded. If I tick the timeline as 12:30, the 1200 set is loaded. The code is shown as below
const updateCzml = (selectedDatetime) => {
if (currDatetime !== selectedDatetime) {
setCurrDatetime(selectedDatetime);
if (selectedDatetime in allCzml) {
setCzmlSource(allCzml[selectedDatetime]);
} else {
setCzmlSource([]);
}
setTimeout(() => {
currentScene.current.cesiumElement.requestRender();
}, 1);
}
};
My problems are:
- The czml data is first disappearing until the new set of czml is loaded. Since the time gap of the czml update is about 2-3 seconds, the screen shows nothing during this period. It is not ideal.
- I found that the current scene is not updated unless setTimeout is added.Is there any other method to ‘force’ the cesium to render again?
- Any method can trace the loading progress of czml file? At least I can show a progress bar in front end