Cesium.js综合实验

Cesium.js综合实验

1 概述

Cesium是一个跨平台、跨浏览器的展示三维地球和地图的开源 JavaScript 库,是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库,Cesium一词来源于化学元素铯,铯是制造原子钟的关键元素,研发小组通过命名强调Cesium产品精益求精,专注时间数据可视化。Cesium为三维GIS提供了一个高效的数据可视化平台。即[1]:

(1)Cesium是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript

(2)Cesium使用WebGL来进行硬件加速图形,使用时不需要任何插件支持。

(3)Cesium是基于Apache2.0许可的开源程序,可以免费用于商业和非商业用途。

img

Cesium的知识体系,跨GIS、Web前端和图形学。Cesium的简单结构如下图所示:

请添加图片描述

2 实验工具及技术原理

Cesium用于地理数据可视化。支持海量数据的高效渲染,支持时间序列动态数据的三维可视化,具备太阳、大气、云雾等地理环境要素的动态模拟和地形等要素的加载绘制。包含丰富的可用工具。即Cesium基本控件所提供的工具,如地理编码器,图层选择器等[2]。

Cesium在项目中的定位如下图:

img

主要的功能有:

(1)使用3d tiles格式流式加载各种不同的3d数据,包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部,点云数据。并支持样式配置和用户交互操作。

(2)全球高精度地形数据可视化,支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。

(3)支持多种资源的图像图层,包括WMS,TMS,WMTS以及时序图像。图像支持透明度叠加、亮度、对比度、GAMMA、色调、饱和度都可以动态调整。支持图像的卷帘对比。

(4)支持标准的矢量格式KML、GeoJSON、TopoJSON、以及矢量的贴地效果。

(5)三维模型支持gltf2.0标准的PRB材质、动画、蒙皮和变形效果。贴地以及高亮效果。

(6)使用CZML支持动态时序数据的展示。

(7)支持各种几何体:点、线、面、标注、公告牌、立方体、球体、椭圆体、圆柱体、走廊、管径、墙体。

(8)可视化效果包括:基于太阳位置的阴影、自身阴影、柔和阴影。

(9)支持大气、雾、太阳、阳光、月亮、星星、水面。

(10)粒子特效:烟、火、火花。

(11)地形、模型、3d tiles模型的面裁剪。

(12)对象点选和地形点选。

(13)支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、地形碰撞检测。

(14)支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正视两种投影方式。

(15)支持点、标注、公告牌的聚集效果[3]。

Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,V8引擎执行Javascript的速度非常快,性能非常好,基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。

img

3 实验过程与结果

3.1 实验条件

Cesium官方文件包,node.js服务器,Notepad++文档编写查看器,电脑,chorm浏览器

3.2 实验过程

编写HTML文档,如图所示为Cesium对页面的一些基本设置,可以选择添加或者不添加一些页面控件。

img

如下图所示为相机的初始位置及方位的设置

img

如图所示为定义一个飞机对象并加载相应的glb飞机模型,并设置飞机初始位置。

img

如下图所示为添加键盘监听事件,可以通过键盘来交互控制飞机加速、减速、左转、右转、上升、下降、左旋、右旋等。

img

如下图所示为监听到键盘交互事件之后对当前飞机的位置及姿态进行一帧一帧更新渲染。

img

如下图所示,将编写完成的html文档放到cesium文件夹目录下,打开电脑按win+R并输入cmd,之后cd进入该文件夹,输入命令npm start启动服务器,最后在chorm浏览器输入http://localhost:8080/即可。

img

3.3 实验结果与分析

如下图所示为最终呈现的页面,可见一飞机在地球上方飞,并可以看到地球部分地形。

img

如图所示为键盘控制飞机左转。

img

如图所示为键盘控制飞机右转。

img

如图所示为键盘控制飞机上升。

img

如图所示为键盘控制飞机下降。

img

如图所示为键盘控制飞机右旋。

img

如图所示为键盘控制飞机左旋

img

如图所示,可见飞机有一飞行的尾迹。

img

如图所示为地球的不同图层显示

img

如图所示为地球的不同图层显示

img

如图所示为地球的不同图层显示

img

如图所示为地球的不同图层显示

img

如图所示为地球的不同图层显示

img

如图所示为该项目监听到的键盘交互事件。

img

如图所示的键盘监听事件,可见飞机先后经历了左转、右转、上升、下降、右旋、左旋、加速、减速。

img

4 总结

(1)编写的HTML文档要放在cesium文件目录下,不然启动不了。

(2)学习并了解了HTML的文档结构,JavaScript的原理和基本编程。

(3)学习运用浏览器chorm的高级功能查看后台的一些数据交互。

(4)学习cesium的基本原理及使用。

参考文献

[1]郑文浩, 冯杭建, 游省易. 基于Cesium地图引擎的三维地貌景观科普展示平台研发——以神仙居国家地质公园为例[J]. 科技通报, 2021(7):5.

[2] Goesten M G , Rahm M , Bickelhaupt M , et al. Cesium’s Off-the-Map Valence Orbital[J]. Angewandte Chemie International Edition, 2017, 56(33).

[3]李娜, 赵宇虹, 钱建国. 基于Cesium平台的导航服务[J]. 测绘与空间地理信息, 2020(012):043.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/289361.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为OD机试 - 考古问题 - 回溯、全排列问题(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷C卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测试…

如何在Linux系统使用Docker本地部署Halo网站并实现无公网IP远程访问

最近,我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念,而且内容风趣幽默。我觉得它对大家可能会有所帮助,所以我在此分享。点击这里跳转到网站。 文章目录 1. Docker部署Halo1.1 检查Docker版本如果未安装Docker可…

最小化安装Kubesphere报错问题解决方法

最小化安装Kubesphere报错: TASK [preinstall : Stop if defaultStorageClass was not found] ****************** fatal: [localhost]: FAILED! > {"assertion": "\"(default)\" in default_storage_class_check.stdout", "changed&qu…

【王道训练营】第一题 输出 hello wangdao

文章目录 代码如下所示&#xff1a;C语言基础&#xff1a;理解基本概念和语法结构示例程序代码解析1. #include <stdio.h>2. int main()3. printf("hello wangdao");4. return 0; 更多的例子1. 使用 printf 函数打印多种不同类型的值&#xff1a;2. 使用 scanf…

在Windows系统上安装多个 Nodejs

前言 在Windows系统安装Nodejs 在Windows系统上安装多个 Nodejs v14.16.1安装位置 D:\sde\nodejs\node-v14.16.1-win-x64 v16.20.2安装位置 D:\sde\nodejs\node-v16.20.2-win-x64 v18.20.0安装位置 D:\sde\nodejs\node-v18.20.0-win-x64 v20.12.0安装位置 D:\sde\nod…

提取html工具封装和应用

提取html工具封装和应用 BeautifulSoup库和介绍BeautifulSoup使用BeautifulSoup重点方法BeautifulSoup其他方法 认证参数化实现创建json文件导包&#xff08;参数化&#xff09;编写测试用例技术难点--判断验证码不同 BeautifulSoup库和介绍 BeautifulSoup使用 1、导包 2、实例…

【Vue3之computed属性(四)】

文章目录 前言一、computed属性有缓存二、使用方法三、修改全名 前言 理解computed属性&#xff0c;实现输入姓和名得出全名并双向绑定&#xff0c;区分单向绑定和双向绑定。测试computed属性和方法的区别 一、computed属性有缓存 先引入computed&#xff0c;写箭头函数定义并…

14.黑盒测试

黑盒测试、白盒测试考题固定&#xff0c;重视&#xff01;&#xff01;&#xff01; 等价类、边界值、场景法&#xff1b;考察频率高&#xff01;&#xff01;&#xff01; 因果图&#xff0c;偶尔考&#xff1b;要能看懂因果图&#xff0c;结合题干填写缺失的部分内容&#x…

Jmeter使用BeanShell保存数据到文件

1、目的 在使用jmeter压测时&#xff0c;业务上下连贯&#xff0c;需要对一些编号进行关联操作。这里使用‘JSON提取器’将值提取出来&#xff0c;后面请求可以直接使用。其它业务想要使用就只能把值保存到文件&#xff0c;再使用文件做参数化了。 2、JSON提取器 提取请求值 提…

鸿蒙hdc使用指导

简介 hdc&#xff08;HarmonyOS Device Connector&#xff09;是HarmonyOS为开发人员提供的用于调试的命令行工具&#xff0c;通过该工具可以在windows/linux/mac系统上与真实设备或者模拟器进行交互。 环境准备 hdc工具通过HarmonyOS SDK获取&#xff0c;存放于SDK的toolch…

yarn安装包时报错error Error: certificate has expired

安装教程&#xff1a; 配置镜像地址&#xff1a; npm config set registry https://registry.npmmirror.com清除缓存: yarn cache clean//镜像&#xff1a;https://developer.aliyun.com/mirror/NPM 安装yarn&#xff1a; npm install --global yarn查看版本&#xff1a; …

深入解析Mybatis-Plus框架:简化Java持久层开发(十四)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节介绍下Mybatis-Plus框架的通用枚举功能。 &#x1f4d6; 正文 1 通用枚举的介绍 通过Mybatis-Plus框架提供的通用枚举功能&#xff0c;枚举可以重复…

jvm底层

逐步细化 静态链接&#xff1a;静态方法(符号引用)替换为内存指针或者句柄直接引用) 动态链接&#xff1a;程序期间将符号引用替换为直接引用 对象头&#xff1a; 指针压缩&#xff1a; -XX:UseCompressedOops 开启指针压缩 减少内存消耗&#xff1b;大指针在主内存 缓存间移…

2024年天津财经大学珠江学院退役大学生士兵专升本专业课缴费流程

天津财经大学珠江学院2024年天津高职升本科&#xff08;面向退役大学生士兵&#xff09;职业技能综合考查专业课考试报名缴费流程

PostgreSQL关系型数据库介绍与部署

使用背景 在过去的几年中&#xff0c;PostgreSQL的使用量逐渐增加&#xff0c;而Oracle和MySQL的使用量则有所下降。这主要是由于以下几个原因&#xff1a;开源和免费、功能丰富、可扩展性强、安全性高、跨平台支持好、社区活跃、成熟稳定。这些因素使得PostgreSQL成为了许多开…

redis和redisson实现分布式锁

redis和redisson实现分布式锁 基于setnx命令的分布式锁基于set命令的分布式锁redission看门狗分布式锁 基于setnx命令的分布式锁 1. 加锁 使用 Redis 实现分布式锁&#xff0c;最直接的想法是利用 setnx 和 expire 命令实现加锁。 在 Redis 中&#xff0c;setnx 是「set if …

【Java - 框架 - Lombok】(1) 普通Java项目通过Lombok+Logback完成日志的创建使用 - 快速上手

普通Java项目通过"Lombok""Logback"完成日志的创建使用 - 快速上手&#xff1b; 步骤A 说明 创建"Maven"项目&#xff1b; 图片 步骤B 说明 添加相关依赖项&#xff1b; 图片 代码 <!-- "Lombok"依赖项--> <dependency>&…

处理登录失效后提示多个错误

问题: 我的场景是后端规定&#xff0c;即使登录失效返回的code仍是200&#xff0c;然后data的code是999什么的&#xff1b; 原本代码&#xff1a; 修改版代码&#xff1a; 通过节 const NotLoginEvent () > {router.replace("/login");localStorage.clear();M…

WorkPlus AI助理实现私有化AI智能客服,助力企业满足客户需求

私有化AI智能客服的出现&#xff0c;以其卓越的性能和全面的功能&#xff0c;助力企业提升客户服务体验。WorkPlus AI助理作为一款领先的解决方案&#xff0c;可实现企业的私有化AI智能客服&#xff0c;提升客户服务的质量和效率。 私有化AI智能客服的价值和意义不言而喻。通过…

计算机网络:传输控制协议(Transmission Control Protocol-TCP协议

计算机网络&#xff1a;传输控制协议&#xff08;Transmission Control Protocol-TCP协议&#xff09; 本文目的前置知识点TCP协议简介主要特性通信流程1. 建立连接的过程(三次握手&#xff0c;243)1.1 为什么要三次握手&#xff0c;两次不行吗&#xff1f; 2. 释放连接的过程(…