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

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

news 2025/12/4 1:02:34

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

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/11/21 9:40:29

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

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

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

编程新知 2025/12/2 2:31:15

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/11/29 9:01:33

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/12/1 22:34:54

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/11/28 19:03:48

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17