Cesium开发小技巧(一)

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。

Cesium开发小技巧

1. HomeButton,初始坐标设置

在开发的过程中,发现初始加载Cesium的Demo。其中的自带的HomeButton点击自动跳转的到美国,这对中国用户不太友好。
那么在开发中我们如何更改这个默认跳转位置呢,更改源代码:

 Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);//homebutton默认跳转位置

代码位置Cesium.js中大约十四万一千五百行左右,更改 camera的 Camera.DEFAULT_VIEW_RECTANGLE 属性。更改前面两个数值-经纬度坐标。


之后点击HomeButton就自动跳转中国地区。

  1. Cesium.Viewer是开发过程中经常用到的方法。但是其中的有许多属性控制页面的一些控件。这些控件在实际的开发过程中并不是很需要,有人想用CSS的样式控制(display:none),其实并不需要。了解Viewer的属性轻松控制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 : ''  
    } ),//图像图层提供者,仅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()  
    //需要进行可视化的数据源的集合  
} );  
posted @ 2019-04-11 19:43  宥_XWX  阅读(10)  评论(0编辑  收藏  举报  来源