Detailed explanation of JavaScript implementation loading and exporting CZML files

Detailed explanation of CZML format

1. What is CZML

CZML (Cesium Zipped Markup Language) is a JSON-based file format used to describe geospatial data and temporal dynamic scenarios. It is designed for the Cesium platform and supports the expression of complex geometric, attribute and time series data.

2. CZML file structure

A CZML file is a JSON array where each element is called a "packet" (packet). Each packet contains a set of properties that describe a specific object or scene.

Basic structure:

[
  {
    "id": "document", // The required root node identifies the entire CZML file    "version": "1.0"  // CZML version number  },
  {
    "id": "object1",  // Unique identifier of the object    "position": {     // Define the location of the object      "cartesian": [0, 0, 0] // Use Cartesian coordinates to represent position    },
    "point": {        // Define the style of the point      "pixelSize": 10 // The size of the dot (pixels)    }
  }
]

JavaScript loading CZML file example

Loading CZML files

Use the class provided by Cesium to load CZML files.

Code example:

// Initialize Cesium Viewervar viewer = new ('cesiumContainer');

// Create CZML data sourcevar dataSourcePromise = ('path/to/');

// Add CZML data to Viewer(function(dataSource) {
    (dataSource);
    // Automatically adjust the camera viewing angle to focus on CZML data    (dataSource);
}).catch(function(error) {
    ('Error loading CZML file: ' + error);
});

illustrate:

Methods are used to load CZML files.
Method Add a CZML data source to the Cesium scenario.
Method automatically adjusts the camera viewing angle to focus on the loaded data.

JavaScript export CZML file example

Create CZML data

CZML data can be generated dynamically through JavaScript.

Code example:

// Create a CZML data arrayvar czml = [
    {
        "id": "document",
        "version": "1.0"
    },
    {
        "id": "point1",
        "name": "Example Point",
        "description": "This is an example point.",
        "position": {
            "cartesian": [0, 0, 0] // Center point of the earth        },
        "point": {
            "pixelSize": 10,
            "color": {
                "rgba": [255, 0, 0, 255] // red            }
        }
    }
];

// Convert CZML data to JSON stringvar czmlString = (czml, null, 2);

// Create a download link and trigger the downloadfunction downloadCZML(data, filename) {
    var blob = new Blob([data], { type: 'application/json' });
    var url = (blob);
    var a = ('a');
     = url;
     = filename;
    (a);
    ();
    ();
}

// Call the download functiondownloadCZML(czmlString, '');

illustrate:

czml is an array containing CZML data.
Method converts CZML data to JSON string.
The downloadCZML function creates a temporary download link and triggers the browser to download the CZML file.

Complete example: Loading and exporting CZML files

Here is a complete example showing how to load and export a CZML file.

HTML section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium CZML Example</title>
    <script src="/downloads/cesiumjs/releases/1.94/Build/Cesium/"></script>
    <link href="/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/" rel="stylesheet">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div ></div>
    <button onclick="exportCZML()">Export CZML</button>

    <script src=""></script>
</body>
</html>

JavaScript part ():

// Initialize Cesium Viewervar viewer = new ('cesiumContainer');

// Load CZML filevar dataSourcePromise = ('path/to/');
(function(dataSource) {
    (dataSource);
    (dataSource);
}).catch(function(error) {
    ('Error loading CZML file: ' + error);
});

// Export CZML filesfunction exportCZML() {
    // Create CZML data    var czml = [
        {
            "id": "document",
            "version": "1.0"
        },
        {
            "id": "point1",
            "name": "Exported Point",
            "description": "This point was exported from the application.",
            "position": {
                "cartesian": [0, 0, 0]
            },
            "point": {
                "pixelSize": 10,
                "color": {
                    "rgba": [0, 255, 0, 255] // green                }
            }
        }
    ];

    // Convert CZML data to JSON string    var czmlString = (czml, null, 2);

    // Download CZML file    function downloadCZML(data, filename) {
        var blob = new Blob([data], { type: 'application/json' });
        var url = (blob);
        var a = ('a');
         = url;
         = filename;
        (a);
        ();
        ();
    }

    downloadCZML(czmlString, '');
}

Summarize

With the above example, you can:

Use Cesium to load and visualize CZML files.

Dynamically generate CZML data and export it as a file through the browser.

CZML is a flexible and powerful file format suitable for visualization and analysis tasks of a variety of geospatial data.

The above is the detailed explanation of JavaScript loading and exporting CZML files. For more information about JavaScript loading and exporting files, please pay attention to my other related articles!