2. 程式人生 > >Cesium學習筆記（七）：Demo學習（自由控制飛行的飛機）

Cesium學習筆記（七）：Demo學習（自由控制飛行的飛機）

阿新 • • 發佈：2019-01-13

這是官方的教程Demo，名字叫Use HeadingPitchRoll，顧名思義，就是教你用HeadingPitchRoll這個方法的，下面我們就來看一看這個Demo

首先先說一下，這個Demo是沙盒裡面的，所以如果你想在本地執行的話需要改一下html

這裡是html

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta
 
 name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <!-- 如果要用沙盒裡的東西的話加上這個 -->
    <script src="../Apps/Sandcastle/Sandcastle-header.js"
 
></script>
    <!-- 一定要加上這個css樣式 -->
    <link rel="stylesheet" href="Sandcastle/templates/bucket.css">
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);
    </style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div
 
 id="toolbar">
    <!-- 這是Demo需要的側邊欄 -->
    <table class="infoPanel">
        <tbody>
        <tr>
            <td>Click on the 3D window then use the keyboard to change settings.</td>
        </tr>
        <tr>
            <td>Heading: <span id="heading"></span>°</td>
        </tr>
        <tr>
            <td>← to left/→ to right</td>
        </tr>
        <tr>
            <td>Pitch: <span id="pitch"></span>°</td>
        </tr>
        <tr>
            <td>↑ to up/↓ to down</td>
        </tr>
        <tr>
            <td>roll: <span id="roll"></span>°</td>
        </tr>
        <tr>
            <td>← + ⇧ left/→ + ⇧ right</td>
        </tr>
        <tr>
            <td>Speed: <span id="speed"></span>m/s</td>
        </tr>
        <tr>
            <td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
        </tr>
        <tr>
            <td>following aircraft
                <input id="fromBehind" type="checkbox">
            </td>
        </tr>

        </tbody>
    </table>
</div>

<script src="你的js檔案"></script>

</body>
</html>

這是js程式碼

//飛機飛行
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // 將焦點放在畫布上
//如果點選就獲取畫布焦點
canvas.addEventListener('click', function() {
    canvas.focus();
});
canvas.focus();

//飛行路徑的位置
var pathPosition = new Cesium.SampledPositionProperty();
//新增飛機飛行路徑
var entityPath = viewer.entities.add({
    position : pathPosition,
    name : 'path',
    path : {
        show : true,
        leadTime : 0,
        trailTime : 60,
        width : 10,
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.3,
            color : Cesium.Color.PALEGOLDENROD
        })
    }
});

var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
//中心點
var center = new Cesium.Cartesian3();

//機身模型的偏移引數
var hpRoll = new Cesium.HeadingPitchRoll();
//相機模型的偏移引數
var hpRange = new Cesium.HeadingPitchRange();

var speed = 10;
//預設按一下偏移3度
var deltaRadians = Cesium.Math.toRadians(3.0);

//飛機位置
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
//速度向量
var speedVector = new Cesium.Cartesian3();
//生成一個由兩個參考系生成的矩陣
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');

//新增模型
var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
    //這裡需要把模型路徑改下(如果你用的還是HelloWord.html的話就用這個,不是的話請自行修改)
    url : '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
    modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
    minimumPixelSize : 128
}));

//動畫播放
planePrimitive.readyPromise.then(function(model) {
    // 以半速迴圈動畫
    model.activeAnimations.addAll({
        speedup : 0.5,
        loop : Cesium.ModelAnimationLoop.REPEAT
    });

    //r=2*max(模型的半徑，相機的最近距離)
    r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    //鏡頭最近距離
    controller.minimumZoomDistance = r * 0.5;
    //計算center位置(也為下面的鏡頭跟隨提供了center位置)
    Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
    //相機偏移角度
    var heading = Cesium.Math.toRadians(230.0);
    var pitch = Cesium.Math.toRadians(-20.0);
    hpRange.heading = heading;
    hpRange.pitch = pitch;
    hpRange.range = r * 50.0;
    //固定相機
    camera.lookAt(center, hpRange);
});

//鍵盤監聽
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 40:
            if (e.shiftKey) {
                // 按住shift加下箭頭減速
                speed = Math.max(--speed, 1);
            } else {
                // 直接按下箭頭降低角度
                hpRoll.pitch -= deltaRadians;
                if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
                    hpRoll.pitch += Cesium.Math.TWO_PI;
                }
            }
            break;
        case 38:
            if (e.shiftKey) {
                // 按住shift加上箭頭加速
                speed = Math.min(++speed, 100);
            } else {
                // 直接按上箭頭擡高角度
                hpRoll.pitch += deltaRadians;
                if (hpRoll.pitch > Cesium.Math.TWO_PI) {
                    hpRoll.pitch -= Cesium.Math.TWO_PI;
                }
            }
            break;
        case 39:
            if (e.shiftKey) {
                // 飛機本身向右旋轉
                hpRoll.roll += deltaRadians;
                if (hpRoll.roll > Cesium.Math.TWO_PI) {
                    hpRoll.roll -= Cesium.Math.TWO_PI;
                }
            } else {
                // 向右飛行
                hpRoll.heading += deltaRadians;
                if (hpRoll.heading > Cesium.Math.TWO_PI) {
                    hpRoll.heading -= Cesium.Math.TWO_PI;
                }
            }
            break;
        case 37:
            if (e.shiftKey) {
                // 飛機本身向左旋轉
                hpRoll.roll -= deltaRadians;
                if (hpRoll.roll < 0.0) {
                    hpRoll.roll += Cesium.Math.TWO_PI;
                }
            } else {
                // 向左飛行
                hpRoll.heading -= deltaRadians;
                if (hpRoll.heading < 0.0) {
                    hpRoll.heading += Cesium.Math.TWO_PI;
                }
            }
            break;
        default:
    }
});

var headingSpan = document.getElementById('heading');
var pitchSpan = document.getElementById('pitch');
var rollSpan = document.getElementById('roll');
var speedSpan = document.getElementById('speed');
var fromBehind = document.getElementById('fromBehind');

//給左邊的通知欄更新資料同時重新整理飛機位置(這裡也是個1ms一次的回撥)
viewer.scene.preRender.addEventListener(function(scene, time) {
    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
    speedSpan.innerHTML = speed.toFixed(1);

    //選擇的笛卡爾分量Cartesian3.UNIT_X（x軸單位長度）乘以一個標量speed/10，得到速度向量speedVector
    speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
    //飛機的模型矩陣與速度向量speedVector相乘，得到position
    position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
    //新增一個路徑模型(就是白色的尾氣)
    pathPosition.addSample(Cesium.JulianDate.now(), position);
    //飛機位置+旋轉角度+地球+座標矩陣=飛機模型矩陣
    Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, planePrimitive.modelMatrix);

    if (fromBehind.checked) {
        // 鏡頭跟隨
        Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, planePrimitive.boundingSphere.center, center);
        hpRange.heading = hpRoll.heading;
        hpRange.pitch = hpRoll.pitch;
        camera.lookAt(center, hpRange);
    }
});

如上就是這個Demo的原始碼了，具體執行我就不展示了（csdn上傳不了這麼大的gif），還是很有趣的

我覺得註釋已經很詳細了，就不多說了，不清楚或者發現錯誤的請留言，大家一起學習

相關推薦

Cesium學習筆記（七）：Demo學習（自由控制飛行的飛機）[轉]

https://blog.csdn.net/umgsoil/article/details/74923013# 這是官方的教程Demo，名字叫Use HeadingPitchRoll，顧名思義，就是教你用HeadingPitchRoll這個方法的，下面我們就來看一看這個Demo首先先說一下，這個Demo是沙

Cesium學習筆記（七）：Demo學習（自由控制飛行的飛機）

這是官方的教程Demo，名字叫Use HeadingPitchRoll，顧名思義，就是教你用HeadingPitchRoll這個方法的，下面我們就來看一看這個Demo 首先先說一下，這個Demo是沙盒裡面的，所以如果你想在本地執行的話需要改一下html

Cesium學習筆記（八）：Demo學習(差值器)

這個Demo是官方Demo中的Interpolation（差值器），不過我更喜歡叫它轉圈的飛機o(￣ε￣*) 這個Demo看上去就是一個飛機在繞著一個圈在飛，你可以通過切換差值器看效果 話說這個Demo困擾了我好久，我一直以為這個飛機飛行是自己畫出來

Linux學習筆記第七周一次課（3月19日）

w vmstat top sar nload 10.1 使用w查看系統負載10.2 vmstat命令顯示狀態，每一秒一次，共5次，命令為#vmstat 1 5r，run表示運行；b，block表示阻塞,阻止；swpd，虛擬內存，若這個值大於0，表示內存不夠用；si磁盤輸入虛擬內存；so虛擬

Linux學習筆記第七周三次課（3月21日）

iptables netfilter INPUT OUTPUT ifconfig 10.11 Linux網絡相關ifconfig -a可以顯示禁止或down掉的網卡；啟動網卡#ifup ens33；禁掉網卡#ifdown ens33；網卡配置文件 /etc/sysconfig/networ

Linux學習筆記第七周五次課（3月23日）

iptables-save iptables-restore systemctl firewalld firewall-cmd 10.19 iptables規則備份和恢復備份保存，#iptables-save > ipt.txt恢復， #iptables-restore <

吳恩達機器學習筆記 —— 19 應用舉例：照片OCR（光學字符識別）

參考 https ocr 噪聲 也說 字符 www. 定位 cnblogs http://www.cnblogs.com/xing901022/p/9374258.html 本章講述的是一個復雜的機器學習系統，通過它可以看到機器學習的系統是如何組裝起來的；另外也說明了一

吳恩達機器學習筆記 —— 19 應用舉例：照片OCR（光學字元識別）

本章講述的是一個複雜的機器學習系統，通過它可以看到機器學習的系統是如何組裝起來的；另外也說明了一個複雜的流水線系統如何定位瓶頸與分配資源。 OCR的問題就是根據圖片識別圖片中的文字： 這種OCR識別的問題可以理解成三個步驟： 文字檢測 字元切分 字元識別 文字檢測 文字的檢測可以用行人的檢測來做

機器學習筆記 第1課：機器學習中的資料

資料在機器學習中起著重要的作用。 在談論資料時，理解和使用正確的術語非常重要。 你如何看待資料？想想電子表格吧，有列、行和單元格。 從統計視角而言，機器學習的任務是在假設函式( f )的上下文中構建資料。這些假設函式由機器學習演算法通過學習建立。給定一些輸入變數( Input )，該函式回答

機器學習筆記 -吳恩達（第七章：邏輯迴歸，python實現 附原始碼）

（1）邏輯迴歸概念 1. 迴歸(Regression) 迴歸，我的理解來說，其直觀的理解就是擬合的意思。我們以線性迴歸為例子，在二維平面上有一系列紅色的點，我們想用一條直線來儘量擬合這些紅色的點，這就是線性迴歸。迴歸的本質就是我們的預測結果儘量貼近實際觀測的結果，或者說我們

Python爬蟲（入門+進階）學習筆記 3-1 爬蟲工程師進階（七）：HTTP請求分析

Chrome瀏覽器相對於其他的瀏覽器而言，DevTools（開發者工具）非常強大。這節課將為大家介紹怎麼利用Chrome瀏覽器的開發者工具進行HTTP請求分析Chrome瀏覽器講解Chrome 開發者工具是一套內置於Google Chrome中的Web開發和除錯工具，可用來對

樹莓派3學習筆記（7）：7寸（分辨率800 480）顯示器配置

樹莓派、顯示器配置樹莓派3學習筆記（7）：7寸（分辨率800 480）顯示器配置 樹莓派搭載分辨率為800X480的顯示器在顯示的時候可能會遇到無法全屏顯示的問題， 顯示器只有部分能夠顯示，有一部分是黑邊，對於這一種情況，我們只需進入系統的boot目錄，找到config.txt文件，或者直接在命

TypeScript學習筆記（九）：裝飾器（Decorators）

標註 時裝 als cal () 操作 enume 筆記 文檔 裝飾器簡介 裝飾器（Decorators）為我們在類的聲明及成員上通過元編程語法添加標註提供了一種方式。 需要註意的是：裝飾器是一項實驗性特性，在未來的版本中可能會發生改變。 若要啟用實驗性的裝飾器特性

開源容器openshift學習筆記（4）：新增Template（模板）

開篇之前如果沒有安裝openshift環境可以參考我的博文：centos7下安裝openshift 本系列部落格學習筆記參考《開源容器雲openshift》一書：下載連線：https://download.csdn.net/download/u012371097/10745382 部署容器應

javaweb學習筆記（四）：會話管理（1）

目錄 會話管理 1.概念 2.cookie技術 2.1 Cookie一般處理流程 2.2 Cookie類 會話管理 1.概念 一次會話： 開啟瀏覽器 -> 訪問一些伺服器內容 -> 關閉瀏覽器。（瀏覽器A給伺服器傳送請求，訪問web程式，該次會話就

《機器學習》 周志華學習筆記第七章 貝葉斯分類器（課後習題）python 實現

課後習題答案 1.試用極大似然法估算西瓜集3.0中前3個屬性的類條件概率。 好瓜有8個，壞瓜有9個 屬性色澤，根蒂，敲聲，因為是離散屬性，根據公式（7.17） P(色澤=青綠|好瓜=是) = 3/8 P(色澤=烏黑|好瓜=是) = 4/8 P(色澤=淺白|好瓜=是) =

Python學習（七）：生成器表示式（expr for iner_var in iterable if cond_expr）

列表解析：[expr for iter_var in iterable if cond_expr] 生成器表示式：(expr for iter_var in iterable if cond_expr)    J = 'aadsjnk' S = 'asadasbxjs

微信小程式——學習筆記（二）：邏輯層（1）

邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。 用App()函式註冊一個小程式。 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次） 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow 當小程式從前臺進入後臺，會觸發 onHide 當小程式發生指令碼錯

第七章：整合學習（利用AdaBoost元演算法...）

---恢復內容開始--- 　　整合學習其實不能算一個演算法，應該算是一種框架，集百家之長。整合演算法具體有Bagging與Boosting兩種大類。兩者區別： 　　1)Bagging是並行的，它就好比找男朋友，美女選擇擇偶物件的時候，會問幾個閨蜜（幾個演算法）的建議，最後選擇一個綜合得分最高的一個作為男朋

#資料結構與演算法學習筆記#劍指Offer29：整數中1出現的次數 + 分段思想/按位考慮 + 測試用例（Java、C/C++）

2018.10.5 感受到開學之後工作和課業的雙重壓力，加上近段時間自己出了點小事故，因此斷更了許久。沒事，繼續。 這道題有兩種複雜度為的演算法。 方法1：遞迴（分段思想）。 所有數字出現1的個數 = 每一段數字中出現1的個數之和 1. 對於輸出的數字n，其最高位為