Scene

Scene在开发中也是较为频繁调用的 API，在开发中，我们可以借助该属性更改地球模型地图颜色和场景颜色，或是使用该类封装的地球事件等。Scene 是用来管理三维场景的各种对象实体的核心类

• golbe 球体

绘制 golbe 需要两样东西，一个是 地形高程信息、另一个是 影像图层（地图的表皮）。影像图层可以叠加多个，但是地形高程只能有一个。整个地形的绘制也是 渐进式 的，即视线看到的地方才会去渲染对应的地图，找到对应位置的地形影像贴上

• primitives 图元的集合

Primitive类 直译过来就是图元的意思，它是图元的一种，作用是用来绘制各种几何体，Primitive 主要由两部分组成：Geometry 和 Appearance，Geometry 主要定义了图元的几何结构，而 Appearance 主要负责图元的外观

Primitive 添加一个图元

    viewer.scene.primitives.add(new Cesium.Primitive({
        // 要渲染的几何实例
        geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
            })
        }),
        // 实例的外观 
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Stripe')
        })
    }));

• groundPrimitives 地面图元的集合

GroundPrimitive 是 Primitive 的拓展，简单理解就是贴地图元，可贴附在地形、模型上

    let ellipseInstance = new Cesium.GeometryInstance({
        geometry: new Cesium.EllipseGeometry({
            center: Cesium.Cartesian3.fromDegrees(119.57160055699248, 25.70102836786316),
            semiMinorAxis: 100.0,
            semiMajorAxis: 100.0
        }),
        id: 'ellipse',
        attributes: {
            color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
        }
    })
    scene.primitives.add(new Cesium.GroundPrimitive({
        geometryInstances: [ellipseInstance]
    }))

• 环境对象

skyBox 天空盒

天空盒是由六张图片按一定的规则平成的一个正方体组成，地球位于正方体中心，由此，我们可以通过设置天空盒修改背景样式

• 修改背景图

1. 给地图容器添加背景图

<div id="myMap" style="background-image: url('./imgs/01.jpg');"></div>

2. 在初始化 Viewer 时设置渲染图片

    let viewer = new Cesium.Viewer('myMap', {
        selectionIndicator: true, // 是否显示选中地图元素标识控件
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        homeButton: false, // 是否显示主页控件
        fullscreenButton: false, // 是否显示全屏控件
        // 设置渲染
        orderIndependentTranslucency: false,
        contextOptions: {
            webgl: {
                alpha: true
            }
        }
    })

3. 屏蔽天空盒，设置背景颜色为透明

    viewer.scene.skyBox.show = false
    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)

sum 太阳