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

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

news 2025/10/8 21:31:35

在这里插入图片描述
示例地址：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');
}

总结

通过上述示例，您可以：

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

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

相关文章：

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

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

编程日记 2025/2/15 2:52:24

【gRPC-gateway】auth-通过拦截器从上下文中提取元数据用于认证，与从http header转发待认证数据到上下文进行验证，go案例

从grpc上下文中提取元数据用于认证 案例 interceptor.go package serverimport ("context""errors""google.golang.org/grpc""google.golang.org/grpc/metadata""strings" )// UnaryInterceptor 是一个 unary RPC 的拦截器…...

编程日记 2025/2/15 2:50:11

Sass基础知识以及常用知识整理

Sass基础知识以及常用知识整理 一、CSS 功能拓展 注意&#xff1a;>、 、和~的区分 1.1 嵌套规则 Sass 允许将一套 CSS 样式嵌套进另一套样式中&#xff0c;内层的样式将它外层的选择器作为父选择器&#xff0c;例如&#xff1a; #main p {color: #00ff00;width: 97%;…...

编程日记 2025/2/15 2:47:07

Redis 内存回收机制

Redis 是一个基于内存的键值存储系统&#xff0c;为了避免内存耗尽&#xff0c;Redis 提供了多种内存回收机制。以下是 Redis 内存回收的主要方式&#xff1a; 1. 过期键删除 Redis 支持为键设置过期时间&#xff0c;过期后会自动删除键以释放内存。 1.1 设置过期时间 SET key…...

编程日记 2025/2/15 2:45:01

docker安装mongo，导入、导出数据

1、docker安装mongo docker pull mongo docker run -d -p 27017:27017 --name mongodb mongodocker update mongodb --restartalways ## 开机自启动-d&#xff1a;表示以后台模式运行容器。 -p 27017:27017&#xff1a;将容器内部的 MongoDB 默认端口 27017 映射到宿主机的 27…...

编程日记 2025/2/15 2:42:57

Excel常用操作

Excel常用操作 学习资源 37_电子表格处理考点精讲_设置数据格式_哔哩哔哩_bilibili 快速输入数据与编辑数据 一个工作簿可以包含多个工作表 特殊数据的添加格式 输入负数, 例如-3、-5 常规输入, 直接输入-3、-5;使用(), 例如在单元格中输入(3)回车即可变为-3;上述括号不区分中…...

编程日记 2025/2/15 2:41:55

嵌入式EasyRTC实时通话支持海思hi3516cv610，编译器arm-v01c02-linux-musleabi-gcc

EasyRTC已经完美支持海思hi3516cv610&#xff0c;编译器arm-v01c02-linux-musleabi-gcc&#xff0c;总体SDK大小控制在680K以内&#xff08;预计还能压缩100K上下&#xff09;&#xff1a; EasyRTC在hi3516cv610芯片上能双向通话、发送文字以及二进制指令&#xff0c;总体运行…...

编程日记 2025/2/15 2:40:45

在freertos中，中断优先级和任务优先级之间的关系和使用方法

中断优先级和任务优先级如何匹配&#xff1f;任务优先级不同任务之间该用多高的优先级&#xff1f;中断优先级不同中断中该用多高的优先级&#xff1f;中断优先级和任务优先级设置时&#xff0c;怎样设置可以让任务在调度时屏蔽中断&#xff1f;怎样设置可以让任务在调度时&…...

编程日记 2025/2/15 2:35:38

设置ollama接口能外部访问

为了配置Ollama以允许外网访问&#xff0c;你可以按照以下步骤进行操作&#xff1a; ‌确认Ollama服务已正确安装并运行‌&#xff1a; 使用以下命令检查Ollama服务的状态&#xff1a; bash Copy Code systemctl status ollama如果服务未运行&#xff0c;使用以下命令启动它&…...

编程日记 2025/2/15 2:30:33

Go GUI 框架, energy many-browser 示例解读

CEF 在 Go 中的应用实现 示例链接 1. 初始化和配置 在使用 CEF 创建基于浏览器的应用时&#xff0c;首先需要初始化并配置应用实例。 1.1 创建应用实例 // 创建CEF应用实例 app : cef.NewApplication()1.2 配置应用参数 // 设置缓存路径 rootCache : filepath.Join(const…...

编程日记 2025/2/15 2:29:30

Docker 部署 MongoDB | 国内阿里镜像

一、简易单机版 1、镜像拉取 docker pull registry.cn-hangzhou.aliyuncs.com/farerboy/mongo:8.0.5-rc1 2、运行镜像 docker run -it --name mongodb \ -e MONGO_INITDB_ROOT_USERNAMEmongoroot \ -e MONGO_INITDB_ROOT_PASSWORDmongoroot \ -v /wwwroot/opt/docker/mong…...

编程日记 2025/2/15 2:27:23

软件工程-软件设计

包括 从管理的观点看包括&#xff1a; 详细设计 概要设计 从技术的观点看包括&#xff1a; 数据设计&#xff08;详细设计&#xff09; 系统结构设计&#xff08;概要设计&#xff09; 过程设计&#xff08;详细设计&#xff09; 任务 分析模型——》设计模型——》设…...

编程日记 2025/2/15 2:26:16

Elasticsearch：15 年来致力于索引一切，找到重要内容

作者&#xff1a;来自 Elastic Shay Banon 及 Philipp Krenn Elasticsearch 刚刚 15 岁了&#xff01;回顾过去 15 年的索引和搜索&#xff0c;并展望未来 15 年的相关内容。 Elasticsearch 刚刚成立 15 周年。一切始于 2010 年 2 月的一篇公告博客文章&#xff08;带有标志性的…...

编程日记 2025/2/15 2:24:10

DeepSeek大模型一键部署解决方案：全平台多机分布式推理与国产硬件优化异构计算私有部署

DeepSeek R1 走红后&#xff0c;私有部署需求也随之增长&#xff0c;各种私有部署教程层出不穷。大部分教程只是简单地使用 Ollama、LM Studio 单机运行量化蒸馏模型&#xff0c;无法满足复杂场景需求。一些操作配置也过于繁琐&#xff0c;有的需要手动下载并合并分片模型文件&…...

编程日记 2025/2/15 2:17:03

Docker 部署 MySQL-5.7 单机版

一、镜像获取 # docker hub 镜像 docker pull farerboy/mysql:5.7 # 国内阿里镜像 docker pull registry.cn-hangzhou.aliyuncs.com/farerboy/mysql:5.7 以上两个镜像二选一即可 二、运行容器 docker run -dti --name mysql \n --privileged \n --cgroupns private \n --e…...

编程日记 2025/2/15 2:16:00

打破AI黑盒，拥抱开源力量：基于openGauss+DeepSeek的本地知识库，打造你的专属AI助手！

引言&#xff1a;什么是RAG和LLM&#xff1f; LLM (Large Language Model&#xff0c;大语言模型): 就像 ChatGPT 这样的 AI 模型&#xff0c;拥有强大的语言理解和生成能力&#xff0c;但它们的知识局限于训练数据&#xff0c;且可能产生“幻觉”&#xff08;即生成不准确的信…...

编程日记 2025/2/15 2:14:56

java配置api,vue网页调用api从oracle数据库读取数据

一、主入口文件 1&#xff1a;java后端端口号 2&#xff1a;数据库类型 和 数据库所在服务器ip地址 3&#xff1a;服务器用户名和密码 二、映射数据库表中的数据 resources/mapper/.xml文件 1&#xff1a;column后变量名是数据库中存储的变量名 property的值是column值的…...

编程日记 2025/2/15 2:12:44

visual studio导入cmake项目后打开无法删除和回车

通过Cmakelists.txt导入的项目做删除和回车无法响应&#xff0c;需要点击项目&#xff0c;然后选择配置项目就可以了...

编程日记 2025/2/15 2:11:38

linux运行kettle 遇到问题汇总

1、把本地的repositories.xml 放在跟目录 2、配置机台名解析 vi /etc/hosts bogon是服务器名字&#xff0c;根据实际情况修改 3、指定内存和字符集 vi spoon.sh -Xms1024m -Xmx2048m -Dfile.encodingUTF-8 4、执行kettle job ./kitchen.sh /rep pg_kettle /user admin /pa…...

编程日记 2025/2/15 2:10:30

初识camel智能体（一）

同目录下配置环境变量.env&#xff0c;内容如下&#xff0c; apikey从魔搭社区获取 QWEN_API_KEY4ff3ac8f-aebc******** 先上干货代码&#xff0c;主代码如下&#xff1a; from colorama import Forefrom camel.societies import RolePlaying from camel.utils import prin…...

编程日记 2025/2/15 2:05:16

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/10/4 3:18:25

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/9/29 10:06:27

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/30 19:07:32

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/10/5 1:54:55

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/9/28 3:31:47

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/9/21 0:15:13

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/10/5 4:44:28

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/10/2 23:03:33

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46