【cesium】之Primitives创建实体

452 阅读1分钟

1.什么是Primitive

Primitive称为原图, 由两部分组成:几何形状(Geometry)和外观(Appearance)

面向图形开发人员的底层 API,具有更大的灵活性

2.使用Primitive API绘制基本图形

本篇主要介绍使用Primitive API绘制基本图形

参考文档

4-1 点Point

4-2 线Polyline

//=>创建线段几何实例
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  // 飞行动画的持续时间(单位是秒)
});

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

4-3 面Polygon

4-4 矩形Rectangle

4-5 椭圆Ellipse


//=>创建椭圆几何实例
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)

4-6 圆柱Cylinder

4-7 盒子Box

4-8 模型加载

4-9 标签Label