Cesium入门教程：点、线、面、图片、文字和模型的添加方法

Cesium入门教程：点、线、面、图片、文字和模型的添加方法

引用

CSDN

1.

https://m.blog.csdn.net/m0_69112199/article/details/138123785

Cesium 是一个用于创建3D地球和地图的开源JavaScript库，广泛应用于地理信息系统（GIS）和虚拟地球应用中。本文将介绍如何在Cesium中添加点、线、面、图片、文字和模型等基本功能，帮助开发者快速掌握Cesium的基础使用方法。

1. 添加点

viewer.entities.add({
    name: '添加点',
    position: Cesium.Cartesian3.fromDegrees(data[0].lng, data[0].lat, 200),
    point: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 1.0), // 颜色
        pixelSize: 10, // 大小
        outlineColor: Cesium.Color.YELLOW, // 轮廓颜色
        outlineWidth: 2
    }
})

2. 添加线

viewer.entities.add({
    name: '添加线',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([117.04, 30.57, 117.99, 27.69]),
        width: 2,
        material: Cesium.Color.RED,
    }
})

3. 添加面

viewer.entities.add({
    name: '添加面',
    polygon: {
        hierarchy: { // 获取指定属性（positions，holes（图形内需要挖空的区域））
            positions: Cesium.Cartesian3.fromDegreesArray([
                120.9677706, 30.7985748,
                110.20, 34.55,
                120.20, 50.55
            ]),
            holes: [{
                positions: Cesium.Cartesian3.fromDegreesArray([
                    119, 32,
                    115, 34,
                    119, 40
                ])
            }]
        },
        width: 5,
        material: Cesium.Color.BLUE.withAlpha(0.4), // withAlpha透明度
    }
})

4. 添加文字

viewer.entities.add({
    name: '添加文字',
    position: Cesium.Cartesian3.fromDegrees(115, 34, 500),
    label: {
        text: 'cesium',
        font: '24px',
        fillColor: Cesium.Color.ORCHID
    }
})

5. 添加图片

viewer.entities.add({
    name: '添加图片',
    position: Cesium.Cartesian3.fromDegrees(119, 32, 500),
    billboard: {
        image: './Aircraft.png',
        scale: 0.1
    }
})

6. 添加模型

viewer.entities.add({
    name: '添加模型',
    position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 500),
    model: {
        uri: "./Cesium_Air.glb",
        minimumPixelSize: 128, // 最小的模型像素
        maximumScale: 20000, // 最大的模型像素
        runAnimations: true, // 是否显示动画
        clampAnimations: true, // 是否保持最后一针的动画
        // color: Cesium.Color.ORANGE, // 颜色
        // color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)), // 包含透明度的颜色
        // colorBlendMode: Cesium.ColorBlendMode['MIX'], // 常用的有三个HIGHLIGHT, REPLACE, MIX
        // colorBlendAmount: 0.1 // 这个属性必须是MIX混合属性才能生效, 见colorBlendMode
    }
})

结果展示

欢迎补充，一起进步。