Cesium初级开发教程之一:初始化地球场景

240 阅读2分钟

CSDN地址:blog.csdn.net/weixin_4397…

一、效果图 image.png 二、代码

        var viewer = new Cesium.Viewer( "cesiumContainer", {
            // baseLayer: Cesium.ImageryLayer.fromProviderAsync(
            //     Cesium.SingleTileImageryProvider.fromUrl(earthMap)),
            shouldAnimate: true,
            animation: true, // 动画小组件
            baseLayerPicker: true, // 底图组件,选择三维数字地球的底图(imagery and terrain)
            fullscreenButton: true, // 全屏组件
            geocoder: true, // 地理编码(搜索)组件
            homeButton: true, // 首页,点击之后将视图跳转到默认视角
            infoBox: false, // 信息框
            vrButton: false, // VR模式
            sceneModePicker: true, // 场景模式,切换2D、3D 和 Columbus View (CV) 模式。
            selectionIndicator: false, //是否显示选取指示器组件
            timeline: true, // 时间轴
            navigationHelpButton: false, // 帮助提示,如何操作数字地球。
            scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
            selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型,仅baseLayerPicker设为true有意义
            selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型,仅baseLayerPicker设为true有意义
            projectionPicker: false, //单按钮小部件,用于在透视和正投影之间进行切换
            terrain: Cesium.Terrain.fromWorldTerrain(),
            navigationInstructionsInitiallyVisible: false, // 如果最初应该看到导航说明,则为true;如果直到用户明确单击该按钮,则该提示不显示,否则为false。
            requestWaterMask: false, //水波纹效果
            requestRenderMode: false, //请求渲染模式
            fullscreenElement: document.body, //全屏时渲染的HTML元素,
            useDefaultRenderLoop: true, //如果需要控制渲染循环,则设为true
            targetFrameRate: undefined, //使用默认render loop时的帧率
            showRenderLoopErrors: true, //如果设为true,将在一个HTML面板中显示错误信息
            automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
            sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
            // mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
            dataSources: new Cesium.DataSourceCollection(),
            orderIndependentTranslucency: false,//如果为true,且设备支持,则使用与顺序无关的半透明性。
            contextOptions: {
                webgl: {
                    alpha: true,
                    depth: true,
                    stencil: true,
                    antialias: true,
                    premultipliedAlpha: true,
                    // 通过canvas.toDataURL()实现截图需要将该项设置为true
                    preserveDrawingBuffer: true,
                    failIfMajorPerformanceCaveat: true,
                },
                // requestWebgl1: true,
            },
        });
        viewer._cesiumWidget._creditContainer.style.display = "none"; // * 隐藏版权信息
        viewer.scene.globe.depthTestAgainstTerrain = false
        viewer.scene.debugShowFramesPerSecond = true
        window.viewer = viewer
        window.Cesium = Cesium

1、Cesium.Ion.defaultAccessToken 可以去Cesium ion官网申请token,可以连接Cesium服务器,如果初始化场景不出现地球,可以加上token后得到解决。

2、Cesium 1.102以上版本,默认使用webgl2,如果使用webgl1可以设置requestWebgl1: true。

3、初始化场景,建议将Cesium和viewer挂载在window下,以方便全局使用。