1. 概述

CZML是Cesium中用于描述动态图形场景的JSON格式,它们的关系类似于Google Earth与KML之间的关系,一般会认为KML是一种矢量格式,但KML或者CZML绝不是矢量格式那么简单,它可以描述线,点,广告牌,模型和其他图形图元,并指定其如何随时间变化。

CZML Point这个案例描述了如何通过CZML格式来描述一个点。

2. 案例

CZML是一种JSON格式,因此可以直接在程序中描述成对象字面量。具体实现代码如下:

'use strict';

var czml = [{
"id": "document",
"name": "CZML Point",
"version": "1.0"
}, {
"id": "point 1",
"name": "point",
"position": {
"cartographicDegrees": [-111.0, 40.0, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth": 4,
"pixelSize": 20
}
}]; var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

Cesium中直接定义了一个CzmlDataSource对象处理Czml,通过load函数返回了一个CzmlDataSource的Promise。然后将其加入到Viewer成员变量dataSources,它是一个DataSource数据源的集合DataSourceCollection。DataSourceCollection的add函数能够接受CzmlDataSource的Promise,也就是一旦CZML被正确读取,就会加载到视景器Viewer中。

这里的CZML定义也是比较直观的:

  1. 属性cartographicDegrees表示点的位置由经度、纬度以及高程来表示,且以度为单位;
  2. color表示点的颜色;
  3. outlineColor表示点的边框颜色;
  4. outlineWidth表示点的边框宽度;
  5. pixelSize表示点的像素大小。

3. 结果

最后的显示效果如下:

Cesium案例解析(十)——CZML点的更多相关文章

  1. Cesium案例解析(二)——ImageryLayers影像图层

    目录 1. 概述 2. 实例 2.1. ImageryLayers.html 2.2. ImageryLayers.js 2.2.1. 代码 2.2.2. 解析 3. 结果 1. 概述 Cesium支 ...

  2. Cesium案例解析(六)——3DTilesInspector监视器

    目录 1. 概述 2. 案例 1. 概述 3D Tiles作为传输和渲染大规模3D地理空间数据的格式,应对的都是大规模数据的场景,Cesium提供了一个监视3D Tiles数据的监视器,可以通过这个监 ...

  3. Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...

  4. Cesium案例解析(四)——3DModels模型加载

    目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络环境 ...

  5. Cesium案例解析(三)——Camera相机

    目录 1. 概述 2. 实例 2.1. Camera.html 2.2. Camera.js 2.2.1. 飞行至某一点 2.2.2. 飞行至某区域 2.2.3. 两地之间飞行 2.2.4. 设置视图 ...

  6. Cesium案例解析(一)——HelloWorld

    目录 1. 概述 2. 实例 2.1. HelloWorld.html 2.2. HelloWorld.js 3. 结果 1. 概述 感觉网上已经有不少关于cesium的教程了,但是学习一个框架最快的 ...

  7. Cesium 案例(九)示例中小程序集合(1)

    因为这几天在忙一些客观上无法逃脱的事,没有大块时间对中大型案例进行学习,所以对官方案例中的代码不超过40行的程序进行了学习.我把他们放在一到两个随笔中. 注:[所有案例中最前面务必加上] 1 Cesi ...

  8. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  9. SQL Server 连接问题案例解析(1)

    SQL Server 连接问题案例解析(1) 转载自:http://blogs.msdn.com/b/apgcdsd/archive/2015/04/27/sql.aspx?CommentPosted ...

  10. 【java设计模式】(6)---迭代器模式(案例解析)

    设计模式之迭代器模式 一.java迭代器介绍 1.迭代器接口 在jdk中,与迭代器相关的接口有两个:Iterator 与 Iterable. Iterator:迭代器,Iterator及其子类通常是迭 ...

随机推荐

  1. 安装k8s

    完成安装k8s集群以后,推荐使用https://github.com/512team/dhorse发布应用. 准备环境 准备两台服务器节点,如果需要安装虚拟机,可以参考<wmware和cento ...

  2. splay + 垃圾回收 知识点与例题的简要讲解

    splay 简要讲解 前置芝士:普通二叉树 splay tree是一个越处理越灵活的数据结构,通过splay(伸展)操作,使整棵树的单次查询时间复杂度接近于O(log n),整棵树的高度也接近于log ...

  3. ASP.NET Core+Vue3 实现SignalR通讯

    从ASP.NET Core 3.0版本开始,SignalR的Hub已经集成到了ASP.NET Core框架中.因此,在更高版本的ASP.NET Core中,不再需要单独引用Microsoft.AspN ...

  4. 【pwn】[SDCTF 2022]Horoscope--栈溢出,atoi函数绕过

    checksec检查一下,发现只开了nx,然后ida打开直接看主函数 发现fgets函数往s里面读入320个字节的数据,此处可造成溢出,再看看test和debug函数 void debug(){  t ...

  5. nodejs 实现MQTT协议的服务器端和客户端的双向交互

    一.项目背景 公司和第三方合作开发一个传感器项目,想要通过电脑或者手机去控制项目现场的传感器控制情况.现在的最大问题在于,现场的边缘终端设备接入的公网方式是无线接入,无法获取固定IP,所以常规的HTT ...

  6. 记一次有趣的hwclock写RTC的PermissionDenied错误

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明   无 前言   稍微接触过嵌入式板卡的,基本都知道嵌 ...

  7. 逻辑回归(Logistic Regression) ----转载

    概要: 1. 介绍Logistic Regression的数学模型,推导并详细解释求解最优回归系数的过程:2. Python实现Logistic Regression的基本版:3. 介绍sklearn ...

  8. HBuilderx 创建 、运行uniapp项目

    uni-app官网介绍的 通过 HBuilderX 可视化界面 跟着小颖来创建一个自己的小程序 创建小程序 依次点击HBuilderx 左上方的按钮:文件->新建->项目 然后打开该界面, ...

  9. 【uniapp】【外包杯】图片跳转到页面

    <navigator class="swiper-item":url="'/subpkg/goods_detail/goods_detail'">

  10. 通过.NET Core+Vue3 实现SignalR即时通讯功能

    .NET Core 和 Vue3 结合使用 SignalR 可以实现强大的实时通讯功能,允许实时双向通信.在这个示例中,我们将详细说明如何创建一个简单的聊天应用程序,演示如何使用 .NET Core ...