Cesium前端面试题及答案分享‌

1 Cesium中的3D Tiles技术是什么，‌以及它的作用是什么？‌

3D Tiles是一种用于高效地加载和显示大规模的3D地球数据的技术，‌可以将复杂的3D数据分层并进行高度优化。‌Cesium中的3D Tiles技术可以支持大规模的3D地球数据，‌包括城市、‌建筑、‌地形等，‌提高了数据的加载速度和显示效率。‌

const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/your/3d/tiles/tileset.json'
}));

2. CZML是什么，‌以及它用于描述什么样的场景？‌

CZML(Cesium Language)是一种描述和显示动态的地球场景的数据格式，‌它可以用于描述航班轨迹、‌气象数据、‌卫星运行轨迹等。‌CZML中可以包含实体的位置、‌速度、‌方向等信息，‌以及可视化效果的设置。‌

3. ImageryProvider在Cesium中的作用是什么？‌

ImageryProvider是Cesium中的一个数据提供器，‌用于提供地图和影像数据。‌它可以从多种来源获取数据，‌如Web Map Service(WMS)、‌Web Map Tile Service(WMTS)等，‌并在地球表面上显示出来。‌

4. 如何在Cesium中加载Polyline（‌线段）‌？‌

创建Polyline实体。‌
计算带有弧度效果的点集数组作为Polyline的positions属性参数。‌

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            -115.0, 37.0,
            -107.0, 33.0
        ]),
        width: 5,
        material: Cesium.Color.RED.withAlpha(0.5)
    }
});

5. 如何设置Polyline的动效材质？‌

创建Cesium自定义材质类。‌
创建shader，‌原理是通过贴图UV移动来实现流光效果。‌

6. 如何在Cesium地球上添加柱状图？‌

创建entity实体，‌使用box属性。‌
设置dimensions长宽。‌
设置position中心点位置。‌
设置heightReference属性为贴地。‌
‌代码示例‌：‌

viewer.entities.add({
    box: {
        dimensions: new Cesium.Cartesian3(100000.0, 300000.0, 50000.0),
        material: Cesium.Color.BLUE.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK
    },
    position: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 0),
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
});

7. 如何让柱状图跟随数据变化？‌

创建SampledPositionProperty对象。‌
在不同的时间点绑定对应的值，‌将填充好的SampledPositionProperty赋值给dimensions，‌实现位置随时间的偏移。‌

8. 如何加载天气图效果？‌

使用Wind3D类实现，‌原理是将nc格式的数据解析之后运用primitive绘制。‌
参考Cesium官网GitHub上的分享案例，‌并修改鼠标事件影响该类绘制时的显示隐藏。‌

9. 如何给Cesium地球替换表面图层？‌

在viewer的imageryLayers地图层级内对单独的layer图层的显示隐藏或添加与移除。‌
使用imageryLayers的add与remove方法。‌

viewer.imageryLayers.addImageryProvider(layerProvider, 1); // 添加图层
viewer.imageryLayers.remove(viewer.imageryLayers.get(1), true); // 移除图层

10. Cesium如何进行坐标转换？‌

经纬度转屏幕坐标。‌
笛卡尔坐标转经纬度坐标。‌

// 经纬度转屏幕坐标
function lngLatToScreenCoordinates(lng, lat) {
    let cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat);
    let cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3);
    return cartesian2;
}

// 笛卡尔坐标转经纬度坐标
function cartesian3ToLngLat(cartesian) {
    let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
    let latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
    let longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
    return [parseFloat(longitude), parseFloat(latitude)];
}

11. Cesium中如何处理大规模数据的加载和显示性能问题？‌‌

处理大规模数据的加载和显示性能问题，‌Cesium提供了多种优化策略。‌首先，‌利用3D Tiles技术将大规模数据分层瓦片化，‌可以显著提高加载速度和渲染效率。‌其次，‌合理使用Level of Detail（‌LOD）‌技术，‌根据相机的距离动态加载不同细节层次的数据。‌此外，‌还可以利用WebGL的硬件加速特性，‌通过调整Cesium的渲染参数来优化性能。‌

‌12. 如何在Cesium中设置飞线动效材质？‌‌

设置飞线动效材质通常涉及自定义材质和着色器（‌Shader）‌。‌首先，‌创建一个Cesium自定义材质类，‌然后编写着色器代码，‌通过贴图UV移动来实现流光效果。‌

// 创建自定义材质
function createDynamicPolylineMaterial() {
    return new Cesium.Material({
        fabric: {
            type: 'Custom',
            uniforms: {
                time: function() {
                    return Cesium.JulianDate.now().getTotalSeconds();
                }
            },
            source: 'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
                    '{\n' +
                    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +
                    '    vec2 uv = materialInput.st;\n' +
                    '    uv.x += uniforms.time * 0.01; // 实现UV移动\n' +
                    '    material.diffuse = texture2D(materialInput.texture, uv).rgb;\n' +
                    '    return material;\n' +
                    '}'
        }
    });
}

// 创建Polyline实体并应用材质
viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            -115.0, 37.0,
            -107.0, 33.0
        ]),
        width: 5,
        material: createDynamicPolylineMaterial()
    }
});