加载边界线方法（中国边界线）

加载别的边界线需要在load传入经纬度文件或者经纬度

 var datasource = viewer.dataSources.add(Cesium.GeoJsonDataSource.load("https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json"));
      viewer.zoomTo(datasource);

创建cesium导航栏组件

npm i cesium-navigation-es6

指北针 cesium-navigation-es6 插件

教程：

1.安装插件cesium-navigation-es6(当前版本3.0.5)

npm install cesium-navigation-es6 --save

2.找到插件目录下所有js文件,如下需更改地方 注意: 需要在以下文件中头部 import{......}from 'cesium' 更改为 import{......}from 'cesium/Cesium'

(1) dist/core下（loadView.js 、Utils.js）
(2)dist/viewModels下(DistanceLegendViewModel.js 、NavigationViewModel.js、ResetViewNavigationControl.js、UserInterfaceControl.js、ZoomNavigationControl.js)
​
(3)dist下(CesiumNavigation.js)

3.使用 在需要的位置引入

import CesiumNavigation from 'cesium-navigation-es6'

代码：

注意： 要在Rectangle前面加上cesium实例

  const options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
      options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
      // 用于启用或禁用罗盘。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;
​
      //修改重置视图的tooltip
      options.resetTooltip = "重置视图";
      //修改放大按钮的tooltip
      options.zoomInTooltip = "放大";
      //修改缩小按钮的tooltip
      options.zoomOutTooltip = "缩小";
​
      //如需自定义罗盘控件，请看下面的自定义罗盘控件
      new CesiumNavigation(viewer, options);

设置位置，大小

重设位置样式

在css样式文件中（在源文件）设置罗盘、比例尺和缩放控件的位置

/* 罗盘定位 */
​
.compass {
    position: absolute;
    left: 2%;
    top: 2%;
}
​
​
/* 比例尺位置 */
​
.distance-legend {
    position: absolute;
    right: 2%;
    bottom: 6%;
}
​
​
/* 缩放位置 */
​
.navigation-controls {
    position: absolute;
    bottom: 10%;
    right: 2%;
}
​
​