cesium 学习笔记（二）初始化Viewer以及相关参数

最新推荐文章于 2025-05-28 06:39:31 发布

_IT民工

最新推荐文章于 2025-05-28 06:39:31 发布

阅读量9.6k

点赞数 3

分类专栏： cesium 文章标签：地图 cesium

cesium 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Cesium JavaScript库来定制地图显示效果，包括去除版权信息、隐藏默认控件及设置初始视角等，提供了丰富的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果我们想要隐藏下方的版权信息，在 var viewer = new Cesium.Viewer('cesiumContainer'); 后面加上下面这句代码就可以实现啦~
viewer._cesiumWidget._creditContainer.style.display="none";

去掉版权信息后如下图，看起来清爽了许多~

仅仅一句代码我们就可以加载进来一个地球和各种地图，但是有很多功能可能是需要关闭或者开启的~

详细的设置可以参考如下，这部分内容我没有再去查API，而是直接引用了GISEarth的博客中的这部分说明，供大家参考。由于我不需要多余的按钮，所以我就把Cesium本来带的组件全部隐藏啦~

var viewer = new Cesium.Viewer( 'cesiumContainer', {    
    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 Cesium.Clock(),//用于控制当前时间的时钟对象    
    selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义    
    imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组    
    selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义    
    terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组    
    imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
        credit :'',    
        url : '//192.168.0.89:5539/planet-satellite/'    
    } ),//图像图层提供者，仅baseLayerPicker设为false有意义    
    terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义    
    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 : Cesium.SceneMode.SCENE3D,//初始场景模式    
    mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系    
    dataSources : new Cesium.DataSourceCollection()    
    //需要进行可视化的数据源的集合    
} );

对camera进行设置，我们就可以定义初始化时的镜头、视角~下面这段代码就是将镜头定位在经纬度为（111.07，39.05）的地方，高度为1万公里，下面的heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。

viewer.camera.setView({  
       destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),  
       orientation: {  
        heading : Cesium.Math.toRadians(0),  
        pitch : Cesium.Math.toRadians(-90),  
        roll : Cesium.Math.toRadians(0)                            
       }  
   });

最后得到的就是下图所示的效果，很多按钮都被隐藏了，打开时也不再是整个地球，而是只有我需要的这一小部分，这样子就更方便后面的操作啦~