cesium 添加几何对象 entity primitive

AllBlue

已于 2024-04-25 17:17:31 修改

阅读量430

点赞数 10

分类专栏： cesium GIS 文章标签： cesium

于 2024-04-19 16:59:16 首次发布

本文链接：https://blog.csdn.net/AllBluefm/article/details/137968494

版权

cesium 同时被 2 个专栏收录

57 篇文章 2 订阅

订阅专栏

GIS

56 篇文章 2 订阅

订阅专栏

cesium添加集合对象，分别用entity和primitive的方式实现，只设置部分参数作为示例，其他详细参数请自行查阅api。

1、point

// point entity方式 add参数具体见Cesium.PointGraphics
viewer.entities.add({
    name: "point",
    position: Cesium.Cartesian3.fromDegrees(113.396241, 38.090767, 0.5),
    point: {
        color: Cesium.Color.fromCssColorString("#ff0000"),
        pixelSize: 10,
        outlineColor: Cesium.Color.fromCssColorString("#ffffff"),
        outlineWidth: 2,
    },
});

// point primitive方式 add参数具体见Cesium.PointPrimitive
let ppc = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
ppc.add({
    position: Cesium.Cartesian3.fromDegrees(113.3963, 38.090769),
    color: Cesium.Color.RED
});

// point primitive 以一个点为原点，其他点为相对位置的方式 add参数具体见Cesium.PointPrimitive
let ppc2 = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
let center = Cesium.Cartesian3.fromDegrees(113.3963, 38.090769);
ppc2.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
ppc2.add({
    position: new Cesium.Cartesian3(10, 10),
    color: Cesium.Color.GREEN
});

2、label

// label entity方式 add参数具体见Cesium.LabelGraphics
viewer.entities.add({
    name: "label",
    position: Cesium.Cartesian3.fromDegrees(113.196216, 38.19071, 0.5),
    label: {
        text: 'label',
        fillColor: Cesium.Color.fromCssColorString("#ff0000"),
        outlineColor: Cesium.Color.fromCssColorString("#ffffff"),
        outlineWidth: 2,
    },
});

// label primitive方式 add参数具体见Cesium.Label
let lc = viewer.scene.primitives.add(new Cesium.LabelCollection());
lc.add({
    position: Cesium.Cartesian3.fromDegrees(113.396299, 38.09071),
    text: 'label',
});

3、billboard

// billboard entity方式 add参数具体见Cesium.BillboardGraphics
viewer.entities.add({
    name: "billboard",
    position: Cesium.Cartesian3.fromDegrees(113.396121, 38.090739, 0.5),
    billboard: {
        image: './image/img.png'
    },
});

// billboard primitive方式 add参数具体见Cesium.Billboard
let bc = viewer.scene.primitives.add(new Cesium.BillboardCollection());
bc.add({
    position: Cesium.Cartesian3.fromDegrees(113.396062, 38.090721, 0.5),
    image: './image/img.png'
});

4、model

// model entity方式 add参数具体见Cesium.ModelGraphics
viewer.entities.add({
    name: "model",
    position: Cesium.Cartesian3.fromDegrees(113.395892, 38.090931, 0.5),
    model: {
        uri: './data/car.gltf'
    },
});

// model primitive方式 add参数具体见Cesium.Model
let modelPosition = Cesium.Cartesian3.fromDegrees(113.395897, 38.090866)
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(modelPosition);
// let modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(modelPosition, new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0)); // 设置模型的hpr
viewer.scene.primitives.add(
    Cesium.Model.fromGltf({
        url: './data/car.gltf',
        modelMatrix: modelMatrix,
    })
);

5、polyline

viewer.entities.add({
    name: 'polyline',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.396213, 38.090924,
            113.396411, 38.090929,
        ]),
        width: 5,
        material: Cesium.Color.RED
    }
});

// polyline primitive方式
let polylineInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.PolylineGeometry({
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.396504, 38.090943,
            113.396617, 38.090878,
        ]),
        width: 10
    }),
    vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
    attributes: {
        color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0, 0, 1.0)
    },
});
let polylinePrimitive = new Cesium.Primitive({
    geometryInstances: [polylineInstance],
    appearance: new Cesium.PolylineColorAppearance({
        material: Cesium.Material.fromType('Color')
    })
})
viewer.scene.primitives.add(polylinePrimitive);

// polyline primitive方式 PolylineCollection方式 add参数具体见Cesium.Polyline
let plc = viewer.scene.primitives.add(new Cesium.PolylineCollection());
plc.add({
    name: 'fade material',
    positions: Cesium.PolylinePipeline.generateCartesianArc({
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.396757, 38.090978,
            113.397004, 38.090882,
        ])
    }),
    width: 5,
    material: Cesium.Material.fromType('Color')
});

6、polygon

// polygon entity方式 add参数具体见Cesium.PolygonGraphics
viewer.entities.add({
    name: "polygon",
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            113.396023, 38.090891,
            113.396012, 38.090827,
            113.396099, 38.090823,
            113.396115, 38.090891,
        ]),
        material: Cesium.Color.RED
    }
});

// polygon primitive方式
let polygonInstance = new Cesium.GeometryInstance({
    geometry: Cesium.PolygonGeometry.fromPositions({
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.395883, 38.09079,
            113.395876, 38.090738,
            113.395934, 38.09074,
            113.395928, 38.090797,
        ]),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    }
});
let primitive = new Cesium.Primitive({
    // geometryInstances: [polygonInstance],    // geometryInstances为数组时能合并GeometryInstance
    geometryInstances: polygonInstance,
    //绑定一起渲染，效率更高
    appearance: new Cesium.PerInstanceColorAppearance({
        closed: true,
        translucent: false
    })
});
viewer.scene.primitives.add(primitive);

7、rectangle

// rectangle entity方式 add参数具体见Cesium.RectangleGraphics
viewer.entities.add({
    name: 'rectangle',
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            113.396267, 38.090637,
            113.39638, 38.090646
        ),
        material: Cesium.Color.RED
    }
});

// rectangle primitive方式
let rectangleInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
        ellipsoid: Cesium.Ellipsoid.WGS84,
        rectangle: Cesium.Rectangle.fromDegrees(
            113.396491, 38.090647,
            113.396601, 38.090732
        ),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        offsetAttribute: Cesium.GeometryOffsetAttribute.TOP,
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 0.0, 0.5)),
    },
});
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [rectangleInstance],
    appearance: new Cesium.PerInstanceColorAppearance({
        closed: true,
    }),
    asynchronous: false,
}));

8、wall

// wall entity方式 add参数具体见Cesium.WallGraphics
viewer.entities.add({
    name: 'wall',
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.396205, 38.090866,
            113.396189, 38.090821,
            113.396272, 38.09082,
            113.396282, 38.090861,
        ]),
        minimumHeights: [0, 0, 0, 0],
        maximumHeights: [10, 10, 10, 10],
        material: Cesium.Color.YELLOW.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK
    }
});

// wall primitive方式
let wallInstance = new Cesium.GeometryInstance({
    geometry: Cesium.WallGeometry.fromConstantHeights({
        positions: Cesium.Cartesian3.fromDegreesArray([
            113.396508, 38.091044,
            113.39644, 38.090925,
            113.396657, 38.0909,
            113.396701, 38.091012
        ]),
        maximumHeight: 10,
        minimumHeight: 0,
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#00ff00')),
    },
});
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [wallInstance,],
    appearance: new Cesium.PerInstanceColorAppearance({
        translucent: false,
    }),
}));

9、ellipse

// ellipse entity方式 add参数具体见Cesium.EllipseGraphics
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.396486, 38.09097, 0.5),
    name: 'ellipse',
    ellipse: {
        semiMinorAxis: 10,
        semiMajorAxis: 10,
        height: 1,
        material: Cesium.Color.GREEN,
        outline: true
    }
});

// ellipse primitive方式
let circleInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(113.396359, 38.090767),
        radius: 6,
        height: 0
    }),
    attributes: {
        color: new Cesium.ColorGeometryInstanceAttribute(1, 0, 0, 1)
    },
});
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [circleInstance],
    appearance: new Cesium.PerInstanceColorAppearance()
}));