Cesium入门之二:引用Cesium并创建第一个三维地球

news2024/10/5 22:23:30

这一节我们来引入Cesium并创建第一个三维地图程序

Cesium的引入

1、新建一个文件夹,命名为first_cesium,在该文件夹下新建一个Build文件夹,将上一节我们下载的Cesium文件夹下Build文件夹---->Cesium文件夹下的文件全部拷贝到first_cesium---->Build文件夹。
2、VSCode打开first_cesium文件夹,并在根目录下新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> 
</head>
<body> 
</body>
</html>

3、引入Cesium.js和Cesium的样式文件
在html的head部分添加script标签,引入Build下的Cesium.js文件
<script src="./Build/Cesium.js"></script>
新建style标签,引入Build—>Widgets—>widgets.css文件

 <style>
    @import url(./Build/Widgets/widgets.css);
  </style>

创建第一个三维地球

1、在html的body标签中新建一个id为cesiumContainer的div,作为Cesium的容器
<div id="cesiumContainer"></div>
2、实例化一个Cesium的Viewer对象
在div下新建script标签,通过new Cesium.Viewer()实例化一个view对象,
const view = new Cesium.Viewer("cesiumContainer")
上述代码完成后,鼠标右键----> Open with Live Server,运行代码,可以看到,我们已经在浏览器里运行了一个三维地球
在这里插入图片描述
new Cesium.Viewer(container, options):
在上面我们通过使用new Cesium.Viewer()实例化了一个view对象,Cesium.Viewe包含两个参数:
第一个参数为字符串格式,它代表Cesium需要挂载的容器,这里我们指向我们前面创建的id为cesiumContainer的div;
第二个参数为可选参数,Object格式,用来描述初始化对象时的选项参数
3、创建好的三维地球默认提供了很多微件,如下图所示
在这里插入图片描述
这些小部件模式是显示的状态,我们可以在代码中设置不使用的,具体如何设置,我们下节再聊,这节就先说道这里,喜欢的小伙伴关注点赞收藏哦!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于阿里云的图像搜索的创建和使用

大家好哇&#xff0c;我又来了&#xff0c;这次我们来聊下关于阿里云的图像搜索功能的创建和使用。 https://free.aliyun.com/?crowdpersonal 1、我们可以通过上面的链接进入到阿里云云产品免费试用页面&#xff0c;这里主要是阿里云为新手用户提供的免费体验的权益&#xff…

Cesium入门之一:Cesium本地运行

Cesium简介 Cesium是一个开源的、面向三维地球和地图的JavaScript库&#xff0c;它是基于Apache2.0许可的开源程序&#xff0c;可以免费的用于商业用途&#xff1b; Cesium下载 Cesium的官网地址是&#xff1a;https://cesium.com/platform/cesiumjs/&#xff0c;由于Cesium…

ChatGPT 提示语——AI提示词玩家,提示词就是和AI沟通语言的桥梁!

前言&#xff1a; 众所周知&#xff0c;在AI的世界里&#xff0c;提示词就是和AI沟通语言的桥梁&#xff0c;提示关键词常用于AI对话及AI绘画等相关场景&#xff0c;通过准确的使用关键词&#xff0c;你就能更好的让AI辅助自己的工作&#xff0c;其中的成分重要性不言而喻&…

MySQL---基本操作DQL(上)(基本查询语法,算术运算符,比较运算符,逻辑运算符,位运算符)

1. 基本查询语法 select [all|distinct] <目标列的表达式1> [别名], <目标列的表达式2> [别名]... from <表名或视图名> [别名],<表名或视图名> [别名]... [where<条件表达式>] [group by <列名> [having <条件表达式>]] [o…

JAVA学习日记 (放假了,哈哈)

每日一题 1016. 子串能表示从 1 到 N 数字的二进制串 难度中等122收藏分享切换为英文接收动态反馈 给定一个二进制字符串 s 和一个正整数 n&#xff0c;如果对于 [1, n] 范围内的每个整数&#xff0c;其二进制表示都是 s 的 子字符串 &#xff0c;就返回 true&#xff0c;否…

时间轮的golang实践浅析

引言 下列代码模仿一段RPC请求的执行过程&#xff0c;执行后会有哪些问题&#xff1a; RPC代码示例答案&#xff1a;因为超时控制后未阻断后续请求&#xff0c;导致并发读写产生Panic思考&#xff1a;客户端发起 HTTP 请求后&#xff0c;如果在指定时间内没有收到服务器的响应…

软件开发安全

软件开发安全 软件安全开发生命周期软件生命周期模型软件生命周期模型-瀑布模型软件生命周期模型-迭代模型软件生命周期模型-增量模型软件生命周期模型-快速原型模型软件生命周期模型-螺旋模型软件生命周期模型-净室模型软件安全重要性–软件危机 软件安全问题产生-内因软件安全…

51单片机(十一)DS1302实时时钟

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

2023年软考系统架构师新版专栏导读

目录 新的改变软考是不是内卷?老版教材删减章节建议学习计划专栏更文列表新的改变 软考今年改版啦 高级系统架构师考试在2022年12月底出了第二版教材,比第二版多出来140页,虽然看起来好像更难了,但是我认为改版是件好事,摒弃了一些过时的淘汰的技术,更新了一些新知识点,…

二叉树OJ

文章目录 二叉树OJ根据二叉树创建字符串思路示例代码 二叉树的层序遍历思路示例代码 二叉树的层序遍历 II思路示例代码 二叉树的最近公共祖先思路1示例代码1思路2示例代码2 二叉搜索树与双向链表思路1示例代码1思路2示例代码2 迭代实现二叉树的三种遍历前序遍历思路示例代码 中…

从零开始:如何成为一名优秀的品牌策划师

作为一个十年老策划&#xff0c;告诉你我们公司&#xff08;一个比较牛的品牌策划公司&#xff09;当年是怎么培养新人的吧。 1、看书 你必须要看六本书&#xff0c;他们是&#xff1a;特劳特的《定位理论》、《营销4.0》、《品牌王道》、《商战》、《竞争优势》&#xff0c;…

一图看懂 multidict 模块:类似于字典的键值对集合,键可以多次出现,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 multidict 模块&#xff1a;类似于字典的键值对集合&#xff0c;键可以多次出现&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模…

数据库sql语句(count(*)和count(字段))

例题&#xff1a; 创建如下两张表 分别命名为books和persons &#xff08;1&#xff09;按照书名&#xff0c;姓名的顺序列出字里包含‘德’字的人物的姓名&#xff0c;书名和字。 select name 姓名,bookname 书名,style 字 from books,persons where style like %德% and bo…

SpringBoot配置文件相关

SpringBoot配置文件内容分为两类: 1.Spring自带的配置,比如server.port(这玩意就自己躺在application.properties里) 2.自定义的配置 配置文件的格式分为两种 1.properties格式 2.yml格式 properties和yml的区别 1.通用性 properties是SpringBoot项目默认的配置文件!他已经很老…

Baumer工业相机堡盟工业相机软件CameraExplorer常见功能使用说明

Baumer工业相机堡盟工业相机软件CameraExplorer常见功能使用说明 Baumer工业相机Baumer工业相机图像采集功能Baumer工业相机图像基本参数设置 Baumer工业相机 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计…

诺亚财富财报不及预期,收入大幅下滑27.8%,股价也已下跌26%

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 诺亚财富2022财年业绩和管理层评论 在此前于2023年3月下旬举行的2022年第四季度财报会议上&#xff0c;诺亚财富(NOAH)强调&#xff0c;“我们希望将2022年的痛苦转化为2023年的收获。”虽然诺亚财富在财报会议上没有提供2…

三子棋的实现【C语言】

完成一个三子棋游戏的实现包括三部分 test.c 测试游戏 game.c 实现游戏 game.h 声明游戏 菜单 首先我们完成游戏的菜单部分 游戏部分 完成三子棋我们需要完成棋盘的创建&#xff0c;玩家下棋&#xff0c;电脑下棋&#xff0c;判断胜负&#xff0c;以及将棋盘展现给玩家&a…

WebApi安全性 使用TOKEN+签名验证

&#xff08;2&#xff09;在请求头中添加timespan&#xff08;时间戳&#xff09;&#xff0c;nonce&#xff08;随机数&#xff09;&#xff0c;staffId&#xff08;用户Id&#xff09;&#xff0c;signature&#xff08;签名参数&#xff09;    //加入头信息request.Hea…

shell中函数的应用(题型列举)

1、编写函数&#xff0c;实现打印绿色OK和红色FAILED 判断是否有参数&#xff0c;存在为Ok&#xff0c;不存在为FAILED 第一步&#xff1a;进入脚本文件进行编辑 第二步&#xff1a;编辑函数脚本文件 colour() {if [ $# -ne 0 ];thenecho -e "\033[32m OK \033[0m"e…

3D樱花照片墙、3D樱花照片墙有文字、红蓝爱心、流星雨3D旋转相册、文字加爱心

前端页面百度云盘自提 3D樱花照片墙 3D樱花照片墙有文字 红蓝爱心 流星雨3D旋转相册 文字加爱心