这篇文章给大家分享一个 Cesium 实现的飞机漫游飞行的效果

前置准备

案例中采用 Vue3 来搭建，还不会搭建 Vue3 脚手架的同学可以看下我之前的文章：

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】

本文的主题是讲解 实现一个飞机飞行效果 , 搭建过程这里不做过多的介绍.

安装 Cesium

安装方式有两种：

第一种是使用 npm 方式来安装

npm i cesium --save

在项目根目录新增配置文件 vue.config.js ,如下

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {baseUrl: '',devServer: {port: 8090 //修改服务端口号},outputDir: 'docs', //设置 build 输出目录configureWebpack: {output: {sourcePrefix: ' '},amd: {toUrlUndefined: true},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js','@': path.resolve('src'),'cesium': path.resolve(__dirname, cesiumSource)}},plugins: [new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('./')})],module: {unknownContextCritical: /^.\/.*$/,unknownContextCritical: false}}
}

main.js 中新增引用

import Cesium from 'cesium/Cesium' //from 中 cesium 指向的是vue.config.js中 alias对象中的别名
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css'

第二种直接下载官方的包引入

下载地址：https://cesium.com/platform/cesiumjs/

本文讲解的案例使用的第二种方式，直接下载后放到项目的 public 文件夹下

在 index.html 中直接引入即可

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><!-- 引入 cesium --><script src="./cesium/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="./cesium/Build/Cesium/Widgets/widgets.css"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

Cesium 初始化

新建一个 vue 组件，用于初始化 Cesium

<template><div id="cesiumContainer"></div>
</template><script setup>
import { onMounted } from "vue";const token ="token自己注册账号申请即可";onMounted(() => {Cesium.Ion.defaultAccessToken = token;var viewer = new Cesium.Viewer("cesiumContainer", {animation: true, //是否创建动画小器件，左下角仪表shouldAnimate: true,baseLayerPicker: true, //是否显示图层选择器fullscreenButton: true, //是否显示全屏按钮geocoder: true, //是否显示geocoder小器件，右上角查询按钮homeButton: true, //是否显示Home按钮infoBox: true, //是否显示信息框sceneModePicker: true, //是否显示3D/2D选择器selectionIndicator: true, //是否显示选取指示器组件timeline: true, //是否显示时间轴navigationHelpButton: true, //是否显示右上角的帮助按钮scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源clock: new Cesium.Clock(), //用于控制当前时间的时钟对象selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组terrainProvider: new Cesium.EllipsoidTerrainProvider(), //地形图层提供者，仅baseLayerPicker设为false有意义fullscreenElement: document.body, //全屏时渲染的HTML元素,useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为truetargetFrameRate: undefined, //使用默认render loop时的帧率showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置contextOptions: undefined, //传递给Scene对象的上下文参数（scene.options）sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系dataSources: new Cesium.DataSourceCollection(),//需要进行可视化的数据源的集合});
});
</script>

效果如下：

加载 CZML 数据

什么是 CZML 数据呢

  • CZML 是 cesium 中很重要的一个概念，也是一个亮点，CZML 使得 cesium 很酷很炫地展示动态数据成为可能。

  • CZML 是一种 JSON 格式的字符串，用于描述与时间有关的动画场景，CZML 包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。某种程度上说, Cesium 和 CZML 的关系就像 Google Earth 和 KML。

  • CZML 的一个典型结构如下。片段描述了两个包（packet，这里每个包描述了一个点），每个包的 id，position 和 color。

  • CZML 比较特殊的是跟时间序列相关的属性

[{id: "document",version: "1.0",clock: {interval: "2018-07-19T15:18:00Z/2018-07-19T15:18:30Z", // 开始时间-结束时间currentTime: "2018-07-19T15:18:00Z", // 当前时间multiplier: 5, // 轨迹运行的速度range: "LOOP_STOP",step: "SYSTEM_CLOCK_MULTIPLIER",},},{id: "CesiumMilkTruck",model: {gltf: "/Cesium_Air.glb",},// 位置信息position: {interpolationAlgorithm: "LINEAR", //插值算法forwardExtrapolationType: "HOLD", //插值算法cartesian: ["2018-07-19T15:18:00Z",1216348.1632364073,-4736348.958775471,4081284.5528982095,"2018-07-19T15:18:30Z",1216369.1229444197,-4736377.467107148,4081240.888485707,],},// 模型方向信息orientation: {velocityReference: "#position",// unitQuaternion: [//   0.3084011337938999, 0.3210181022701266, -0.45850421987074924,//   0.7686388857813198,// ],},},{id: "Polyline",polyline: {positions: {cartesian: [1216348.1632364073, -4736348.958775471, 4081284.5528982095,1216369.1229444197, -4736377.467107148, 4081240.888485707,],},material: {polylineOutline: {color: {rgba: [255, 255, 0, 255],},outlineColor: {rgba: [0, 0, 0, 255],},outlineWidth: 2,},},width: 10,clampToGround: true, // 线条紧贴地面},},];

如何加载

贴心的 Cesium 已经给我们提供好了加载的方法，不需要我们做任何特殊的处理

// 加载 CZML
const dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
// 加载完成后移动相机跟踪目标dataSourcePromise.then(function (dataSource) {viewer.trackedEntity = dataSource.entities.getById("CesiumMilkTruck");});

最后实现效果

往期干货：

26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费）

干货~~~2021最新前端学习视频~~速度领取

前端书籍-前端290本高清pdf电子书打包下载

点赞和在看就是最大的支持❤️

Cesium 实现一个 飞机漫游 飞行效果相关推荐

  1. Cesium飞行效果

    Cesium飞行效果 代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...

  2. 鸟和飞机都能飞行，使用代码写一个方法完成鸟的子类比如鹰，麻雀的飞行，还有飞机的飞行

    需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行 /* 1:需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行提示:写一个 ...

  3. 漫游飞行_手机“飞行模式”为何没被淘汰？内行人坦言：其实是你不会用！

    随着科技的不断创新,目前市面上出现的手机款式多种多样,品牌也非常多,有华为.苹果.三星和小米等等.手机的屏幕也是五花八门,有刘海屏.水滴全面屏等,这些屏幕之间都各有不同.而且手机的更新换代速度很快,很 ...

  4. Unity实现模拟仿真飞机起飞降落效果

    Unity实现模拟仿真飞机起飞降落效果 前言 在最近的项目中,我实现了一个简单的飞机起飞.降落功能,运用了初中物理速度.加速度,以及Unity的Translate函数实现的.实现的难度一般,效果还可以 ...

  5. 基于java制作一个飞机小游戏（学习心得）

    emmm,第一篇博客 用了这么久的csdn,都是在观摩大佬们发帖,一只小萌新瑟瑟发抖,不敢说话,甚 至连代码也不能完全读懂.假期在b站自学(可以说是复习)了java课程,尚学堂的 2018版.链接如下 ...

  6. java编程游戏飞机旋转问题_用JAVA写的一个飞机游戏

    根据网上视频教程,用JAVA写的一个飞机程序.先看效果先: 改程序主要应用了面向对象的方法构建,使用了AWT技术和一些双缓冲技术 关键有几个点: 一.双缓冲技术,防止重画造成的屏幕闪烁,可以直接用 p ...

  7. java飞机大战爆炸效果_Java飞机大战游戏设计与实现

    1 概述 1.1 项目简介 本次Java课程设计是做一个飞机大战的游戏,应用Swing编程,完成一个界面简洁流畅.游戏方式简单,玩起来易于上手的桌面游戏.该飞机大战项目运用的主要技术即是Swing编程 ...

  8. 使用小程序制作一个飞机大战小游戏

    此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序 二.页面实现 三.代码块 一.创建小程序 访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...

  9. 用css3做一个模拟火箭飞行的简单动画。

    用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...

最新文章

  1. QWT中Qdial的入门介绍
  2. 游戏里的角色都什么格式图片_二十年前是怎样开发游戏的？
  3. TCP/IP学习笔记（五）TCP的保活定时器
  4. [蓝桥杯][算法提高VIP]合并石子（区间dp+平行四边形优化）
  5. [译]ABP vNext介绍
  6. Delphi之Exception获得错误信息
  7. java mongodb_MongoDB Java Servlet Web应用程序示例教程
  8. linux下rar-unrar命令使用
  9. Oracle 创建和操作表
  10. icode青少年编程比赛网站学生刷题进度爬虫
  11. 【小工具大用处】10个超实用的设计师专属Chrome小插件
  12. 阿里云 mysql 100_【故障公告】阿里云 RDS 数据库服务器 CPU 100% 造成全站故障
  13. 短视频剪辑怎么做？4步教你快速入门
  14. 信息可视化图表设计指南
  15. CSDN情感倾向分析API——功能测试——全流程演示
  16. linux pipe命令,Linux入门教程：Linux下的pipe命令
  17. Chmox - Mac下的CHM电子书阅读器
  18. java软引用_什么是软引用? 有什么作用
  19. js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
  20. OA课程--word2013实用技巧大全-目录

热门文章

  1. Race【模拟】Rating
  2. 动态插桩技术以及动态类加载
  3. ckeditor粘贴word文档图片的源码
  4. JDK8 + FFMPEG + Libreoffice镜像的制作
  5. FFmpeg 实现视频合并，转码，拼接
  6. 关于nginx上的limit_req_zone模块限流使用与geo与map的白名单配置
  7. nginx重写url
  8. 怎样获取计算机知识,从红客联盟得到的电脑基础知识，看后获益匪浅，希望可以帮助到你...
  9. 初中计算机入门教学计划,初中计算机教学计划范例
  10. @Temporal标签的作用