vue2 使用 cesium 【第二篇-相機(jī)視角移動(dòng)+添加模型】
搞了一陣子 cesium，小白入門，這東西很牛逼，但是感覺這東西好費(fèi)勁啊！網(wǎng)上資料不多，每個(gè)人的用法又不一樣，操作起來真的是絕絕子。之前寫了一篇 vue2 使用 cesium 的博文，沒有寫完，本來想繼續(xù)寫來著，想了一下還是重新開一篇吧。上一篇說到了事件，今天不想寫事件了，先寫一點(diǎn)兒別的吧，一些基本的操作。注意：僅供參考，切勿盡心。
其次，這篇博文是基于 vue2 使用 cesium 這篇博文繼續(xù)的，所以說關(guān)于 cesium 怎么放到 vue 項(xiàng)目里面，怎么加載圖層啥的去看上一篇博文，起碼到我寫的時(shí)候，這個(gè)博文是沒有過時(shí)的，都是親測可用的，這幾篇博文都是一邊寫、一邊敲、一邊截圖的。
相機(jī)視角移動(dòng)
這小節(jié)說一下相機(jī)視角的移動(dòng)，就比如說我們想讓地球加載完之后，自動(dòng)轉(zhuǎn)到一個(gè)位置，我們可以使用 cesium 提供的一個(gè)方法，把相機(jī)移動(dòng)到我們需要的地方。
這部分的代碼就很簡單了，首先貼一下官網(wǎng)相關(guān) API。這個(gè)相機(jī)移動(dòng)，是在 viewer 下面的 camera 相機(jī)下面，有一個(gè) flyTo (options) 方法。
我代碼寫的是比較簡單的案例了，如果比較復(fù)雜的話根據(jù)官方給出的 api 去修改。
首先我們封裝一個(gè)相機(jī)移動(dòng)的函數(shù)，然后在使用的時(shí)候直接調(diào)用這個(gè)封裝好的函數(shù)就可以了。
/**
* 相機(jī)視角移動(dòng)函數(shù) - by wjw
* @param lon 目標(biāo)經(jīng)度
* @param lat 目標(biāo)緯度
* @param height 相機(jī)高度
* @param heading 航向角
* @param pitch 俯仰角
* @param roll 距中心的距離，以米為單位
* @param duration 飛行時(shí)間
*/
flyToTarget(lon, lat, height, heading, pitch, roll, duration) {
this.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, height), // 經(jīng)緯度以及相機(jī)離地高度
orientation: {
heading: Cesium.Math.toRadians(heading), // 航向角
pitch: Cesium.Math.toRadians(pitch), // 俯仰角
roll: roll // 距中心的距離，以米為單位
},
duration: duration // 飛行時(shí)間
})
}
然后使用的話也很簡單，直接調(diào)用一下子就可以了。
// 比如說兩秒之后，視角移動(dòng)到目標(biāo)區(qū)域
setTimeout(() => {
// 相機(jī)視角移動(dòng)至目標(biāo)位置
this.flyToTarget(117.000923, 36.675807, 12000000, 0, -90, 0, 2)
}, 2000)
這樣的話，相機(jī)移動(dòng)視角的基本實(shí)現(xiàn)就完成了，看一下效果哈。吐槽一下，CSDN 這個(gè)上傳 gif 圖片很不友好，有些效果截圖效果不好，gif 更好，但是圖片大小有限制，好多我錄好了導(dǎo)入發(fā)現(xiàn)太大了不讓我上傳，氣！
看，我刷新一下頁面，地球最開始顯示的是北美區(qū)域，但是過了一會(huì)兒，地球視角旋轉(zhuǎn)到了我們設(shè)定的目標(biāo)區(qū)域，嗯，就是這個(gè)樣子。
添加模型
嗯，添加模型這個(gè)東西，每個(gè)人的方式都有自己的習(xí)慣和方式，我這邊就簡單的寫一下哈。
首先如果想要一個(gè)真實(shí)的模型加載在藍(lán)星，就需要去找一個(gè)模型，如果是正經(jīng)項(xiàng)目開發(fā)，添加模型什么的，肯定會(huì)有自己設(shè)計(jì)制作好的模型文件提供，或者是委托第三方采購，但是如果是自己玩怎么辦，沒關(guān)系寶子們，我推薦一個(gè)網(wǎng)站叫做 Sketchfab，這個(gè)網(wǎng)站是國外的，里面有很多模型可以免費(fèi)下載，盡管有些精致的需要付費(fèi)，但是自己玩的話，這都不重要了。
比如我們搜索 “衛(wèi)星” ，英文就是 “satellite”。搜索一下，搜出來的模型，右上角帶有下載按鈕的，就是可以免費(fèi)下載的了 ：
點(diǎn)擊了右上角的下載按鈕，會(huì)彈窗選擇文件類型，我是選擇 gltf 格式的，確定好點(diǎn)擊藍(lán)色的下載按鈕就可以下載下來了。
下載下來就是個(gè)壓縮包，里面是我們的模型文件：
解壓后 是這個(gè)樣子的：
我們在項(xiàng)目里面引入的就是這個(gè) gltf 文件，但是其他文件，是 gltf 文中調(diào)用的，所以說呢，都得要。但是有的文件哈，只有 gltf 文件，他是沒有貼圖的，所有的數(shù)據(jù)都保存在 gltf 中了，沒有分開相互引用。所以說呢，都一樣。
然后把這個(gè)解壓后的文件夾，直接放在項(xiàng)目的 public -> static -> models 文件夾中就可以了，當(dāng)然可以根據(jù)需要隨便改改名字，這個(gè)是沒有問題的。
接下來就是在項(xiàng)目中添加這個(gè)模型，讓他加載到藍(lán)星上面去。
每個(gè)人編碼方式不一樣哈，我把模型單獨(dú)寫了一個(gè) TModels.js 文件引入的：
/**
* 普通衛(wèi)星模型
* @param id 模型唯一標(biāo)識(shí)ID
* @param position 位置信息
* @param orientation 方向信息
* @param description 模型描述
* @returns {{orientation, description, model: {minimumPixelSize: number, show: boolean, scale: number, maximumSize: number, uri: string}, id, position}}
*/
export const satelliteModel = function (id, position, orientation, description, modelData) {
return {
// 模型id
id: id,
// 模型類型
modelType: 'wx',
// 模型位置
position: position,
// 模型自定義數(shù)據(jù)
modelData: modelData,
// 模型方向
orientation: orientation,
// 模型資源
model: {
// 模型路徑
uri: '/static/models/weixing/scene.gltf',
scale: 1000.0, //放大倍數(shù)
// 模型是否可見
show: true,
// 模型最小刻度
minimumPixelSize: 150,
// 模型最大刻度
maximumSize: 150,
// // 模型輪廓顏色
silhouetteColor: Cesium.Color.WHITE,
// // 模型輪廓大小，單位px
silhouetteSize: 0,
},
// 添加描述
description: description
}
}
就是上邊這個(gè)樣子，然后這是拋出了一個(gè)方法，傳的參數(shù)根據(jù)自己項(xiàng)目的實(shí)際需要進(jìn)行修改。一些注釋我寫的也算可以，應(yīng)該是可以看懂的，如果需要其他的參數(shù)或者是效果，可以去官網(wǎng)查一下手冊。
這只是創(chuàng)建模型的方法，通過這個(gè)方法可以讀取出一個(gè)模型出來。接下來就是把這個(gè)模型放到藍(lán)星上面。把一個(gè)模型放到藍(lán)星上面。
首先需要一個(gè)經(jīng)緯度信息，就是把模型放到哪里；
然后一個(gè)高度，就是把模型放著這個(gè)位置后，距離海平面多高；
然后方向角相關(guān)參數(shù)，因?yàn)槟Ｐ褪侨S的，他在這個(gè)位置朝向哪里，中心點(diǎn)旋轉(zhuǎn)多少；
首先引入上一步的模型
import { satelliteModel } from './TModels'
然后編寫封裝一下模型加載的方法：
/**
* 添加衛(wèi)星模型 - by wjw
* @param lon 經(jīng)度
* @param lat 緯度
* @param height 高度
* @param heading 航向角
* @param pitch 俯仰角
* @param roll 轉(zhuǎn)向角度
* @param id 模型唯一標(biāo)識(shí)符
* @param description 描述
*/
addModel(id, description, lon, lat, height, heading, pitch, roll) {
// 模型位置信息
let position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
// 設(shè)置模型方向
let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
// 向藍(lán)星添加模型，返回模型對(duì)象
let model = this.viewer.entities.add(satelliteModel(id, position, orientation, description));
return model
}
這樣想藍(lán)星添加模型的方法就封裝好了，我們傳參調(diào)用一下就可以了。
this.addModel('wjw-001', '測試模型', 117, 36, 1000000, 0, 0, 0)
然后我們的小衛(wèi)星就加載到藍(lán)星了。
好了，這是最簡單的加載模型到藍(lán)星的方式，還有其他的方式，如果需要的話可以自己看一下研究一下。
移除模型
上一小節(jié)說了一下加載模型，加載上了還需要移除。
大體邏輯哈，我們添加模型的時(shí)候不是給模型設(shè)置了一個(gè) id 嗎？這是唯一的，我們根據(jù)這個(gè)唯一的標(biāo)識(shí)符 id ，去獲取到這個(gè)模型對(duì)象，如果獲取到了，就說明藍(lán)星確實(shí)有這個(gè) id 的模型，我們直接刪除就可以了，如果沒有獲取到，那么就說明藍(lán)星上沒有這個(gè) id 的模型，那就不用處理了，因?yàn)闆]有就不需要?jiǎng)h除。
封裝方法：
/**
* 根據(jù) ID 查詢模型 - by wjw
* @param id 模型唯一標(biāo)識(shí)符 id
* @returns {Entity}
*/
getModelById(id) {
let model = this.viewer.entities.getById(id)
return model
}
/**
* 刪除模型 - by wjw
* @param model 模型實(shí)體對(duì)象
*/
removeModel(model) {
this.viewer.entities.remove(model)
}
說哈，其實(shí)可以一個(gè)方法寫完是吧？但是這里我分了兩個(gè)，這么做肯定有原因的，每個(gè)人業(yè)務(wù)不一樣，所以說呢，封裝起來肯定有區(qū)別，之前有博客被人罵了，說我封裝的不對(duì)，那是因?yàn)榫唧w的業(yè)務(wù)需求不一樣，我就簡單寫個(gè) demo，根據(jù)自己的實(shí)際情況自己封裝哈。不喜勿噴！
然后就簡單了，調(diào)用一下就可以了。
// 添加衛(wèi)星
this.addModel('wjw-001', '測試模型', 117, 36, 1000000, 0, 0, 0)
// 根據(jù) id 獲取模型
let model = this.getModelById('wjw-001')
console.log(model)
之前添加了一個(gè) id 是 wjw-001 的模型，我們先獲取一下看看：
控制臺(tái)打印出來了。
如果查詢一個(gè)沒有的 id 看一下效果：
// 添加衛(wèi)星
this.addModel('wjw-001', '測試模型', 117, 36, 1000000, 0, 0, 0)
// 根據(jù) id 獲取模型
let model = this.getModelById('wjw-002')
console.log('獲取到的模型對(duì)象------->> ', model)
沒有 id 是 wjw-002 的模型，查詢出來看結(jié)果：
沒有，和我們想的邏輯對(duì)起來了。
然后刪除就可以了：
// 添加衛(wèi)星
this.addModel('wjw-001', '測試模型', 117, 36, 1000000, 0, 0, 0)
// 根據(jù) id 獲取模型
let model = this.getModelById('wjw-001')
if (model) {
setTimeout(() => {
this.removeModel(model) // 四秒后刪除
}, 4000)
}
看一下效果：
好了，就這樣。文章來源：http://www.zghlxwxcb.cn/news/detail-502710.html
這篇文章先這樣，后邊繼續(xù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-502710.html
到了這里，關(guān)于vue2 使用 cesium 【第二篇-相機(jī)視角移動(dòng)+添加模型】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
