【Cesium】创建形状基础---点、线、面、矩形、柱体、连廊、墙等

原创已于 2023-12-04 16:38:58 修改 · 5.9k 阅读

43 ·

CC 4.0 BY-SA版权

wangzx

文章标签：

#前端 #javascript #webgl #cesium

于 2023-07-13 15:39:15 首次发布

Cesium 专栏收录该内容

19 篇文章

订阅专栏

该文详细介绍了如何使用Cesium进行3D场景中的点、线、面、矩形、走廊、球体、立方体、圆柱/圆锥体和墙体等几何体的创建，包括坐标定位、颜色、材质和尺寸等属性设置。

一、点创建

const entity = viewer.entities.add({
        id: 'point',
        name: "点",
        show: true,
        position: Cesium.Cartesian3.fromDegrees(108, 34, 20),
        point: {
            color: Cesium.Color.RED,
            pixelSize: 10,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,  // 无论如何缩放，标记点不被地形遮挡
        }
    })
    viewer.zoomTo(entity)

二、线创建

    const entity = viewer.entities.add({
        id: 'line',
        name: "线",
        show: true,
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                19.0, 48.0, 
                20.0, 48.0, 
                20.0, 47.0,
                19.0, 47.0, 
            ]),
            width:3,
            material: Cesium.Color.BLUE.withAlpha(0.5),
        }
    })
    viewer.zoomTo(entity)

三、面创建

// 创建矩形
    const entity = viewer.entities.add({
        id: 'polygon',
        name: "面",
        show: true,
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray([
                19.0, 47.0, 
                19.0, 48.0, 
                20.0, 48.0, 
                20.0, 47.0, 
            ]), //参数为四个角点坐标
            material: Cesium.Color.BLUE.withAlpha(0.5)
            
        }
    })
    viewer.zoomTo(entity)

四、矩形创建

    // 创建矩形
    const entity = viewer.entities.add({
        id:'rectangle',
        name:"矩形",
        show:true,
        rectangle:{
            coordinates: Cesium.Rectangle.fromDegrees(80.0, 30.0,100.0,35.0), //参数依次为为西经、南纬、东经和北纬度数
            material: new Cesium.ColorMaterialProperty(
                Cesium.Color.BLUE.withAlpha(0.5)
            ),
        }
    })
    viewer.zoomTo(entity) // 视角进入实体场景

五、走廊创建

const entity = viewer.entities.add({
        id: 'corridor',
        name: "连廊",
        show: true,
        corridor: {   
            positions: Cesium.Cartesian3.fromDegreesArray([
                100.0, 40.0,
                105.0, 40.0,
                105.0, 35.0
            ]),  // 参数为中心线坐标，起点、拐点、终点
            width: 100000,  //通道宽度
            material: new Cesium.ColorMaterialProperty(
                Cesium.Color.BLUE.withAlpha(0.5)
            ),
        }
    })
    viewer.zoomTo(entity)

六、球体创建

const redSphere = viewer.entities.add({
        name: "球体",
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        ellipsoid: {
            radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),   //x,y,z方向长度
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK,
        },
    });
    viewer.zoomTo(redSphere)

七、立方体创建

const blueBox = viewer.entities.add({
        name: "Blue box",
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0), 
        box: {
            dimensions: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
            material: Cesium.Color.BLUE.withAlpha(0.5),
        },
    });
    viewer.zoomTo(blueBox)

八、圆柱（圆锥）体创建

    const redCone = viewer.entities.add({
        name: "Red cone",
        position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0), //柱心位置
        cylinder: {
            length: 400000.0,  //圆柱体高度
            topRadius: 0.0,   // 顶面半径，与底面半径相等则为圆柱体
            bottomRadius: 200000.0, // 底面半径
            material: Cesium.Color.RED,
        },
    });
    viewer.zoomTo(redCone)

九、墙体创建

const entity = viewer.entities.add({
        id: 'wall',
        name: "墙",
        show: true,
        wall: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([ 
                19.0, 47.0, 10000.0,
                19.0, 48.0, 10000.0,
                20.0, 48.0, 10000.0,
                20.0, 47.0, 10000.0,
                19.0, 47.0, 10000.0
            ]),  // 墙体位置及高度
            material: Cesium.Color.BLUE.withAlpha(0.5)
            
        }
    })
    viewer.zoomTo(entity)