推薦：將 NSDT場景編輯器 加入你的3D開發(fā)工具鏈

今天看到 Google Earth 上的導(dǎo)航欄，想起百度地圖，高德地圖，leaflet(插件)等等好像都有提供導(dǎo)航條，但是cesium官方包里面是沒有的，于是上網(wǎng)搜了一下，果然有個(gè)大神實(shí)現(xiàn)了，名字就叫Cesium-navigation，github地址，有人翻譯了這篇文章 翻譯地址

看起來好像很簡單，下面我們來試試怎么用：

1. 下載js文件

可以在github上下載源碼，自己編譯,官方文檔上有寫

How to build it?
run npm install
run node build.js

這里我偷懶了，使用cnpm安裝的,當(dāng)然安裝完也可以把它從node_modules中拷出來

cnpm install cesium-navigation –save

1. 新建示例頁面，引入js

    //必須先引入cesium
    <script src="path/to/Cesium.js"></script>
    src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>

1. 創(chuàng)建對象，官方提供了另種方式，一般使用viewer比較多，我們用viewer

    // 這句不解釋了
    var cesiumViewer = new Cesium.Viewer('cesiumContainer');    var options = {};    //兩種方式設(shè)置默認(rèn)視圖    options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14);    //options.defaultResetView = new Cesium.Cartographic(Cesium.Math.toRadians(114), Cesium.Math.toRadians(33), 500);

刷新頁面，發(fā)現(xiàn)。。。。?？梢粤?，這就666了，如果使用requirejs，幫助里面也有說明，這里來補(bǔ)充一點(diǎn)東西：

• 返回按鈕（放大縮小按鈕中間的）可以自行飛向自定義經(jīng)緯度坐標(biāo)

viewer.scene.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(101.88, 39.78,10000000)
          });

• 默認(rèn)的控件都放在左下角，如果想放在別的位置怎么辦呢？ 這里提供一種方式，通過修改css

<style>
    .compass {
        position: absolute;
        left: 0;
        top: 10px;
    }

    .navigation-controls {
        position: absolute;
        left: 30px;
        top: 120px;
        height: 90px;
    }
</style>

效果圖：

參考源碼