【Cesium】三、实现开场动画效果
文章目录
- 实现效果
- 实现方法
- 实现代码
- 组件化
实现效果

实现方法
Cesium官方提供了Camera的flyTo方法实现了飞向目的地的动画效果。
官方API:传送门
这里只需要用到目的地(destination)和持续时间(duration)这两个参数即可。
实现代码
(1)代码调用
这里以南京为目的地,实现开场动画效果。
let position = {lon: 118.7969,lat: 32.0603,height: 20000,
};flyToPosition(viewer, position, 4);
(2)核心函数
/*** @description : 初始场景动画,飞到目标点* @param {*} viewer * @param {*} position :目标点位置* @param {*} duration :持续时间* @return {*}*/
function flyToPosition(viewer, position, duration) {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.height),duration: duration,});
}
组件化
看过我上一篇文章的,可以继续往下看
上篇文章:【Cesium 】一、vite+vue3+cesium 使用,项目中使用cesium 地图,具体步骤。快速搭建Cesium三维地图应用项目
在模板的基础上实现 开场动画效果,不通的是写成组件形式
utils下新建Ces_utils.js文件,全部代码如下
import * as Cesium from "cesium";
const CesUtils = () => {/*** @description : 初始场景动画,飞到目标点* @param {*} viewer* @param {*} position :目标点位置* @param {*} duration :持续时间* @return {*}*/const flyToPosition = (viewer, position, duration) => {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(position.lon,position.lat,position.height),duration: duration,});}return {flyToPosition}
}export default CesUtils;
在App.vue中使用
<template><div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import CesUtils from "@/utils/Ces_utils";
const cesUtils = CesUtils();const initFn = async () => {const viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false,geocoder: false,homeButton: false,sceneModePicker: false,baseLayerPicker: true,navigationHelpButton: false,animation: false,timeline: false,fullscreenButton: false,vrButton: false,});viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息const imageLayers = viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层const TDTTK = "337bc7a038fe9d239af76ab013ff4594"; //填入你自己的天地图Key// 天地图影像const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtLayer);// 天地图注记const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);cesUtils.flyToPosition(viewer, position, 4);
};let position = {lon: 118.7969,lat: 32.0603,height: 20000,
};onMounted(() => {initFn();
});
</script>
<style>
#app {width: 100%;height: 100%;font-family: sans-serif;text-align: center;
}html,
body,
#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
</style>
ok,开场动画效果就实现了,后面我还会更新更多关于cesium知识,敬请关注。
相关文章:
【Cesium】三、实现开场动画效果
文章目录 实现效果实现方法实现代码组件化 实现效果 实现方法 Cesium官方提供了Camera的flyTo方法实现了飞向目的地的动画效果。 官方API:传送门 这里只需要用到目的地(destination)和持续时间(duration)这两个参数…...
#渗透测试#红蓝攻防#红队打点web服务突破口总结01
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...
适用于项目经理的跨团队协作实践:Atlassian Jira与Confluence集成
适用于项目经理的跨团队协作实践:Atlassian Jira与Confluence集成 现代项目经理的核心职责是提供可视性、保持团队一致,并确保团队拥有交付出色工作所需的资源。在过去几年中,由于分布式团队的需求不断增加,项目经理这一角色已迅速…...
智能家居体验大变革 博联 AI 方案让智能不再繁琐
1. 全球AI技术发展背景及智能家居市场趋势 人工智能(AI)技术的飞速发展正在推动全球各行业的数字化转型。国际电信联盟与德勤联合发布《人工智能向善影响》报告指出,全球94%的商界领袖认为,人工智能技术对于其企业在未来5年内的发…...
云计算与服务是什么
云计算与服务是一个广泛而深入的话题,涵盖了云计算的基本概念、特点、服务类型以及应用场景等多个方面。以下是对云计算与服务的详细解析: ### 一、云计算的基本概念 云计算是一种基于互联网的计算方式,它通过动态易扩展且虚拟化的资源&…...
接口测试面试题
接口测试在软件测试中占据重要位置,无论是功能测试还是性能测试,接口的稳定性至关重要。以下总结了一些常见的接口测试面试题,帮助你从容应对面试挑战! 面试官常说:“接口测试是测试的重头戏,了解接口的设计…...
【Cesium】六、实现鹰眼地图(三维)与主图联动效果
文章目录 一、前言二、效果三、实现方法2.1 思路2.2 方法2.3 使用 App.vue 一、前言 上一篇文章:【Cesium】五、地图实现鹰眼效果(三维),虽然实现了3D 的鸟瞰图效果,但是只有鸟瞰图跟着 主地图在动,如果 在…...
ESLint+Prettier的配置
ESLintPrettier的配置 安装插件 在settings.json中写下配置 {// tab自动转换标签"emmet.triggerExpansionOnTab": true,"workbench.colorTheme": "Default Dark","editor.tabSize": 2,"editor.fontSize": …...
4.微服务灰度发布落地实践(消息队列增强)
文章目录 前言问题分析消息队列特性分析kafkarocketmqrabbitmq 发布订阅公共抽象发送端订阅端 前言 消息队列是一种用于在应用程序的不同组件或系统之间传递消息的通信机制。它通过将消息存储在一个队列中,确保消息能够可靠地从发送方传递到接收方,即使…...
【从零开始入门unity游戏开发之——C#篇35】C#自定义类实现Sort自定义排序
文章目录 一、List<T>自带的排序方法1、List<T>调用Sort()排序2、 能够使用 Sort() 方法进行排序的本质 二、自定义类的排序1、通过实现泛型IComparable<T> 接口(1)示例(2)直接调用 int 类型的 CompareTo 方法进…...
音频进阶学习九——离散时间傅里叶变换DTFT
文章目录 前言一、DTFT的解释1.DTFT公式2.DTFT右边释义1) 复指数 e − j ω n e^{-j\omega n} e−jωn2)序列与复指数相乘 x [ n ] ∗ e − j ω n x[n]*e^{-j\omega n} x[n]∗e−jωn复指数序列复数的共轭正交正交集 3)复指数序列求和 3.DTF…...
连接github和ai的桥梁:GitIngest
Git ingest GitIngest - 将任何 Github 仓库转变为适合 LLM 的友好型提示文本 (https://github.com/cyclotruc/gitingest) 输入 Github 地址或者名称,GitIngest 就会提供该仓库的总结、目录结构、仓库内容的文本内容 你可以复制这些文本与 AI 大模型更好地对话...
Pytorch使用手册-DCGAN 指南(专题十四)
1. Introduction 本教程将通过一个示例介绍 DCGANs(深度卷积生成对抗网络)。我们将训练一个生成对抗网络(GAN),在给它展示大量真实名人照片后,它能够生成新的“名人”图片。这里的大部分代码来源于 PyTorch 官方示例中的 DCGAN 实现,而本文档将对该实现进行详细解释,并…...
Flume的安装和使用
一、安装Flume 1. 下载flume-1.7.0 http://mirrors.shu.edu.cn/apache/flume/1.7.0/apache-flume-1.7.0-bin.tar.gz 2. 解压改名 tar xvf apache-flume-1.7.0-bin.tar.gz mv apache-flume-1.7.0-bin flume 二、配置Flume 1. 配置sh文件 cp conf/flume-env.sh.template …...
[Hive]七 Hive 内核
1. Hive架构 Hive架构主要包括: 用户界面:命令行(CLI)和web UIThrift Server:公开了一个非常简单的客户端执行HiveQL语句的API,包括JDBC(Java)和ODBC(C)&…...
Druid密码错误重试导致数据库超慢
文章目录 密码错误重试导致数据库超慢如何避免呢? 密码错误重试导致数据库超慢 有同事把项目的数据库密码配错了,导致其他所有连接该数据库的项目全部连接都获取缓慢了,一个页面加载要花费十几秒。排查mysql连接发现很多connect命令的连接 …...
Ubuntu 24.04安装和使用WPS 2019
为Ubuntu找一款免费、功能丰富的 Microsoft Office 替代品?WPS Office是理想选择!在本文中,包含在Ubuntu上安装 WPS Office,修复初次使用出现问题的修复。 安装WPS,参考链接>>How to Install WPS Office on Ubu…...
week05_nlp大模型训练·词向量文本向量
1、词向量训练 1.1 CBOW(两边预测中间) 一、CBOW 基本概念 CBOW 是一种用于生成词向量的方法,属于神经网络语言模型的一种。其核心思想是根据上下文来预测中心词。在 CBOW 中,输入是目标词的上下文词汇,输出是该目标…...
【RabbitMQ消息队列原理与应用】
RabbitMQ消息队列原理与应用 一、消息队列概述 (一)概念 消息队列(Message Queue,简称MQ)是一种应用程序间的通信方式,它允许应用程序通过将消息放入队列中,而不是直接调用其他应用程序的接口…...
反欺诈风控体系及策略
本文详细介绍了互联网领域金融信贷行业的反欺诈策略。首先,探讨了反欺诈的定义、重要性以及在当前互联网发展背景下欺诈风险的加剧。接着,分析了反欺诈的主要手段和基础技术,包括对中介和黑产的了解、欺诈风险的具体类型和表现方式࿰…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
