Cesium基础教程

news2024/10/7 6:47:40

一、概述

Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。

  • Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
  • Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。
  • Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

二、安装

当前案例基于vue3+vite构建

1.安装插件

插件地址

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D

2.配置

vite.config.js配置：

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

三、创建一个Viewer

1、基础Viewer

<template>
    <div id="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { Viewer } from 'cesium';
onMounted(() => {
    const viewer = new Viewer('cesiumContainer');
})
</script>
<style lang="scss" scoped></style>

2、辅助按钮

在这里插入图片描述

  1. Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
  2. HomeButton : 首页位置，点击之后将视图跳转到默认视角。
  3. SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
  4. BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。
  5. NavigationHelpButton : 帮助提示，如何操作数字地球。
  6. Animation :控制视窗动画的播放速度。
  7. CreditsDisplay : 展示商标版权和数据源。
  8. Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
  9. FullscreenButton : 视察全屏按钮。

四、 Cesium Ion

在我们使用Cesium的过程中，如果没有申请ion，同时没有自己的数据源用的cesium提供的数据源，viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token.
在这里插入图片描述

  1. 首先需要去注册一个免费的Cesium ion账户。
  2. 打开 Cesium ion 然后注册一个新的账户。
  3. 点击"Access Token"，跳转到Access Tokens page页面。
  4. 选择Default默认的access token拷贝到contents中。
    在这里插入图片描述
    在创建Cesium Viewer的时候，将access token填为自己的access token即可。
Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

此时底部的小字就消失了！
以上就能畅快的访问Cesium ion提供的各种数据源了。

五、添加图层

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium会去请求和渲染不同层级的图层详细信息。
多种图层能够被添加、移除、排序和适应到Cesium中。

Cesium提供了一系列方法用于处理图层，比如颜色自适应，图层叠加融合。一些样例代码如下：

  • Adding basic imagery添加基本图层
  • Adjusting imagery colors自适应图层颜色
  • Manipulating and ordering imagery layers控制调整图层顺序
  • Splitting imagery layers切割图层

Cesium提供了各种 接口 支持各样的图层数据源。

支持的图层格式

  • wms
  • TMS
  • WMTS (with time dynamic imagery)
  • ArcGIS
  • Bing Maps
  • Google Earth
  • Mapbox
  • OpenStreetMap

注意：不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以
默认地，Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建ion account然后生成一个access key用于访问图层数据。

  1. 去Cesium ion页面，将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot”
    在这里插入图片描述

  2. 点击 Add to my assets。Sentinel-2将在你个人用户中的asset列表（My Assets）中出现，此时将在个人的app中图层数据源变得可用。

  3. 代码修改
    我们创建一个IonImageryProvider，将assetId传给对应的Sentinel-2图层。然后我们将ImageryProvider添加到viewer.imageryLayers。

// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

Sentinel-2：全世界的无云卫星图像，分辨率可降至10米

在这里插入图片描述

六、添加地形

Cesium支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium引擎会从一个服务器上请求流式地形数据，仅请求那些基于当前相机能看到的需要绘制的图层上的数据。

Cesium官方提供了一些地形数据集的例子，以及如何配置这些参数。

  • ArcticDEM : 高投影的arctic terrain
  • PAMAP Terrain : 高投影的Pennsylvania terrain
  • Terrain display options : 一些地形数据配置和格式
  • Terrain exaggeration : 是地形间的高度差异更加的优雅艺术

支持的地形数据格式：

  • Quantized-mesh, Cesium团队自己开源的一种格式
  • Heightmap
  • Google Earth Enterprise

为了添加地形数据，我们需要创建一个CesiumTerrainProvider，提供一个url和一些配置项，然后将这个provider赋值给viewer.terrainProvider。

此处，我们使用Cesium WorldTerrian图层，该图层由Cesium ion提供，在“My Assets”中是默认提供的。我们可以用createWorldTerrainhelper函数创建一个由Cesium ion提供服务的Cesium WorldTerrian。

// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});

*requestWaterMask和requestVertexNormals是可选的配置项，告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。*

最终，既然我们有了地形数据，我们需要更多的线条来使得地形数据背后的objects能够正确地显示，只有最前面、最上面的objects才能是可见的。

// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

我们现在有地形数据和运动的水。纽约非常平坦，所以可以在上面的地形数据上自由的探索。举一个显而易见的例子，你可以跳转到更加崎岖的区域比如 Grand Canyon 或者 San Francisco。
在这里插入图片描述

七、配置视窗

接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互，该类控制了viewer中的所有图形元素。

  1. 首先，我们配置一下我们的scene，用以下代码激活基于太阳位置的光照：
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

按照以上配置，我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out，你就会看到一部分数字地球位于黑暗之中，因为模拟真实的地球，太阳只能照射到地球的一部分。

  1. 在我们开始初始化启动view之前，我们先简略的过一下一些基础的Cesium类型：
    Cartesian3 : 一个三维笛卡尔坐标——当它被用作相对于地球中心的位置时，使用地球固定框架（ECEF）。
    Cartographic : 由经度、纬度（弧度）和WGS84椭球面高度确定的位置。
    HeadingPitchRoll : 在东北向上的框架中关于局部轴的旋转（弧度）。航向是围绕负Z轴的旋转。俯仰是围绕负Y轴的旋转。滚动是关于正X轴的旋转。
    Quaternion :以4D坐标表示的3D旋转。

这些是在场景中定位和定位Cesium objects所必需的基本类型，并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。
现在让我们把相机定位在我们数据所在的NYC（纽约）的场景中。

1、Camera Control

相机是viewer.scene中的属性，用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机，或者通过使用Cesium提供的API来控制相机，它被设计成指定相机的位置和方向随时间的变化。

一些最常用的方法如下：
Camera.setView(options): 在特定位置和方向立即设置相机。
Camera.zoomIn(amount): 沿着视角矢量移动摄像机。
Camera.zoomOut(amount): 沿视角矢量向后移动摄像机。
Camera.flyTo(options): 创建从当前相机位置到新位置的动画相机飞行。
Camera.lookAt(target, offset) : 定位并定位摄像机以给定偏移量瞄准目标点。
Camera.move(direction, amount) : 朝任何方向移动摄像机。
Camera.rotate(axis, angle) : 绕任意轴旋转相机。

进一步获得API功能，看看这些相机演示：
Camera API Demo
Custom Camera Controls Demo

让我们尝试一种方法将相机跳转到纽约。使用camera.setView()初始化view，使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

相机现在被定位和定向以俯瞰曼哈顿，并且我们的视图参数被保存在一个对象中，我们可以将其传递给其他相机方法。
效果如下：
请添加图片描述
实际上，我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角，我们可以重写按钮，使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画，然后添加一个取消默认航班的事件侦听器，并调用FlyTo()我们的Home视角：

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

点击Home按钮后，视图会直接跳转到纽约上空
在这里插入图片描述

更多关于基本相机控制，请访问我们的Camera Tutorial。

2、Clock Control

接下来，我们配置viewer的Clock和Timline来控制scene的时间进度。

这里是clock的相关API

当使用特定时间时，Cesium使用JulandDATE类型，它存储了1月1日中午以来的天数-4712（公元前4713年）。为了提高精度，该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒，日期总是存储在国际原子时间标准中。

下面是我们如何设置场景时间选项的例子：

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

这设置场景动画的速率、开始和停止时间，并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。

这是我们的初始场景配置！现在，当你运行你的应用程序时，你应该看到以下内容：
效果如下：
请添加图片描述

八、加载和样式化实体

实体使用Cesium官网提供的实体：kml下载地址

    var options = {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas,
        screenOverlayContainer: viewer.container,
    };

    var dataSourcePromise= Cesium.KmlDataSource.load('/cesium/gdpPerCapita2008.kmz', options);
    // viewer.dataSources.add(dataSourcePromise); 可以选择一次性加载
    dataSourcePromise.then(dataSource => {
        viewer.dataSources.add(dataSource);

        var geocacheEntities = dataSource.entities.values;
        for (var i = 0; i < geocacheEntities.length; i++) {
            var entity = geocacheEntities[i];
            if (Cesium.defined(entity.billboard)) {
                // 这里可以篡改entity的样式
            }
        }
    })
    viewer.camera.flyHome(0);

效果如下：
在这里插入图片描述
Entity结构如下：
在这里插入图片描述

快捷键

  • 按住鼠标左键拖拽 - 让相机在数字地球平面平移。
  • 按住鼠标右键拖拽 - 放缩相机。
  • 鼠标滚轮滑动 - 放缩相机。
  • 按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。

【引用教程】
新手入门中文教程

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

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

相关文章

【PWN刷题__ret2text】[CISCN 2019华北]PWN1

【PWN刷题__ret2text】[CISCN 2019华北]PWN1

ret2text~ 前言 依旧是简单的ret2text 一、checksec查看 No canary found 没有开启栈溢出保护 二、IDA反汇编 双击进入func() 发现后门函数system("cat/flag")&#xff1b;根据语义&#xff0c;函数提供了修改v1&#xff0c;判断v2是否等于11.28125&#xff0c;如…
阅读更多...
【倒计时4天】金融服务用户体验专场沙龙开启预约

【倒计时4天】金融服务用户体验专场沙龙开启预约

易观&#xff1a;数智化浪潮下&#xff0c;金融业务用户运营从线下向全渠道延伸。用户体验已成为⾦融机构打造差异化的重要抓手。此外&#xff0c;随着⽤户体验的全⾯数字化和精细化&#xff0c;⽤户体验贯穿于整个客户旅程中&#xff0c;做好用户体验管理&#xff0c;体现差异…
阅读更多...
okio篇 1.Buffer

okio篇 1.Buffer

总览: Okio的两个基本概念&#xff1a;Source和Sink。Source对标基础io库中的InputStream&#xff0c;负责读数据。Sink对标OutputStream&#xff0c;负责写数据。 Source和Sink的内部实现&#xff0c;都是一个Buffer。Buffer从字面意思理解就是一个缓冲区&#xff0c;跟Buff…
阅读更多...
『pyqt5 从0基础开始项目实战』12. 实现多线程循环检测数据的开始和停止（保姆级图文）

『pyqt5 从0基础开始项目实战』12. 实现多线程循环检测数据的开始和停止（保姆级图文）

目录 最终效果导包和框架代码 main.py避免重复执行开始与停止事件表格更新事件 scheduler.py初始化开始线程停止线程在线程列表中删除线程TaskThread新建线程StopThread停止线程完整代码main.pythreads.pyscheduler.py 总结 欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&#…
阅读更多...
C. Anadi and Domino(思维 + 枚举)

C. Anadi and Domino(思维 + 枚举)

Problem - C - Codeforces 阿纳迪有一副多米诺骨牌。每张多米诺骨牌都有两个部分&#xff0c;每个部分都包含一些小点。对于每一个a和b&#xff0c;如1≤a≤b≤6&#xff0c;1≤a≤b≤6&#xff0c;正好有一块多米诺骨牌的一半是a点&#xff0c;另一半是b点。这组多米诺骨牌正好…
阅读更多...
手动实现 Tomcat 底层机制+ 自己设Servlet

手动实现 Tomcat 底层机制+ 自己设Servlet

目录 手动实现 Tomcat 底层机制 自己设Servlet 完成小案例 运行效果 此项目用maven至于怎么配置在下一篇文章 创建cal.html CalServlet.java web.xml WebUtils 问题: Tomcat 整体架构分析 测试分析&#xff1a; 抓包情况 手动实现 Tomcat 底层机制 自己设计 Serv…
阅读更多...
十个高质量工具网站推荐，AI自动抠图换背景，任意背景自动融合

十个高质量工具网站推荐，AI自动抠图换背景，任意背景自动融合

AI 背景更换是一种利用生成式人工智能创建新图像背景的软件工具。与传统方法需要移除原有的背景并更换新的不同&#xff0c;AI背景生成器使用先进的算法生成与前景完美融合的全新背景。这项技术彻底改变了图像编辑的方式&#xff0c;为设计提供了更多的创造自由和灵活性。 特点…
阅读更多...
数据结构--B树、B+树

数据结构--B树、B+树

数据结构--B树、B树 1. 什么是B树2.建立B树的要求3.什么是B树4.Mysql里面为什么使用B树作为索引结构&#xff1f; 1. 什么是B树 B树是一种数据结构&#xff0c;用于在硬盘或其他非易失性存储介质上快速存储和访问大量数据。它是一种平衡树&#xff0c;其每个节点可以存储多个键…
阅读更多...
zabbix SNMP traps 监控案例

zabbix SNMP traps 监控案例

目标 根据H3C网络设备 发送 SNMP trap 信息进行网络端口的告警。 具体过程 继上次配置的trap 方式进行监控一个案例。 其中log数据中的内容是&#xff1a; 20230330.163810 ZBXTRAP 192.168.21.148 UDP: [192.168.21.148]:52289->[172.18.18.2]:1162 DISMAN-EVENT-MIB::…
阅读更多...
Keil5软件安装方法（兼容stm32与c51方法）

Keil5软件安装方法（兼容stm32与c51方法）

目录 一、下载软件包 二、安装软件 1、安装C51v960a.exe (1&#xff09;右键以管理员权限运行程序 &#xff08;2&#xff09;开始安装软件 &#xff08;3&#xff09;勾选协议 &#xff08;4&#xff09;选择安装路径 &#xff08;5&#xff09;填写名字与邮箱 &#xff0…
阅读更多...
我国元宇宙行业分析：政策、技术、资金助推行业探索多元化应用场景

我国元宇宙行业分析：政策、技术、资金助推行业探索多元化应用场景

1.元宇宙行业概述、特征及产业链图解 元宇宙是人类运用数字技术构建的&#xff0c;由现实世界映射或超越现实世界&#xff0c;可与现实世界交互的虚拟世界&#xff0c;具备新型社会体系的数字生活空间&#xff0c;主要具有沉浸式体验、开放性、虚拟身份、不断演化、知识互动、…
阅读更多...
c/c++:指针，指针定义和使用，指针大小4字节，野指针，空指针*p=NULL

c/c++:指针，指针定义和使用，指针大小4字节，野指针，空指针*p=NULL

c/c:指针&#xff0c;指针定义和使用&#xff0c;指针大小4字节&#xff0c;野指针&#xff0c;空指针*pNULL 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;此时学会c的话&#xff0c; 我所知道的周边的会c的同学&#xf…
阅读更多...
VMware开机自启虚拟机系统

VMware开机自启虚拟机系统

一、前提 wmware开机自启&#xff0c;安装完毕wmware不用管&#xff0c;默认该软件以及相关服务就是开机自启准备waware虚拟机&#xff08;一般都linux&#xff0c;我用centos7&#xff0c;你随意&#xff09; 二、脚本 脚本命令如下&#xff0c;等待30秒&#xff08;给服务自启…
阅读更多...
NXP公司K20+PF8100实现硬件窗口看门狗

NXP公司K20+PF8100实现硬件窗口看门狗

Kinetis K20 72 MHz MCU系列为中等性能的Kinetis产品组合提供了可扩展的入门级产品&#xff0c;具有差异化的集成&#xff0c;配备高精度模拟集成和灵活的低功耗功能。其相关资源可在NXP的官网获得。 PF81/PF82为PMIC系列专为高性能处理应用而设计&#xff0c;如娱乐中控、车载…
阅读更多...
阅读完synchronized和ReentrantLock的源码后，我竟发现其完全相似

阅读完synchronized和ReentrantLock的源码后，我竟发现其完全相似

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小黄&#xff0c;独角兽企业的Java开发工程师&#xff0c;CSDN博客专家&#xff0c;阿里云专家博主&#x1f4d5;系列专栏&#xff1a;Java设计模式、数据结构和算法、Kafka从入门到成神、Kafka从成神到升仙…
阅读更多...
【数据结构】七大排序之快速排序详解（挖坑法快排，非递归快排，二路快排，三路快排）

【数据结构】七大排序之快速排序详解（挖坑法快排，非递归快排，二路快排，三路快排）

目录 1.快速排序核心思路 2.挖坑法快速排序&#xff08;递归&#xff09; 2.1步骤 2.2代码&#xff08;详细注释&#xff09; 3.非递归快排&#xff08;用栈实现快速排序&#xff09; 3.1思路 3.2代码 4.二路快排 4.1思路 4.2代码 5.三路快排 5.1思路 5.2代码 1.快速…
阅读更多...
大白话chatGPT及其原理之快速理解篇

大白话chatGPT及其原理之快速理解篇

大白话chatGPT及其原理之快速理解篇 从GPT名字理解chatGPTchatGPT三步曲 声明&#xff1a;本文为原创&#xff0c;未经同意请勿转载&#xff0c;感谢配合&#x1f604; chatGPT今年年初的时候是非常火爆的&#xff0c;现在也有很多相关的应用和插件。当然现在也有很多新的技术出…
阅读更多...
老宋 带你五分钟搞懂vue

老宋 带你五分钟搞懂vue

Vue 1.1 什么是框架 任何编程语言在最初的时候都是没有框架的&#xff0c;后来随着在实际开发过程中不断总结『经验』&#xff0c;积累『最佳实践』&#xff0c;慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。于是有人把成熟的『固定解决方案…
阅读更多...
袋鼠云春季生长大会圆满落幕，带来数实融合下的新产品、新方案、新实践

袋鼠云春季生长大会圆满落幕，带来数实融合下的新产品、新方案、新实践

4月20日&#xff0c;以“数实融合&#xff0c;韧性生长”为主题的袋鼠云春季生长大会圆满落幕。 在春季生长大会中&#xff0c;袋鼠云带来了数实融合趋势下的最新行业沉淀、最佳实践经验和行业前瞻性的产品发布。从大数据基础软件“数栈”、到低代码数字孪生世界“易知微”&…
阅读更多...
离散数学-考纲版-01-命题逻辑

离散数学-考纲版-01-命题逻辑

文章目录 1. 命题逻辑的等值演算与推理演算参考1.1 命题1.2 常用联结词1.3 命题公式命题公式的分类-重言式-矛盾式-可满足式等价关系式-逻辑等价 logically equivalent 1.4 命题的等值演算与推理基本等价式逻辑蕴涵重言式 logically implication重言蕴涵推到归结法 1.5 命题公式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023