地球初始化

  1. let viewer = new Cesium.Viewer( 'cesiumContainer', {  
  2.     animation : false,//是否创建动画小器件，左下角仪表  
  3.     baseLayerPicker : false,//是否显示图层选择器  
  4.     fullscreenButton : false,//是否显示全屏按钮  
  5.     geocoder : false,//是否显示geocoder小器件，右上角查询按钮  
  6.     homeButton : false,//是否显示Home按钮  
  7.     infoBox : false,//是否显示信息框  
  8.     sceneModePicker : false,//是否显示3D/2D选择器  
  9.     selectionIndicator : false,//是否显示选取指示器组件  
  10.     timeline : false,//是否显示时间轴  
  11.     navigationHelpButton : false,//是否显示右上角的帮助按钮  
  12.     scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源  
  13.     clock : new Cesium.Clock(),//用于控制当前时间的时钟对象  
  14.     selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义  
  15.     imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组  
  16.     selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义  
  17.     terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组  
  18.     imageryProvider : new Cesium.OpenStreetMapImageryProvider( {  
  19.         credit :'',  
  20.         url : '//192.168.0.89:5539/planet-satellite/'  
  21.     } ),//图像图层提供者，仅baseLayerPicker设为false有意义  
  22.     terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义  
  23.     skyBox : new Cesium.SkyBox({  
  24.         sources : {  
  25.           positiveX : 'Cesium-1.7.1/Skybox/px.jpg',  
  26.           negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',  
  27.           positiveY : 'Cesium-1.7.1/Skybox/py.jpg',  
  28.           negativeY : 'Cesium-1.7.1/Skybox/my.jpg',  
  29.           positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',  
  30.           negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'  
  31.         }  
  32.     }),//用于渲染星空的SkyBox对象  
  33.     fullscreenElement : document.body,//全屏时渲染的HTML元素,  
  34.     useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true  
  35.     targetFrameRate : undefined,//使用默认render loop时的帧率  
  36.     showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息  
  37.     automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置  
  38.     contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）  
  39.     sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式  
  40.     mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系  
  41.     dataSources : new Cesium.DataSourceCollection()  
  42.     //需要进行可视化的数据源的集合  
  43. } );

隐藏底部文字信息

  1. .cesium-viewer-bottom {
  2.   display: none;
  3. }

去掉地球光圈

  1. const viewer = new Cesium.Viewer('cesiumContainer', {
  2.   // ...
  3.   skyAtmosphere: false,
  4. });

聚焦框和信息框的隐藏

默认情况下，如果左键双击 cesium地图上的实体内容，camera视角会自动聚焦过去，并显示自带的聚焦框以及实体的信息框，如下
image.png

默认不显示聚焦框和信息框

  1. const viewer = new Cesium.Viewer('cesiumContainer', {
  2.   // ...
  3.   selectionIndicator: false, // 隐藏聚焦框
  4.   infoBox: false, // 隐藏信息框
  5. });

取消默认的左键双击实体效果，便于自定义其他交互

  1. viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

视角转换

  1. viewer.scene.camera.flyTo({
  2.   destination: new Cesium.Cartesian3.fromDegrees(106.49673, 29.61736, 1500), // 经纬度，高度
  3.   orientation: {
  4.     heading: 0,
  5.     pitch: -0.52458664812464143,
  6.     roll: 2.0174972803488345e-11
  7.   },
  8.   duration: 2,
  9.   complete: () => {
  10.     // 飞行结束后执行逻辑
  11.   }
  12. });

geojson的加载使用

  1. const jsonUrl = '...'; // 你的 geojson 文件路径，可以是本地相对路径
  2. const mapJSON = Cesium.GeoJsonDataSource.load(jsonUrl, {
  3.   // 对 geojson 文件的初始配置，可在 https://cesium.com/docs/cesiumjs-ref-doc/GeoJsonDataSource.html 查看详情
  4. });
  5. viewer.dataSources.add(mapJSON); // 将其加载到地图上去
  6. mapJSON.then(entities => {
  7.   // entities 是该 geojson 内部所有实体的数组，可对实体进行属性变更的操作
  8.   entities.forEach(entity => {
  9.     entity.show = false; // 隐藏该实体
  10.   });
  11. });

针对高精度倾斜摄影加载及显示效果优化

倾斜摄影数据以 3dtile 的形式加载出来，通常情况下，只需要有 url 就足够了。以下参数是由于倾斜摄影数据总数据太大，清晰度过高，从而调节参数进行性能优化。这不是一个通用的解决方案，但可以以此为参考。

  1. const tileSetPromise = new Cesium.Cesium3DTileset({
  2.   url: '...', // 你的倾斜摄影服务发布地址
  3.   skipLevelOfDetail: true,
  4.   baseScreenSpaceError: 1024,
  5.   maximumScreenSpaceError: 256, // 数值加大，能让最终成像变模糊
  6.   skipScreenSpaceErrorFactor: 16,
  7.   skipLevels: 1,
  8.   immediatelyLoadDesiredLevelOfDetail: false,
  9.   loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
  10.   cullWithChildrenBounds: true,
  11.   cullRequestsWhileMoving: true,
  12.   cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
  13.   preloadWhenHidden: true,
  14.   preferLeaves: true,
  15.   maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
  16.   progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
  17.   dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
  18.   dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先
  19.   dynamicScreenSpaceError: true // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋
  20. });
  21. tileSetPromise.readyPromise.then(tileSet => {
  22.   this.scene.primitives.add(tileSet); // 将倾斜摄影实体加载到地图上
  23.   this.changeHeight(tileSet, 310); // 将此 tileSet 提高 310 米
  24. });
  26. // 可通过此函数，来修改 tileSet 的高度
  27. function changeHeight(tileSet, height) {
  28.   height = Number(height);
  29.   if (isNaN(height)) { return; }
  30.   const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);
  31.   const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
  32.   const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
  33.   const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
  34.   tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
  35. }

限制camera高度的上下限

  1. viewer.scene.screenSpaceCameraController.maximumZoomDistance = 65000; // 相机高度的最大值设定为 65000 米
  2. viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000; // 相机高度的最小值设定为 1000 米

事件绑定

  1. const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  2. handler.setInputAction(movement => {
  3.   // movement.position 是一个 Cartesian2 对象，可以通过它拿到所点击的屏幕坐标
  4. }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 监听左键点击

通过Cartesian2获得经纬度的方式

  1. const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  2. handler.setInputAction(movement => {
  3.   const cartesian = this.scene.globe.pick(this.camera.getPickRay(movement.position), this.scene); // 获取空间坐标
  4.   const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  5.   const lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
  6.   const lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
  7. }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 监听左键点击

地图二三维转化

  1. // 地图转化为三维立体状态
  2. viewer.scene.morphTo3D(0);
  3. // 地图转化为二维平面状态
  4. viewer.scene.morphTo2D(0);