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

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

news 2026/2/9 1:15:07

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/10/8 8:04:56

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...

编程新知 2026/2/8 11:51:37

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

编程新知 2025/9/26 20:18:15

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...

编程新知 2026/2/4 16:02:23