cesium viewer属性说明

博客主要对Viewer属性进行说明,为信息技术领域相关内容,有助于了解Viewer属性相关知识。

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

Viewer属性说明

var viewer=new Cesium.Viewer("cesiumContainer",{
        animation : true,//是否创建动画小器件,左下角仪表    
        baseLayerPicker : false,//是否显示图层选择器    
        fullscreenButton : true,//是否显示全屏按钮    
        vrButton:true,  //是否显示vr按钮 右下角vr小图标
        geocoder : true,//是否显示geocoder小器件,右上角查询按钮以及最下方文字描述
        homeButton : true,//是否显示Home按钮 右上角小房子按钮
        infoBox : true,//是否显示信息框 点击时右上角出现的  
        sceneModePicker : true,//是否显示3D/2D选择器 当设置为true并且scene3DOnly属性为false时才显示   
        selectionIndicator : true,//是否显示选取指示器组件 点击时出现的    
        timeline : true,//是否显示正下方时间轴    
        navigationHelpButton : true,//是否显示右上角的帮助按钮    
        navigationInstructionsInitiallyVisible:true,//帮助按钮的具体内容是否默认显示
        scene3DOnly : true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源    
        shouldAnimate:true, //是否自动显示动画(下方时间轴是不是在走着)
        clockViewModel:new Cesium.ClockViewModel(new Cesium.Clock),//用于控制当前时间的时钟视图模型,如果不填,则会默认创建   
        // selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义    
        // imageryProviderViewModels : [],//可供BaseLayerPicker选择的图像图层ProviderViewModel数组    
        // selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义    
        // terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组    
        imageryProvider : new Cesium.UrlTemplateImageryProvider({
            url:'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&{x}&y={y}&z={z}&s=Gali'
        }),//图像图层提供者,仅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对象  分 上下左右前后六张图片构成盒子  
        skyAtmosphere:new Cesium.SkyAtmosphere(Cesium.Ellipsoid.WGS84),  //大气层,不设置时为默认值new Cesium.SkyAtmosphere(Cesium.Ellipsoid.WGS84),设置为false则关闭大气层效果
        fullscreenElement : document.body,//全屏时渲染的HTML元素,                                                                                                                                                                                            
        useDefaultRenderLoop : true,//如果需要控制渲染循环,则设为true,如果设置为false,则会停止自动渲染场景   
        targetFrameRate : 1000,//使用默认render loop时的帧率 (useDefaultRenderLoop 为true时的渲染频率(数值越大,越流畅)
        showRenderLoopErrors : true,//如果设为true,出现渲染时遇到的错误将在一个HTML面板中显示错误信息  
        useBrowserRecommendedResolution:true, //如果为true,则以浏览器建议的分辨率渲染并忽略window.devicePixelRatio
        automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置    
        // contextOptions : undefined,//传递给Scene对象的上下文参数(scene.options)    
        sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式  有3D或2D
        mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系 用于2d和赫仑不地图
        globe:new Cesium.Globe(Cesium.Ellipsoid.WGS84),  //场景中使用的地球,如果设置为false,则场景中不添加任何地球仪,默认为新建地球仪
        orderIndependentTranslucency:"", //如果为true并且配置支持它,则使用顺序无关的半透明性。
        // creditContainer:"",
        // creditViewport:"",
        // dataSources : new Cesium.DataSourceCollection(),  //需要进行可视化的数据源的集合    
      })   
<think>好的,我需要解决用户的问题:在Cesium中如何监听viewer对象的创建事件。首先,我需要确认用户的需求是什么。他们可能是在使用Cesium.js库进行3D地球可视化开发时,想要在viewer对象被创建后执行某些初始化操作,比如加载数据、绑定事件或者修改样式。这时候,监听创建事件就变得重要了。 接下来,我得回想Cesium的API结构。Cesiumviewer是通过实例化Cesium.Viewer类来创建的,通常是这样:var viewer = new Cesium.Viewer('containerId');。但问题在于,Cesium本身并没有直接提供监听viewer创建的事件。所以,用户可能需要一种间接的方法来实现这个监听。 可能的解决方案有几个方向。首先,用户可以直接在创建viewer之后立即调用需要的函数,这是最直接的方式,不需要事件监听。例如,在创建viewer后,直接执行初始化代码。这种方法简单,但可能不够灵活,特别是当创建过程分散在代码的不同部分时。 第二个方向是使用发布-订阅模式。可以创建一个全局的事件总线,当viewer被创建时触发一个自定义事件,其他部分的代码可以订阅这个事件。这需要引入事件处理库,比如EventEmitter,或者在Cesium应用中自己实现简单的事件系统。 第三个思路是使用Promise。将viewer的创建过程封装在一个Promise中,这样可以通过.then()方法在创建完成后执行回调函数。这对于异步操作特别有效,尤其是在viewer创建可能涉及异步加载资源的情况下。 另外,可能需要考虑Cesium的某些生命周期钩子。虽然Cesium本身没有提供viewer创建的事件,但也许有其他相关的事件可以利用,比如scene的渲染开始事件,但这可能与viewer的创建时机不完全一致。 然后,我需要验证这些方法的可行性。对于直接调用初始化函数的方法,确实有效,但缺乏灵活性。发布-订阅模式需要额外代码,但更解耦。Promise方法适合单次异步操作,但需要确保viewer的创建确实是异步的。 还需要考虑用户是否在框架中使用Cesium,比如Vue或React,因为这些框架可能有自己的状态管理或生命周期方法,可以在组件挂载后处理viewer的初始化。 另外,是否有其他隐藏的Cesium API可以监听viewer的创建?可能需要查阅Cesium的官方文档或社区讨论。例如,CesiumViewer构造函数是否会在创建时触发某个事件,或者在Viewer的某个属性变化时可以被监听。经过检查,Cesium.Viewer在创建时不会触发特定的事件,因此需要用户自己实现。 最后,总结几种方法,并给出示例代码,说明如何在不同情况下实现监听效果。同时,提醒用户注意代码的执行顺序和异步问题,确保监听器在viewer创建之前或之后正确注册。</think>在Cesium中监听viewer创建事件可通过以下方式实现: ### 一、直接初始化模式 在viewer对象创建后立即执行初始化代码: ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { animation: false, timeline: false }); // 在创建后直接调用初始化函数 initViewer(viewer); function initViewer(v) { v.scene.globe.enableLighting = true; console.log('Viewer初始化完成'); } ``` ### 二、事件总线模式(推荐) 使用事件派发机制实现监听: ```javascript // 创建事件总线 const eventBus = new Cesium.Event(); // 创建viewer时触发事件 function createViewer() { const viewer = new Cesium.Viewer('cesiumContainer'); eventBus.raiseEvent('viewerCreated', viewer); return viewer; } // 监听创建事件 eventBus.addEventListener('viewerCreated', viewer => { console.log('监听到viewer创建:', viewer); viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.39, 39.91)}); }); createViewer(); ``` ### 三、Promise异步模式 ```javascript let viewerPromise = new Promise(resolve => { const viewer = new Cesium.Viewer('cesiumContainer'); resolve(viewer); }); viewerPromise.then(viewer => { console.log('Viewer异步创建完成'); viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(120.0, 30.0, 500000) }); }); ``` ### 四、框架集成方案(以Vue为例) ```javascript // 在Vue组件中 export default { mounted() { this.viewer = new Cesium.Viewer(this.$el); this.$emit('viewer-created', this.viewer); }, beforeDestroy() { this.viewer.destroy(); } } ``` **注意事项:** 1. Cesium Viewer构造函数是同步操作,但资源加载是异步过程[^1] 2. 建议在`viewer.scene.initialized`事件中处理依赖场景初始化的操作 3. 使用TypeScript时可扩展Viewer类型声明: ```typescript declare module 'cesium' { interface Viewer { creationEvent: Cesium.Event; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值