cesium-navigation导航插件

1、为什么需要cesium-navigation插件？

所有的Cesiumjs sdk 不包括罗盘，导航仪（放大/缩小）和距离刻度。您可以使用鼠标在地图上导航，但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是：将罗盘重置为指向北部，重置轨道，并将视图重置为默认边界。

2、如何使用？

1、安装cesium-navigation-es6依赖包

npm install cesium-navigation-es6 --save

2、使用cesium-navigation-es6

<template>
  <div id="cesiumContainer"></div>
</template>

<script type="text/javascript">
  import Cesium from "cesium/Cesium";
  import "cesium/Widgets/widgets.css";
  import CesiumNavigation from "cesium-navigation-es6";

  var viewer = new Cesium.Viewer('cesiumContainer',{
                animation: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                infoBox: false,
                navigationInstructionsInitiallyVisible: false
  });

  var options = {};
  // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
  options.defaultResetView = Cesium.Cartographic.fromDegrees(110, 30, 2000000);
 // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
 options.enableCompass= true;
 // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。
 options.enableZoomControls= true;
   // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
 options.enableDistanceLegend= true;
 // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
 options.enableCompassOuterRing= true;

 CesiumNavigation(viewer, options);
</script>

3、效果

image.png