cesium入门(二)绘制形状

通过Entity添加形状

var viewer = new Cesium.Viewer('cesiumContainer');
var redEllipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    name : 'Red ellipse on surface',
    ellipse : {
        semiMinorAxis : 250000.0,
        semiMajorAxis : 400000.0,
        material : Cesium.Color.RED.withAlpha(0.5)
    }
});

var blueEllipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
    name : 'Blue translucent, rotated, and extruded ellipse with outline',
    ellipse : {
        semiMinorAxis : 150000.0,
        semiMajorAxis : 300000.0,
        extrudedHeight : 200000.0,
        rotation : Cesium.Math.toRadians(45),
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true
    }
});

viewer.zoomTo(viewer.entities);

效果图:
cesium入门(二)绘制形状_第1张图片

通过CZML来添加形状:

var czml = [{
    "id" : "document",
    "name" : "box",
    "version" : "1.0"
}, {
    "id" : "shape1",
    "name" : "Blue box",
    "position" : {
        "cartographicDegrees" : [-114.0, 40.0, 300000.0]
    },
    "box" : {
        "dimensions" : {
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [0, 0, 255, 255]
                }
            }
        }
    }
}, {
    "id" : "shape2",
    "name" : "Red box with black outline",
    "position" : {
        "cartographicDegrees" : [-107.0, 40.0, 300000.0]
    },
    "box" : {
        "dimensions" : {
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 0, 0, 128]
                }
            }
        },
        "outline" : true,
        "outlineColor" : {
            "rgba" : [0, 0, 0, 255]
        }
    }
}, {
    "id" : "shape3",
    "name" : "Yellow box outline",
    "position" : {
        "cartographicDegrees" : [-100.0, 40.0, 300000.0]
    },
    "box" : {
        "dimensions" : {
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "fill" : false,
        "outline" : true,
        "outlineColor" : {
            "rgba" : [255, 255, 0, 255]
        }
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

实际的形状官网上有全部形状,point,boxes,polygons,corridor等等。
cesium入门(二)绘制形状_第2张图片

你可能感兴趣的:(前端,cesium)