当前位置：首页 > article >正文

CZML 格式详解，javascript加载导出CZML文件示例

article 2026/4/24 4:57:55

在这里插入图片描述
示例地址：https://dajianshi.blog.csdn.net/article/details/145573994

CZML 格式详解

1. 什么是 CZML？

CZML（Cesium Zipped Markup Language）是一种基于 JSON 的文件格式，用于描述地理空间数据和时间动态场景。它专为 Cesium 平台设计，支持复杂的几何、属性和时间序列数据的表达。

2. CZML 文件结构

CZML 文件是一个 JSON 数组，其中每个元素称为一个“packet”（包）。每个 packet 包含一组属性，用于描述特定的对象或场景。

基本结构：

[{"id": "document", // 必须的根节点，标识整个 CZML 文件"version": "1.0"  // CZML 版本号},{"id": "object1",  // 对象的唯一标识符"position": {     // 定义对象的位置"cartesian": [0, 0, 0] // 使用笛卡尔坐标表示位置},"point": {        // 定义点的样式"pixelSize": 10 // 点的大小（像素）}}
]

JavaScript 加载 CZML 文件示例

1. 加载 CZML 文件

使用 Cesium 提供的 Cesium.CzmlDataSource 类来加载 CZML 文件。

代码示例：

// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 创建 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 文件示例

1. 创建 CZML 数据

可以通过 JavaScript 动态生成 CZML 数据。

代码示例：

// 创建一个 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);// 创建一个下载链接并触发下载
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 函数创建一个临时的下载链接，并触发浏览器下载 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 href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" 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() {// 创建 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');
}

总结

通过上述示例，您可以：

使用 Cesium 加载 CZML 文件并将其可视化。
动态生成 CZML 数据并通过浏览器导出为文件。

CZML 是一种灵活且强大的文件格式，适用于各种地理空间数据的可视化和分析任务。

CZML 格式详解，javascript加载导出CZML文件示例

示例地址：https://dajianshi.blog.csdn.net/article/details/145573994 CZML 格式详解 1. 什么是 CZML？ CZML（Cesium Zipped Markup Language）是一种基于 JSON 的文件格式，用于描述地理空间数据和时间动态场景。它专…...

编程日记 2026/4/13 14:29:13

安装并配置 MySQL

MySQL 是世界上最流行的开源关系型数据库管理系统之一，因其高性能、可靠性和易用性而被广泛应用于各种规模的企业级应用中。本文将详细介绍如何在不同的操作系统上安装和配置 MySQL，帮助你快速搭建起一个功能完善的数据库环境。选择适合你的安装方式 …...

编程日记 2025/8/8 6:20:29

OpenAI推出全新AI助手“Operator”：让人工智能帮你做事的新时代！

引言随着人工智能技术的不断发展，OpenAI 再次推出令人兴奋的功能——Operator，一个全新的 AI 助手平台。这不仅仅是一个普通的助手，它代表了人工智能技术的又一次飞跃，将改变我们工作和生活的方式。什么是“Operator”&#xff…...

编程日记 2026/4/18 3:11:15

TensorBoard和Wandb的介绍

TensorBoard 介绍 TensorBoard 是 TensorFlow 提供的一个可视化工具，主要用于帮助开发者监控和分析机器学习模型的训练过程。它的主要功能包括： 模型结构可视化：直观展示神经网络的结构。训练指标可视化：实时监控训练过程中的损…...

编程日记 2025/11/30 7:13:29

重看Spring聚焦BeanFactory分析

目录一、理解BeanFactory （一）功能性理解 （二）BeanFactory和它的子接口 （三）BeanFactory的实现类二、BeanFactory根接口 （一）源码展示和理解 （二）基…...

编程日记 2026/4/15 20:16:55

Python基础（上）

1. 基础语法 1.1 环境安装 Python版本: 推荐使用Python 3.6.6及以上开发工具: PyCharm 1.2 基本语法输出: print("Hello World") 注释: 单行注释: # 注释内容（快捷键 Ctrl/） 多行注释: 使用三引号注释内容注意：不推…...

编程日记 2025/6/29 19:06:11

将Docker容器打包成镜像提交

前言 Docker 是一个开源软件，也是一个开放平台，用于开发应用、交付（shipping）应用、运行应用。 Docker允许用户将基础设施（Infrastructure）中的应用单独分割出来，形成更小的颗粒（容…...

编程日记 2026/4/19 19:22:48

一文通俗理解为什么需要泛型以及泛型的使用

为什么需要泛型？ public static void main(String[] args) {ArrayList list new ArrayList();// 由于集合没有做任何限定，任何类型都可以给其中存放list.add("abc");list.add("def");list.add(5);Iterator it list.iterator();wh…...

编程日记 2026/4/20 12:24:25

人工智能时代下ai智能语音机器人如何以假乱真？

智能语音机器人若要达到以假乱真的效果，需要在以下几个关键方面不断提升： 一、语音合成技术音色模拟多维度采样对大量真人语音样本进行多维度采样，包括不同年龄、性别、地域的人的语音。例如，采集不同年龄段男性从低沉到清亮…...

编程日记 2025/9/8 2:24:38

Sam Altman 揭秘 OpenAI 未来蓝图：GPT-4.5、GPT-5 与模型规范重大更新

OpenAI CEO Sam Altman 近日在 X 平台（原 Twitter）上分享了关于 GPT-4.5 (代号 “Orion”) 和 GPT-5 的最新进展，同时公布了 OpenAI 模型规范（Model Spec）的重大更新，强调知识自由与模型行为准则。核心亮…...

编程日记 2026/4/21 8:56:40

老牌系统工具箱，现在还能打！

今天给大家分享一款超实用的电脑软硬件检测工具，虽然它是一款比较“资深”的软件，但依然非常好用，完全能满足我们的日常需求。电脑软硬件维护检测工具功能强大易用这款软件非常贴心，完全不需要安装，直接打开就能用…...

编程日记 2026/4/11 21:02:45

在vivado中对数据进行延时，时序对齐问题上的理清

在verilog的ISP处理流程中，在完成第一个模块的过程中，我经常感到困惑，到底是延时了多少个时钟？今日对这几个进行分类理解。目录 1.输入信号激励源描述 1.1将数据延时[9]个clk 1.2将vtdc与hzdc延时[9]个clk(等价于单bit的数据…...

编程日记 2026/4/11 23:15:01

Django REST Framework：如何获取序列化后的ID

Django REST Framework：如何获取序列化后的ID 😄 嗨，小伙伴们！今天我们来聊一聊Django REST Framework（简称DRF）中一个非常常见的操作：如何获取序列化后的ID。对于那些刚入门的朋友们&#xff…...

编程日记 2025/11/14 17:17:39

QT笔记——QPlainTextEdit

文章目录 1、概要2、文本设计2.1、设置文本2.1、字体样式（大小、下划线、加粗、斜体） 1、概要 QPlainTextEdit 是 Qt 框架中用于处理纯文本编辑的控件，具有轻量级和高效的特点，以下是它常见的应用场景： 文本编辑器&am…...

编程日记 2025/12/21 7:29:05

链表 —— 常用技巧与操作总结详解

引言链表作为一种动态数据结构，以其灵活的内存管理和高效的插入删除操作，在算法与工程实践中占据重要地位。然而，链表的指针操作复杂，容易引发内存泄漏和野指针问题。本文博主将从基础操作到高阶技巧，系统化解析链表的…...

编程日记 2026/4/22 23:46:31

Linux下学【MySQL】常用函数助你成为数据库大师~（配sql+实操图+案例巩固通俗易懂版~）

绪论每日激励：“唯有努力，才能进步” 绪论： 本章是MySQL中常见的函数，利用好函数能很大的帮助我们提高MySQL使用效率，也能很好处理一些情况，如字符串的拼接，字符串的获取，进制…...

编程日记 2026/4/21 19:48:45

【C++BFS 离散化】1036. 逃离大迷宫|2164

本文涉及知识点 CBFS算法 LeetCode1036. 逃离大迷宫在一个 106 x 106 的网格中，每个网格上方格的坐标为 (x, y) 。现在从源方格 source [sx, sy] 开始出发，意图赶往目标方格 target [tx, ty] 。数组 blocked 是封锁的方格列表，其中每个…...

编程日记 2025/12/17 6:49:42

[c语言日寄]在不完全递增序中查找特定要素

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2026/4/22 21:20:28

HtmlRAG：RAG系统中，HTML比纯文本效果更好

HtmlRAG 方法通过使用 HTML 而不是纯文本来增强 RAG 系统中的知识表示能力。通过 HTML 清洗和两步块树修剪方法，在保持关键信息的同时缩短了 HTML 文档的长度。这种方法优于现有基于纯文本的RAG的性能。方法其实主要看下围绕html提纯思路，将提纯后的…...

编程日记 2026/4/22 3:58:03

LeetCode题解：2690. 无穷方法对象，Proxy

Problem: 2690. 无穷方法对象思路这个问题的核心在于创建一个对象，该对象能够响应对其任何方法的调用，并返回调用的方法名称。为了实现这一点，我们可以利用 JavaScript 中的 Proxy 对象。Proxy 对象允许我们自定义对象的基本操作&#xff…...

编程日记 2025/11/23 18:52:06

在WPS中通过JavaScript宏（JSA）调用本地DeepSeek API优化文档教程

既然我们已经在本地部署了DeepSeek，肯定希望能够利用本地的模型对自己软件开发、办公文档进行优化使用，接下来就先在WPS中通过JavaScript宏（JSA）调用本地DeepSeek API优化文档的教程奉上。前提：（1）已经部署好了DeepSeek，可以看我的文章：个人windows电脑上安装DeepSe…...

编程日记 2026/4/21 23:13:11

2023-arXiv-CoT Prompt 思维链提示提升大型语言模型的推理能力

arXiv | https://arxiv.org/abs/2201.11903 摘要： 我们探讨了如何生成思维链（一系列中间推理步骤）显著提高大型语言模型执行复杂推理的能力。在三个大型语言模型上的实验表明，思维链提示提高了一系列算术、常识和符号推理任务的性…...

编程日记 2026/4/24 0:05:55

程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图＜10＞

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。今天我们继续来复习指针… 目录一、看一段代码二、一维数组传参的本质三、冒泡排序3.1 基本思想四、二…...

编程日记 2026/4/11 23:32:46

如何在MacOS上查看edge/chrome的扩展源码

步骤进入管理扩展页面点击详细信息复制对应id在命令行键入 open ~/Library/Application Support/Microsoft Edge/Default/Extensions/${你刚刚复制的id} 即可打开访达中对应的更目录注意由于原生命令行无法直接处理空格 ,所以需要加转义符\,即：open ~/Librar…...

编程日记 2025/6/15 3:56:20

C++病毒(^_^|)（2）

第二期声明： 仅供损害电脑，不得用于非法。损坏电脑，作者一律不负责。此作为作者原创，转载请经过同意。直接上代码 #include <bits/stdc.h> #include <windows.h> using namespace std; HHOOK g_hHook;void lrud(…...

编程日记 2025/12/2 4:58:50

导入数据 import matplotlib.pyplot as plt # 支持中文 plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 plt.rcParams[axes.unicode_minus] False # 用来正常显示负号import os,PIL,pathlib import numpy as npfrom tensorflow import keras from tensor…...

编程日记 2026/4/11 23:19:17

Java堆外内存的高效利用与性能优化

在Java开发中，堆外内存（Direct Memory）是除Java堆以外的内存区域。它允许Java程序直接分配和管理非堆内存，这为高性能的数据处理提供了可能。 1、什么是堆外内存？ 堆外内存，也称为直接内存（D…...

编程日记 2025/9/5 8:19:55

吉祥汽车泰国首发，用 Unity 实现行业首创全 3D 座舱虚拟世界

11 月 19 日，均瑶集团吉祥智驱（以下简称“吉祥汽车”）首款纯电动汽车 JY AIR 在泰国首发。延续吉祥航空在飞行体验上的优势，吉祥汽车对 JY AIR 赋予了将航空级服务标准延伸至地面的使命，为用户提供一站式大出行体验。此…...

编程日记 2026/4/20 14:13:08

【OpenCV】双目相机计算深度图和点云

双目相机计算深度图的基本原理是通过两台相机从不同角度拍摄同一场景，然后利用视差来计算物体的距离。本文的Python实现示例，使用OpenCV库来处理图像和计算深度图。 1、数据集介绍 Mobile stereo datasets由Pan Guanghan、Sun Tiansheng、Toby Weed和D…...

编程日记 2026/4/18 7:40:55

Uniapp 原生组件层级过高问题及解决方案

文章目录一、引言🏅二、问题描述📌三、问题原因❓四、解决方案💯4.1 使用 cover-view 和 cover-image4.2 使用 subNVue 子窗体4.3 动态隐藏原生组件4.4 使用 v-if 或 v-show 控制组件显示4.5 使用 position: fixed 布局五、总结&#x1f38…...

编程日记 2026/4/24 4:27:31

CZML 格式详解

1. 什么是 CZML？

2. CZML 文件结构

基本结构：

JavaScript 加载 CZML 文件示例

1. 加载 CZML 文件

代码示例：

说明：

JavaScript 导出 CZML 文件示例

1. 创建 CZML 数据

代码示例：

说明：

完整示例：加载和导出 CZML 文件

HTML 部分：

JavaScript 部分（app.js）：

总结

相关文章：