官网飞行动画：https://sandcastle.cesium.com/?src=Camera.html

本地cesium飞行：http://localhost:8088/cesium/Apps/Sandcastle/index.html?src=Camera.html

easingFunction为缓动函数：

Cesium.EasingFunction.BACK_IN //回到
Cesium.EasingFunction.BACK_IN_OUT //进入在出来
Cesium.EasingFunction.BACK_OUT //退出
Cesium.EasingFunction.BOUNCE_IN //弹出去
Cesium.EasingFunction.BOUNCE_IN_OUT //弹进去然后退出。
Cesium.EasingFunction.BOUNCE_OUT  //弹出来。
Cesium.EasingFunction.CIRCULAR_IN  //循环进
Cesium.EasingFunction.CIRCULAR_IN_OUT //循环进与出
Cesium.EasingFunction.CIRCULAR_OUT  //循环出
Cesium.EasingFunction.CUBIC_IN //曲线进
Cesium.EasingFunction.CUBIC_IN_OUT //曲线进与出
Cesium.EasingFunction.CUBIC_OUT //曲线出
Cesium.EasingFunction.ELASTIC_IN //弹性的进
Cesium.EasingFunction.ELASTIC_IN_OUT //弹性的进与出
Cesium.EasingFunction.ELASTIC_OUT//弹性的出
Cesium.EasingFunction.EXPONENTIAL_IN //曲线进
Cesium.EasingFunction.EXPONENTIAL_IN_OUT//曲线进与出
Cesium.EasingFunction.EXPONENTIAL_OUT //曲线出
Cesium.EasingFunction.LINEAR_NONE //线性缓动
Cesium.EasingFunction.QUADRATIC_IN//二次进
Cesium.EasingFunction.QUADRATIC_IN_OUT//二次进与出
Cesium.EasingFunction.QUADRATIC_OUT//二次出
Cesium.EasingFunction.QUARTIC_IN//四次进
Cesium.EasingFunction.QUARTIC_IN_OUT//四次进与出
Cesium.EasingFunction.QUARTIC_OUT //四次出
Cesium.EasingFunction.QUINTIC_IN//五次进
Cesium.EasingFunction.QUINTIC_IN_OUT//五次进与出
Cesium.EasingFunction.QUINTIC_OUT//五次出
Cesium.EasingFunction.SINUSOIDAL_IN//正弦曲线的进
Cesium.EasingFunction.SINUSOIDAL_IN_OUT//正弦曲线进与出
Cesium.EasingFunction.SINUSOIDAL_OUT//正弦曲线出

飞到指定经纬度坐标-viewer.camera.flyTo（）

<template><div style="100vh"><el-button@click="flyToChengdu()"style="position: fixed; top: 10px; left: 10px; z-index: 10">flyToChengdu</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {flyToChengdu() {this.viewer.camera.flyTo({//注意：Cesium.Cartesian3.fromDegrees(经度，纬度，高度)。经纬度坐标转笛卡尔坐标xyzdestination: Cesium.Cartesian3.fromDegrees(104.07, 30.66, 15000.0),});},},
};
</script>

flyToHeadingPitchRoll

角度转为弧度：弧度值 = Cesium.Math.toRadians(角度值);

弧度转为角度：角度值 = Cesium.Math.toDegrees(弧度值);

<template><div style="100vh"><el-button@click="flyToHeadingPitchRoll()"style="position: fixed; top: 10px; left: 10px; z-index: 10">flyToHeadingPitchRoll</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {flyToHeadingPitchRoll() {this.viewer.camera.flyTo({//注意：Cesium.Cartesian3.fromDegrees(经度，纬度，高度)。经纬度坐标转笛卡尔坐标xyzdestination: Cesium.Cartesian3.fromDegrees(104.07, 30.66, 15000.0),orientation: {heading: Cesium.Math.toRadians(20.0), //相机绕z轴旋转pitch: Cesium.Math.toRadians(-35.0), //相机绕y轴旋转roll: 0.0, //相机绕x轴旋转},});},},
};
</script>

飞到A位置，完了再飞到B位置

flyTo()函数还可以传入一个配置项complete，可以给其设定一个飞行结束后再运行的函数，通过这个配置项可以实现两地或多地飞行

<template><div style="100vh"><el-button@click="flyInACity()"style="position: fixed; top: 10px; left: 10px; z-index: 10">flyInACity</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {flyInACity() {this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-73.98580932617188,40.74843406689482,363.34038727246224),complete: () => {setTimeout(() => {this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-73.98585975679403,40.75759944127251,186.50838555841779),orientation: {heading: Cesium.Math.toRadians(200.0),pitch: Cesium.Math.toRadians(-50.0),},easingFunction: Cesium.EasingFunction.LINEAR_NONE,});}, 1000);},});},},
};
</script>

飞到指定矩形范围

<template><div style="100vh"><el-button@click="flyToRectangle()"style="position: fixed; top: 10px; left: 10px; z-index: 10">flyToRectangle</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {//飞到指定矩形范围flyToRectangle() {const west = -90.0;const south = 38.0;const east = -87.0;const north = 40.0;const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);this.viewer.camera.flyTo({destination: rectangle,});// 显示矩形框this.viewer.entities.add({rectangle: {coordinates: rectangle,fill: false,outline: true,outlineColor: Cesium.Color.WHITE,},});},},
};
</script>

设置视图到某矩形区域，无飞行动画

设置当前视图通过setView()函数实现的，它跟flyTo()最大的不同是没有持续时间，没有飞行过程，是立即生效的

<template><div style="100vh"><el-button@click="viewRectangle()"style="position: fixed; top: 10px; left: 10px; z-index: 10">viewRectangle</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {//直接展示矩形范围，无飞行动画viewRectangle() {const west = -77.0;const south = 38.0;const east = -72.0;const north = 42.0;const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);this.viewer.camera.setView({destination: rectangle,});this.viewer.entities.add({rectangle: {coordinates: rectangle,fill: false,outline: true,outlineColor: Cesium.Color.WHITE,},});},},
};
</script>

设置视图到某一点-viewer.camera.setView()

<template><div style="100vh"><el-button@click="setHeadingPitchRoll()"style="position: fixed; top: 10px; left: 10px; z-index: 10">setHeadingPitchRoll</el-button><div id="cesiumContainer" /></div>
</template>
<script>
export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {setHeadingPitchRoll() {this.viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),orientation: {heading: -Cesium.Math.PI_OVER_TWO,pitch: -Cesium.Math.PI_OVER_FOUR,roll: 0.0,},});},},
};
</script>

cesium中的飞行动画fly相关推荐

cesium中实现楼层分解动画
1 几点说明楼层模型的格式为glb.gltf,非3dtile.一般为建模师通过3dmax等专业软件建模一栋楼一般需要2个glb模型:楼层模型floor 和楼顶模型roof 楼体模型(floor) ...
Cesium中的相机—HeadingPitchRoll
在Cesium中,常常使用HeadingPitchRoll三个角度来定义相机坐标系相对某基准坐标系的方位. 在详细阐述这个概念之前,先阐述在航空飞行中常用的yaw/pitch/roll. 偏航(yaw ...
Unity创建使用操纵杆飞行动画教程
Unity 3d移动超级英雄使用操纵杆飞行 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:20节课 ...
Cesium 中两种添加 model 方法的区别
概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加通过 viewer.scene.primitives.add() 函数添加 ...
Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
Cesium中添加entitie模型，实现贴地。
1.Cesium中添加entitie模型,实现贴地. 2. 添加模型 const createModel = (url) => {const entity = viewer.entities.a ...
cesium中限制地图浏览范围
cesium中限制地图浏览范围项目中有限制用户地图浏览范围的需求,经过研究以及查找相关资料,得出了一个可行方法:1.限制用户浏览视角的高度范围,然后实时监测镜头的范围,最后用实时镜头范围与限制范围的 ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
基于Cesium的无人机飞行模拟
点击查看:基于Cesium的无人机飞行模拟 2.安装 2.1 安装node.js环境. 2.2 下载离线地图包. 2.3 在sourceConfig.js中配置离线地图地址. 2.4 在cesium- ...

cesium中的飞行动画fly