cesium 常见图形绘制

渲染geojson

// 加载 GeoJSON 数据
geoJsonDataSource.load('./json/gd.json', {
    stroke: Cesium.Color.RED,  // 线条颜色
    fill: Cesium.Color.BLUE,   // 填充颜色
    strokeWidth: 3             // 线宽
}).then(function() {
    // 添加已加载的 DataSource 到场景中
    viewer.dataSources.add(geoJsonDataSource);

    // 将视图定位到加载的数据
    viewer.zoomTo(geoJsonDataSource);
}).otherwise(function(error) {
    console.error('加载 GeoJSON 数据失败: ' + error);
});

二、渲染多边形

const drawPoly = ()=>{
    // 定义多边形的顶点坐标
    var positions = Cesium.Cartesian3.fromDegreesArray([
        112.1, 23.1,
        113.0, 23.1,
        113.0, 23.6,
        112.1, 23.6
    ]);

    // 创建多边形的几何信息
    var polygonGeometry = new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(positions),
        height: 0 // 多边形的高度
    });

    // 创建多边形的Primitive
    var polygonPrimitive = new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
            geometry: polygonGeometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
            }
        }),
        appearance: new Cesium.PerInstanceColorAppearance({
            closed: true // 指定多边形为封闭的
        })
    });

    // 添加多边形的Primitive到场景中
    viewer.scene.primitives.add(polygonPrimitive);

    // 将视图定位到多边形
    viewer.zoomTo(polygonPrimitive);
}