javascriptjsoncesiumjsczml

Load czml/json data from file and store it into variable


I am using the Sandcastle interface offered by Cesium but my question can be extended (I guess) to any javascript user. My goal consists in loading a czml file (could also be a .json file) and store its content into a variable in order to access its tags simply.

Here there is a small example: let's suppose that the file (test.czml) content is the following:

[{
    "id" : "document",
    "name" : "Basic CZML billboard and label",
    "version" : "1.0"
}, {
    "id" : "Point A",
    "name" : "Point A",
    "label" : {
        "fillColor" : {
            "rgba" : [255, 255, 255, 255]
        },
        "font" : "12pt Lucida Console",
        "horizontalOrigin" : "LEFT",
        "pixelOffset" : {
            "cartesian2" : [8, 0]
        },
        "style" : "FILL",
        "text" : "Point A",
        "showBackground" : true,
        "backgroundColor" : {
            "rgba" : [112, 89, 57, 200]
        }
    },
    "position" : {
        "cartographicDegrees":[
            0, 0, 0
        ]
    }
}, {
    "id" : "Point B",
    "name" : "Point B",
    "label" : {
        "fillColor" : {
            "rgba" : [255, 255, 255, 255]
        },
        "font" : "12pt Lucida Console",
        "horizontalOrigin" : "LEFT",
        "pixelOffset" : {
            "cartesian2" : [8, 0]
        },
        "style" : "FILL",
        "text" : "Point B",
        "showBackground" : true,
        "backgroundColor" : {
            "rgba" : [112, 89, 57, 200]
        }
    },
    "position" : {
        "cartographicDegrees":[
            0, 10, 0
        ]
    }
}]

My ultimate goal would be to access the content in the following way:

var czml = function_to_load_data(test.czml)
console.log(czml[1].id)

I was able to load the data by using the following commands:

var czml = Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));

But this approach does not work as I want. What is a smart and elegant way to reach my goal?


Solution

  • Possible way I was able to achieve my solution in Cesium:

    var viewer = new Cesium.Viewer('cesiumContainer');
    
    Cesium.loadJson('../../SampleData/test.czml').then(function(jsonData) {
    
        console.log(jsonData[1].id);
    
    }).otherwise(function(error) {
        // an error occurred
    });