1 效果预览

2 实现原理

利用zoomTo方法，使摄像机镜头绕着某一点，不断更新水平方向head角度，即可实现效果

zoomTo(target,HeadingPitchRange) 方法有两个参数，一个是目标对象，一个是摄像机姿态，我们轮询更新摄像机姿态就可以实现动态效果

                                        
zoomTo(target: Entity | Entity[] | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise<Entity | Entity[] | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud>, offset?: HeadingPitchRange): Promise<boolean>;
    /**
     * Flies the camera to the provided entity, entities, or data source.
     * If the data source is still in the process of loading or the visualization is otherwise still loading,
     * this method waits for the data to be ready before performing the flight.
     *
     * <p>The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere.
     * The heading and the pitch angles are defined in the local east-north-up reference frame.
     * The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch
     * angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is
     * zero, a range will be computed such that the whole bounding sphere is visible.</p>
     *
     * <p>In 2D, there must be a top down view. The camera will be placed above the target looking down. The height above the
     * target will be the range. The heading will be determined from the offset. If the heading cannot be
     * determined from the offset, the heading will be north.</p>
     * @param target - The entity, array of entities, entity collection, data source, Cesium3DTileset, point cloud, or imagery layer to view. You can also pass a promise that resolves to one of the previously mentioned types.
     * @param [options] - Object with the following properties:
     * @param [options.duration = 3.0] - The duration of the flight in seconds.
     * @param [options.maximumHeight] - The maximum height at the peak of the flight.
     * @param [options.offset] - The offset from the target in the local east-north-up reference frame centered at the target.
     * @returns A Promise that resolves to true if the flight was successful or false if the target is not currently visualized in the scene or the flight was cancelled. //TODO: Cleanup entity mentions
     */
                                        
                                    

3 全部代码

                                        
/**
 * 绕点旋转
 */
import {
  Viewer,
  Color,
  Math as cesiumMath,
  Cartesian3,
  HeadingPitchRange,
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import viewOption from './viewerOption';

// 创建viewer
var V = new Viewer('gisContainer', viewOption);
// 删除标志
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display =
  'none';
// 添加实体
var entity = V.entities.add({
  position: Cartesian3.fromDegrees(114, 30),
  point: {
    color: Color.BLUE,
    pixelSize: 10
  }
});

let initialHeading = 0;
// 步长
let step = 0.05;
let setIntervalID = setInterval(intervalFn, step * 1000);
// 定义轮询函数
function intervalFn() {
  if (initialHeading > 360) {
    initialHeading = 0;
  }
  var offset = new HeadingPitchRange(
    cesiumMath.toRadians(initialHeading), // 水平方向的旋转角 0-360度
    -cesiumMath.toRadians(20),// 垂直平面俯仰角 // 0-90度
    10000  // 相机距离地球球心的距离
  );
  V.zoomTo(entity, offset);
  initialHeading += step;
}
                                        
                                    

其中viewoption文件，为了方便使用，单独整理并定义如下

                                        
import {
  Viewer,
  SceneMode,
  Color,
  ScreenSpaceEventHandler,
  Entity,
  DataSourceCollection,
  Clock,
  createDefaultImageryProviderViewModels,
  createDefaultTerrainProviderViewModels,
  EllipsoidTerrainProvider,
  WebMercatorProjection,
  ArcGisMapServerImageryProvider ,
  SceneTransforms,
  ScreenSpaceEventType,
  CesiumTerrainProvider,
  IonResource
} from 'cesium';
export default {
  animation: false, //是否创建动画小器件，左下角仪表
  baseLayerPicker: false, //是否显示图层选择器
  fullscreenButton: false, //是否显示全屏按钮
  geocoder: false, //是否显示geocoder小器件，右上角查询按钮
  homeButton: false, //是否显示Home按钮
  infoBox: false, //是否显示信息框
  sceneModePicker: false, //是否显示3D/2D选择器
  selectionIndicator: false, //是否显示选取指示器组件
  timeline: false, //是否显示时间轴
  navigationHelpButton: false, //是否显示右上角的帮助按钮
  scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
  clock: new Clock(), //用于控制当前时间的时钟对象
  selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
  imageryProviderViewModels: createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
  selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
  terrainProviderViewModels: createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
  imageryProvider:   new ArcGisMapServerImageryProvider({
    url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
}),
  // skyBox : new Cesium.SkyBox({
  //     sources : {
  //       positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
  //       negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
  //       positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
  //       negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
  //       positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
  //       negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
  //     }
  // }),//用于渲染星空的SkyBox对象
  fullscreenElement: document.body, //全屏时渲染的HTML元素,
  useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
  targetFrameRate: undefined, //使用默认render loop时的帧率
  showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
  automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
  contextOptions: undefined, //传递给Scene对象的上下文参数（scene.options）
  sceneMode: SceneMode.SCENE3D, //初始场景模式
  mapProjection: new WebMercatorProjection(), //地图投影体系
  dataSources: new DataSourceCollection()
};