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

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

在这里插入图片描述
示例地址: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;用于描述地理空间数据和时间动态场景。它专…...

【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 的拦截器…...

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

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

Redis 内存回收机制

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

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…...

Excel常用操作

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

嵌入式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;总体运行…...

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

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

设置ollama接口能外部访问

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

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

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

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…...

软件工程-软件设计

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

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

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

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

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

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…...

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

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

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

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

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

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

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…...

初识camel智能体(一)

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

示波器有效位数(ENOB)实战指南:从原理到选型与应用

1. 从“看见”到“看清”&#xff1a;示波器有效位数&#xff08;ENOB&#xff09;的实战解读在电子工程师的日常里&#xff0c;示波器就是我们观察电路世界的“眼睛”。它能让我们直观地看到信号在连接器、线缆、PCB走线和元器件之间穿梭的模样。但就像视力有1.0和1.5的区别一…...

5分钟解决Windows热键冲突:Hotkey Detective完全指南

5分钟解决Windows热键冲突&#xff1a;Hotkey Detective完全指南 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否曾经…...

大跨度异型电动挡烟垂壁技术研发与工程应用研究

当前商业综合体、交通枢纽、会展场馆、大型厂房普遍采用大跨度、异形挑空设计&#xff0c;按消防规范需设置挡烟垂壁划分防烟分区&#xff0c;控制烟气蔓延。常规直线型、小跨度挡烟垂壁存在易变形、异型适配差、漏烟、运行不稳、验收难等问题&#xff0c;大跨度异型电动挡烟垂…...

输入流避坑全指南:从 Read() 编码溢出到 ReadLine() 缓冲区残留

1. 灵异事件&#xff1a;为什么我的循环跑了 52 次&#xff1f; 在编写基础逻辑题时&#xff0c;我曾遇到一个极其诡异的Bug&#xff1a;要求用户输入边长nnn打印正方形&#xff0c;我输入4&#xff0c;结果程序打印了 52行符号。 问题代码&#xff1a; int n Console.Read();…...

从示波器到数据记录仪:基于STM32H7+AD7606+J-Scope的实时波形采集系统搭建全流程

基于STM32H7与AD7606的高性能数据采集系统设计与实战 1. 系统架构设计理念 现代工业监测和实验室数据采集对信号采集系统提出了更高要求——需要同步捕获多通道模拟信号&#xff0c;并实现实时可视化分析。基于STM32H7高性能微控制器与AD7606 ADC模块的组合&#xff0c;配合J-S…...

PIC16F84A实现多功能逻辑分析仪与频率计数器设计

1. 项目概述在嵌入式系统开发中&#xff0c;逻辑分析仪和频率计数器是硬件调试的两大核心工具。传统商用设备往往价格昂贵且功能单一&#xff0c;而基于PIC16F84A微控制器的设计方案&#xff08;如Microchip AN689应用笔记&#xff09;提供了一种高性价比的替代方案。这个多功能…...

LLM应用可观测性实战:基于OpenTelemetry与OpenLLMetry的监控方案

1. 项目概述&#xff1a;当LLM应用遇见可观测性如果你正在开发或维护一个基于大语言模型的应用&#xff0c;那么下面这个场景你一定不陌生&#xff1a;用户反馈说“AI助手刚才的回答很奇怪”&#xff0c;或者“昨天还能正常调用的功能今天突然报错了”。你打开日志&#xff0c;…...

揭秘2026奇点大会“暗箱测试”结果:在10亿级多模态向量+实时增量更新场景下,仅2款数据库达成<15ms P99延迟

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生向量数据库选型&#xff1a;2026奇点智能技术大会技术对比 在2026奇点智能技术大会上&#xff0c;主流AI原生向量数据库的架构演进已突破传统嵌入存储范式&#xff0c;转向支持动态推理索引、多…...

ThinkPad风扇控制终极指南:TPFanCtrl2实现128级精准调速与双风扇独立管理

ThinkPad风扇控制终极指南&#xff1a;TPFanCtrl2实现128级精准调速与双风扇独立管理 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 TPFanCtrl2是一款专为ThinkPad笔记…...

XGBoost交叉验证超简单

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 XGBoost交叉验证&#xff1a;三步法&#xff0c;让模型评估变得如此简单目录XGBoost交叉验证&#xff1a;三步法&#xff0c;让模…...