Codes►前端

00 Cesium

00 Cesium

常用 api

Cesium 是一个功能强大的 3D 地球可视化引擎，提供了丰富的 API 用于开发各种地理信息系统（GIS）应用。以下是一些常用 API 的介绍和示例代码，帮助你快速上手。

1. 初始化 Cesium Viewer

这是使用 Cesium 的第一步，用于创建一个 3D 地球视图。

1
2
3
4
5
6
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(), // 启用地形
    imageryProvider: Cesium.createWorldImagery(), // 启用影像
    scene3DOnly: true, // 仅使用 3D 场景
    shouldAnimate: true // 自动动画
});

2. 添加实体（Entity）

实体是 Cesium 中用于表示地理对象的基本单位，可以是点、线、面等。

1
2
3
4
5
6
7
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    point: {
        pixelSize: 10, // 点的大小
        color: Cesium.Color.RED // 点的颜色
    }
});

3. 添加多段线（Polyline）

用于绘制连接多个点的线条，常用于路径规划或连接线。

1
2
3
4
5
6
7
8
9
10
viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            -123.0744619, 44.0503706,
            -123.0744619, 44.0503706
        ]),
        width: 5, // 线宽
        material: Cesium.Color.BLUE // 线的颜色
    }
});

4. 添加多边形（Polygon）

用于绘制多边形区域，例如国家边界或地理区域。

1
2
3
4
5
6
7
8
9
10
viewer.entities.add({
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -123.0744619, 44.0503706,
            -123.0744619, 44.0503706,
            -123.0744619, 44.0503706
        ]),
        material: Cesium.Color.RED.withAlpha(0.5) // 半透明颜色
    }
});

5. 添加标签（Label）

用于在地图上显示文本标签。

1
2
3
4
5
6
7
8
9
10
11
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    label: {
        text: 'Hello Cesium!',
        font: '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9)
    }
});

6. 添加模型（Model）

用于加载 3D 模型，例如建筑物、飞机等。

1
2
3
4
5
6
7
8
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model: {
        uri: 'path/to/model.glb', // 模型文件路径
        scale: 1.0, // 模型缩放比例
        minimumPixelSize: 128 // 最小像素大小
    }
});

7. 设置相机（Camera）

用于控制视图的视角和位置。

1
2
3
4
5
6
7
8
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 500000), // 飞往指定位置
    orientation: {
        heading: Cesium.Math.toRadians(0), // 方向
        pitch: Cesium.Math.toRadians(-90), // 倾斜角度
        roll: 0.0 // 滚动角度
    }
});

8. 事件监听

用于监听用户的交互事件，例如鼠标点击。

1
2
3
4
5
6
viewer.screenSpaceEventHandler.setInputAction(function(event) {
    var picked = viewer.scene.pick(event.position);
    if (Cesium.defined(picked)) {
        console.log('点击了对象:', picked);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

9. 时间动态效果

用于控制时间轴和动态效果。

1
2
3
4
5
6
viewer.clock.multiplier = 10; // 设置时间加速倍数
viewer.clock.startTime = Cesium.JulianDate.now(); // 设置开始时间
viewer.clock.currentTime = Cesium.JulianDate.now(); // 设置当前时间
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), 60, new Cesium.JulianDate()); // 设置结束时间
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // 设置时间步进
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 设置时间范围

10. 加载外部数据

例如加载 GeoJSON 数据。

1
2
3
4
5
6
7
var geoJsonDataSource = new Cesium.GeoJsonDataSource.load('path/to/geojson.json', {
    stroke: Cesium.Color.RED,
    fill: Cesium.Color.BLUE,
    strokeWidth: 3
}).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
});

11. 自定义材质（Material）

用于创建自定义的视觉效果，例如流动的线条。

1
2
3
4
5
6
7
8
9
10
11
12
13
var polyline = viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            -123.0744619, 44.0503706,
            -123.0744619, 44.0503706
        ]),
        width: 5,
        material: new Cesium.PolylineGlowMaterialProperty({
            color: Cesium.Color.BLUE,
            glowPower: 0.7
        })
    }
});

12. 动态更新实体

用于根据时间或其他条件动态更新实体的属性。

1
2
3
4
5
6
7
8
9
var entity = viewer.entities.add({
    position: new Cesium.CallbackProperty(function(time) {
        return Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
    }, false),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

13. 添加自定义控件

例如添加一个按钮来控制相机。

1
2
3
4
5
6
7
8
9
10
11
var button = document.createElement('button');
button.textContent = '飞往北京';
button.style.position = 'absolute';
button.style.top = '10px';
button.style.left = '10px';
document.body.appendChild(button);
button.addEventListener('click', function() {
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(116.397428, 39.90923)
    });
});

14. 加载地形和影像

用于加载高精度的地形和影像数据。

1
2
3
4
5
6
7
viewer.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask: true, // 请求水体掩模
    requestVertexNormals: true // 请求顶点法线
});
viewer.imageryProvider = Cesium.createWorldImagery({
    style: Cesium.IonWorldImageryStyle.LAND_OCEAN
});

15. 性能优化

例如限制帧率和减少渲染负载。

1
2
viewer.scene.maximumRenderTimeChange = 1000.0; // 设置最大渲染时间
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; // 禁用碰撞检测

这些 API 是 Cesium 中最常用的部分，通过它们可以实现大部分的 3D 地球可视化功能。如果你有更具体的需求，比如加载特定格式的数据或实现复杂的交互效果，可以进一步说明，我可以为你提供更详细的代码示例。