當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Cesium 实现一个飞机漫游飞行效果

發布時間：2024/3/26 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Cesium 实现一个飞机漫游飞行效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章給大家分享一個 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><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></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 实现一个飞机漫游飞行效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。