Cesium导航

今天看到 Google Earth 上的导航栏，想起百度地图，高德地图，leaflet(插件)等等好像都有提供导航条，但是cesium官方包里面是没有的，于是上网搜了一下，果然有个大神实现了，名字就叫Cesium-navigation，github地址，有人翻译了这篇文章 翻译地址

看起来好像很简单，下面我们来试试怎么用：

1. 下载js文件

   可以在github上下载源码，自己编译,官方文档上有写

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

   这里我偷懒了，使用cnpm安装的,当然安装完也可以把它从node_modules中拷出来

   cnpm install cesium-navigation –save

2. 新建示例页面，引入js

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

3. 创建对象，官方提供了另种方式，一般使用viewer比较多，我们用viewer

       // 这句不解释了
   	var cesiumViewer = new Cesium.Viewer('cesiumContainer');
   
   	// extend our view by the cesium navigaton mixin
       options.enableCompass= true;            //罗盘
       options.enableZoomControls= false;      //缩放
       options.enableDistanceLegend= false;    //比例尺
       options.enableCompassOuterRing= true;   //指南针外环
       cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, options);
       //当然也可以使用默认的
   	cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, {});
   
       //获取对象
   	var cesiumNavigation = cesiumViewer.cesiumNavigation;
   

   刷新页面，发现。。。。。可以了，这就666了，如果使用requirejs，帮助里面也有说明，这里来补充一点东西：

• 返回按钮（放大缩小按钮中间的）可以自行飞向自定义经纬度坐标

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

• 默认的控件都放在左下角，如果想放在别的位置怎么办呢？ 这里提供一种方式，通过修改css

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

效果图：

参考源码