1 效果预览

在鼠标移动和滚轮缩放时，实时获取鼠标的位置信息包括经纬度和高度，相机信息包括航向角、俯仰角和翻滚角

2 主要函数

（1）初始化viewer视图对象，通过document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';取消下面的cesium版本信息

                                        
var V = new Viewer('gisContainer', viewOption);
                                        
                                    

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()
};
                                        
                                    

（2） 定义屏幕空间事件监听器

                                        
var handler = new ScreenSpaceEventHandler(V.scene.canvas);
                                        
                                    

通过该监听器，可以创建各种交互事件处理函数

（3）监听鼠标移动和滚轮事件，获取鼠标的位置信息，包括经度，维度，高度

                                        
//设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
handler.setInputAction(function(movement) {
    //通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
    cartesian = V.camera.pickEllipsoid(movement.endPosition, ellipsoid);
    if (cartesian) {
        let lonlat=Cartesian3_to_WGS84(cartesian);
        longitudeString=parseFloat(lonlat.lng).toFixed(7);
        latitudeString=parseFloat(lonlat.lat).toFixed(7)
        //获取相机高度
        height = Math.ceil(V.camera.positionCartographic.height)/1000;
        statusContainer.innerHTML = `<div>
        <div>经度: ${longitudeString}° </div> 
        <div>维度: ${latitudeString}°</div>  
        <div>高度: ${height}千米</div>
        </div>`
    } else {
       console.log('cartesian坐标获取失败')
    }
}, ScreenSpaceEventType.MOUSE_MOVE);