cesium 实现指南针及比例尺效果

静态资源:

<script type="text/javascript" src="../Build/CesiumUnminified/Cesium.js" nomodule></script>
  <script type="text/javascript" src="/emc/js/Cesium-1.64/viewerCesiumNavigationMixin.js"></script>
<style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>

viewerCesiumNavigationMixin.js文件资源地址：https://download.csdn.net/download/qq_26579715/12089560

html标签:

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

核心code:

var viewer = new Cesium.Viewer('cesiumContainer',{
	  animation:false,//隐藏动画器件
	  timeline:false,//隐藏时间轴
      homeButton:false,//隐藏视角返回初始位置
      geocoder:false,//隐藏查找位置工具
      sceneModePicker:false, //隐藏选择视角的模式
      baseLayerPicker:false, //隐藏图层选择器
      fullscreenButton:false,//隐藏全屏按钮
      navigationHelpButton:false //隐藏帮助按钮
  });
  
  viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
	              url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
	          }));
  
  viewer._cesiumWidget._creditContainer.style.display = "none";
  
  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;

 viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
 
 //视角定位中国上方
 viewer.camera.flyTo({
     destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
     duration: 8
   });

页面效果如下：