Load Multiple CZML Files

CesiumJS
1

It’s posible to load multiple czml files to the cesium viewer?

2

Yes it is. Just create as many CzmlDataSource objects as you have files.

3

I am facing the same issue: trying to display two CZML files, but only found that the second one always being wiped the first one, so only the last czml file got displayed. Below is my code. Did I missing something? Thanks.

            promise1 = Cesium.CzmlDataSource.load("./SampleData/sats.czml");
            promise1.then((czmlData) => {
                    m_czmlDataSource = czmlData;
                    viewer.dataSources.add(czmlData);
                    viewer.zoomTo(czmlData);
                }
            );
            promise2 = Cesium.CzmlDataSource.load("./SampleData/vehicle.czml");
            promise2.then((czmlData) => {
                    m_czmlDataSource = czmlData;
                    viewer.dataSources.add(czmlData);
                    viewer.zoomTo(czmlData);
                }
            );
4

Are the availability intervals the same for both files? If not, it could appear that only the last loaded file is being shown.

I’ve created two CZML files that don’t specify availability times and both are shown using the same code as you.

1 Like
5

Thank you @scottUFR for the answer! You answered my question!
The two files are un-related and have different availability window and intervals (one was for a time window on 2021-03-15, the other, 2012-08-04)

1 Like
6

@honglzhu I am happy to see that your question was resolved. Thank you @scottUFR! Please do not hesitate to reach out if you have any other questions.

7

After adding multiple CZML files, then I got an issue when trying to remove the added data sources. Below are some details:

  • The Cesium version I am using is 1.84.0.

  • When multiple datasources have been added, if I try to remove one of them using line below, the issue occurs:
    viewer.dataSources.remove(czml);

  • The datasources, i.e., czml files, have been added earlier via code:

      czmlDatasetPromise.then((czmlDataset) => {
                    viewer.dataSources.add(czmlDataset);
                     . . .
                });
  • Below is the error message on the Console:
CesiumWidget.js:724 An error occurred while rendering.  Rendering has stopped.
DeveloperError: This object was destroyed, i.e., destroy() was called.
Error
    at new DeveloperError (webpack:///../../../node_modules/cesium/Source/Core/DeveloperError.js?:44:11)
    at PolylineCollection.throwOnDestroyed (webpack:///../../../node_modules/cesium/Source/Core/destroyObject.js?:49:11)
    at PrimitiveCollection.update (webpack:///../../../node_modules/cesium/Source/Scene/PrimitiveCollection.js?:386:19)
    at PrimitiveCollection.update (webpack:///../../../node_modules/cesium/Source/Scene/PrimitiveCollection.js?:386:19)
    at PrimitiveCollection.update (webpack:///../../../node_modules/cesium/Source/Scene/PrimitiveCollection.js?:386:19)
    at updateAndRenderPrimitives (webpack:///../../../node_modules/cesium/Source/Scene/Scene.js?:3505:21)
    at executeCommandsInViewport (webpack:///../../../node_modules/cesium/Source/Scene/Scene.js?:3280:5)
    at Scene.updateAndExecuteCommands (webpack:///../../../node_modules/cesium/Source/Scene/Scene.js?:3023:5)
    at render (webpack:///../../../node_modules/cesium/Source/Scene/Scene.js?:3907:9)
    at tryAndCatchError (webpack:///../../../node_modules/cesium/Source/Scene/Scene.js?:3926:5)
8

I am unable to reproduce this. Here’s what I did to test.

var viewer = new Cesium.Viewer("cesiumContainer");

var m_czmlName1;
var m_czmlName2;

var m_czmlDataSources = new Map();

var czmlFile1 = '../../SampleData/AGI_HQ_Point.czml';
var czmlFile2 = '../../SampleData/AGI_COS_Point.czml';

var promise1 = Cesium.CzmlDataSource.load(czmlFile1);
promise1.then((czmlDataSource) => {
  m_czmlName1 = czmlDataSource.name;
  m_czmlDataSources.set(czmlDataSource.name, czmlDataSource);
  viewer.dataSources.add(m_czmlDataSources.get(czmlDataSource.name));
});

var promise2 = Cesium.CzmlDataSource.load(czmlFile2);
promise2.then((czmlDataSource) => {
  m_czmlName2 = czmlDataSource.name;
  m_czmlDataSources.set(czmlDataSource.name, czmlDataSource);
  viewer.dataSources.add(m_czmlDataSources.get(czmlDataSource.name));
});

setTimeout(function() {
  console.log(m_czmlDataSources.length);
  console.log(m_czmlDataSources.get(m_czmlName1));
  console.log(m_czmlDataSources.get(m_czmlName2));
  viewer.dataSources.remove(m_czmlDataSources.get(m_czmlName1));
}, 10000);

I hope this shows what you’re doing wrong. In the future please provide as much information as possible which ideally includes a Sandcastle example that replicates the problem.

Scott

2 Likes
9

Thank you Scott!
I did more tests by using more datasets. Then I realized only two datasets caused the issue when they both were added onto the viewer. Of the two datasets, one czml file was copied from the other czml file (then manually removed some features). I guess the root cause could be feature ID’s conflicts(?)
So I think this is a dataset issue, not Cesium API’s issue.
I appreciate your assistance and thank you again!

1 Like