JavaScript實現(xiàn)加載導出CZML文件詳解

更新時間：2025年02月14日 09:57:36 作者：還是大劍師蘭特

CZML是一種基于?JSON?的文件格式,用于描述地理空間數據和時間動態(tài)場景,這篇文章為大家詳細介紹了如何使用JavaScript實現(xiàn)CZML文件的加載與導出,需要的可以了解下

CZML 格式詳解

1. 什么是 CZML

CZML（Cesium Zipped Markup Language）是一種基于 JSON 的文件格式，用于描述地理空間數據和時間動態(tài)場景。它專為 Cesium 平臺設計，支持復雜的幾何、屬性和時間序列數據的表達。

2. CZML 文件結構

CZML 文件是一個 JSON 數組，其中每個元素稱為一個“packet”（包）。每個 packet 包含一組屬性，用于描述特定的對象或場景。

基本結構：

[
  {
    "id": "document", // 必須的根節(jié)點，標識整個 CZML 文件
    "version": "1.0"  // CZML 版本號
  },
  {
    "id": "object1",  // 對象的唯一標識符
    "position": {     // 定義對象的位置
      "cartesian": [0, 0, 0] // 使用笛卡爾坐標表示位置
    },
    "point": {        // 定義點的樣式
      "pixelSize": 10 // 點的大小（像素）
    }
  }
]

JavaScript 加載 CZML 文件示例

加載 CZML 文件

使用 Cesium 提供的 Cesium.CzmlDataSource 類來加載 CZML 文件。

代碼示例：

// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 創(chuàng)建 CZML 數據源
var dataSourcePromise = Cesium.CzmlDataSource.load('path/to/your.czml');

// 將 CZML 數據添加到 Viewer 中
dataSourcePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    // 自動調整相機視角以聚焦于 CZML 數據
    viewer.zoomTo(dataSource);
}).catch(function(error) {
    console.log('Error loading CZML file: ' + error);
});

說明：

Cesium.CzmlDataSource.load 方法用于加載 CZML 文件。
viewer.dataSources.add 方法將 CZML 數據源添加到 Cesium 場景中。
viewer.zoomTo 方法自動調整相機視角以聚焦于加載的數據。

JavaScript 導出 CZML 文件示例

創(chuàng)建 CZML 數據

可以通過 JavaScript 動態(tài)生成 CZML 數據。

代碼示例：

// 創(chuàng)建一個 CZML 數據數組
var czml = [
    {
        "id": "document",
        "version": "1.0"
    },
    {
        "id": "point1",
        "name": "Example Point",
        "description": "This is an example point.",
        "position": {
            "cartesian": [0, 0, 0] // 地球中心點
        },
        "point": {
            "pixelSize": 10,
            "color": {
                "rgba": [255, 0, 0, 255] // 紅色
            }
        }
    }
];

// 將 CZML 數據轉換為 JSON 字符串
var czmlString = JSON.stringify(czml, null, 2);

// 創(chuàng)建一個下載鏈接并觸發(fā)下載
function downloadCZML(data, filename) {
    var blob = new Blob([data], { type: 'application/json' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
}

// 調用下載函數
downloadCZML(czmlString, 'example.czml');

說明：

czml 是一個包含 CZML 數據的數組。
JSON.stringify 方法將 CZML 數據轉換為 JSON 字符串。
downloadCZML 函數創(chuàng)建一個臨時的下載鏈接，并觸發(fā)瀏覽器下載 CZML 文件。

完整示例：加載和導出 CZML 文件

以下是一個完整的示例，展示如何加載和導出 CZML 文件。

HTML 部分：

<!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="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
    <link  rel="stylesheet">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <button onclick="exportCZML()">Export CZML</button>

    <script src="app.js"></script>
</body>
</html>

JavaScript 部分（app.js）：

// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 加載 CZML 文件
var dataSourcePromise = Cesium.CzmlDataSource.load('path/to/your.czml');
dataSourcePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);
}).catch(function(error) {
    console.log('Error loading CZML file: ' + error);
});

// 導出 CZML 文件
function exportCZML() {
    // 創(chuàng)建 CZML 數據
    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] // 綠色
                }
            }
        }
    ];

    // 將 CZML 數據轉換為 JSON 字符串
    var czmlString = JSON.stringify(czml, null, 2);

    // 下載 CZML 文件
    function downloadCZML(data, filename) {
        var blob = new Blob([data], { type: 'application/json' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        a.remove();
    }

    downloadCZML(czmlString, 'exported.czml');
}