Bootstrap

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

一、线段

// 创建线段几何实例
const instance = new Cesium.GeometryInstance({
    id: "PolylineGeometry",
    geometry: new Cesium.PolylineGeometry({
        positions: Cesium.Cartesian3.fromDegreesArray([
            108.0, 31.0,
            100.0, 36.0,
            105.0, 39.0
        ]),
        width: 10.0,
    })
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PolylineMaterialAppearance({
        material: Cesium.Material.fromType('Color'),
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(108.0, 31.0, 13000000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间（单位是秒）
});

二、椭圆（圆形）

// 创建椭圆几何实例
const instance = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
        center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
        semiMinorAxis: 500000.0, // semiMinorAxis和semiMajorAxis值相等则为圆形
        semiMajorAxis: 1000000.0,
        rotation: Cesium.Math.PI_OVER_FOUR,
        vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
    }),
    id: "EllipseGeometry",
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType('Color')
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-100.0, 20.0, 4000000),
    orientation: {
        heading: Cesium.Math.toRadians(0), 
        pitch: Cesium.Math.toRadians(-90), 
        roll: 0                      
    },
    duration: 2.0  // 飞行动画的持续时间（单位是秒）
});

三、圆形（圆柱）

// 创建圆形几何实例
const instance = new Cesium.GeometryInstance({
    id: "CircleGeometry",
    geometry: new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        radius: 100000.0,
        extrudedHeight: 20000 // 圆形高度，形成圆柱
    })
});


// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color'),
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 2000000),
    orientation: {
        heading: Cesium.Math.toRadians(0),   
        pitch: Cesium.Math.toRadians(-90),    
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间（单位是秒）
});

四、连廊

// 创建连廊几何实例
const instance = new Cesium.GeometryInstance({
    id: "CorridorGeometry",
    geometry: new Cesium.CorridorGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        positions: Cesium.Cartesian3.fromDegreesArray([-72.0, 40.0, -70.0, 35.0, -68.0, 38.0]),
        width: 100000,
        extrudedHeight: 1000
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-72.0, 40.0, 1800000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间（单位是秒）
});

 五、圆柱（圆锥）

// 创建圆柱/圆锥几何实例
const instance = new Cesium.GeometryInstance({
    id: "CorridorGeometry",
    geometry: new Cesium.CylinderGeometry({
        length: 20000,    // 圆柱体的长度
        topRadius: 20000,  // 顶部半径， 值为0即为圆柱
        bottomRadius: 20000,  // 底部半径
        vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL // 指定顶点格式，包括位置和法线
    }),
    modelMatrix: Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 10000.0)), // 圆柱体的位置
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType('Color', {
            color: Cesium.Color.RED // 圆柱体的颜色
        })
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

六、矩形

// 创建矩形几何实例
const instance = new Cesium.GeometryInstance({
    id: "RectangleGeometry",
    geometry: new Cesium.RectangleGeometry({
        ellipsoid: Cesium.Ellipsoid.WGS84,
        rectangle: Cesium.Rectangle.fromDegrees(-80.0, 39.0, -74.0, 42.0),
        height: 10000.0
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

七、墙

// 创建墙体几何实例
const instance = new Cesium.GeometryInstance({
    id: "WallGeometry",
    geometry: new Cesium.WallGeometry({
        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
        ])
    }),
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color', {
            color: Cesium.Color.BLUE
        }),
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

八、多边形

// 创建多边形几何实例
const instance = new Cesium.GeometryInstance({
    id: "PolygonGeometry",
    geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
                -72.0, 40.0,
                -70.0, 35.0,
                -75.0, 30.0,
                -70.0, 30.0,
                -68.0, 40.0
            ])
        )
    }),
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color', {
            color: Cesium.Color.BLUE
        }),
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

九、 盒子

// 创建盒子几何实例
const instance = new Cesium.GeometryInstance({
    id: "BoxGeometry",
    geometry: new Cesium.BoxGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        maximum: new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
        minimum: new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 0.0)), // 立方体的位置和方向
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

 十、 球体

// 创建球形几何实例
const instance = new Cesium.GeometryInstance({
    id: "SphereGeometry",
    geometry: new Cesium.SphereGeometry({
        radius: 1000.0,
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    },
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 1000)), 
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)
// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 25000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间（单位是秒）
});

  十一、 椭球体

// 创建椭球形几何实例
const instance = new Cesium.GeometryInstance({
    id: "EllipsoidGeometry",
    geometry: new Cesium.EllipsoidGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        radii: new Cesium.Cartesian3(2000.0, 3000.0, 2000.0) // 椭球体在 x、y 和 z 方向上的半径
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    },
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 2000)),
});

// 根据几何实例创建图元
const primitive = new Cesium.Primitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});

// 将图元添加到集合
viewer.scene.primitives.add(primitive)

 十二、 添加移除

var collection = new Cesium.PrimitiveCollection();
collection.add(primitive) // 将图元添加到集合
viewer.scene.primitives.add(collection) // 将集合添加到primitives
collection.remove(primitive)  // 从集合中删除

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Netty入门，原理，源码解析与验证
[源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型
基于SpringBoot+MyBatis+MySQL+Vue实现的职称评审管理系统设计与实现（附源码+数据库+答辩PPT+毕业论文+项目部署视频教程+项目所需软件工具），强烈推荐！
FPGA面试笔记ea-ez
Vue知识点
[源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现
最新毕设-Python-乡村爱心儿童帮扶平台-43501（免费领项目）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、全套文案
caffe代码详细注解
虚拟化技术介绍
福昕高级PDF编辑器：专业可靠的文档处理工具（附安装包）
;