【Cesium 基础】Entity API_综合

相关示例

Cesium 提供绘制Entity的API接口如下,详情参看[1][2]

//api使用如下：添加一个点
let option= {
    position: Cesium.Cartesian3.fromDegrees(this.defaultPoint[0],this.defaultPoint[1]),point: {
    pixelSize: 10,color: Cesium.Color.YELLOW}}
this.viewer.entities.add(option)

更多entity使用

// BillboardGraphics billboard : {
    image : '../images/Cesium_Logo_overlay.png', // default: undefinedshow : true, // defaultpixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // defaulthorizontalOrigin : Cesium.HorizontalOrigin.CENTER, // defaultverticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTERscale : 2.0, // default: 1.0color : Cesium.Color.LIME, // default: WHITErotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0alignedAxis : Cesium.Cartesian3.ZERO, // defaultwidth : 100, // default: undefinedheight : 25 // default: undefined}// BoxGraphics box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.BLUE}
// CorridorGraphics corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([100.0,40.0,105.0,40.0,105.0,35.0]),width: 200000.0,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}
// CylinderGraphics cylinder: {
    length: 400000.0,topRadius: 200000.0,bottomRadius: 200000.0,material: Cesium.Color.GREEN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.DARK_GREEN}
// EllipseGraphics // circleellipse: {
    semiMinorAxis: 300000.0,semiMajorAxis: 300000.0,height: 200000.0,material: Cesium.Color.GREEN}// ellipse ellipse: {
    semiMinorAxis: 250000.0,semiMajorAxis: 400000.0,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}// EllipsoidGraphics ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),material: Cesium.Color.BLUE}
// LabelGraphics label: {
    id: "my label",text: "?? ???? ?????? \n ?????? ?????? ????"}
// ModelGraphics model: {
    uri: "/data/gltf/Spider.gltf",minimumPixelSize: 28,maximumScale: 200}
// PathGraphics // PolygonGraphics polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([115.0,37.0,115.0,32.0,107.0,33.0,102.0,31.0,102.0,35.0]),material: Cesium.Color.RED}
// PolylineGraphics 
polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([75, 35, 125, 35]),width: 5,material: Cesium.Color.RED}
// PolylineVolumeGraphics 
polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([85.0,32.0,85.0,36.0,89.0,36.0]),shape: this.computeCircle(60000.0),material: Cesium.Color.RED}
// RectangleGraphics rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}
// WallGraphicswall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([107.0,43.0,100000.0,97.0,43.0,100000.0,97.0,40.0,100000.0,107.0,40.0,100000.0,107.0,43.0,100000.0]),material: Cesium.Color.GREEN}

Entity中Property使用,参看[3][4]

SampledProperty

// //修改boxEntity 高度var property = new Cesium.SampledProperty(Cesium.Cartesian3);property.addSample(this.starttime,new Cesium.Cartesian3(100000.0, 100000.0, 200000.0));property.addSample(this.stoptime,new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));blueBox.box.dimensions = property;//修改颜色var colorProperty = new Cesium.SampledProperty(Cesium.Color);colorProperty.addSample(this.starttime, new Cesium.Color(0, 1, 0));colorProperty.addSample(this.stoptime, new Cesium.Color(0, 0, 1));blueBox.box.material = new Cesium.ColorMaterialProperty(colorProperty);

SampledPositionProperty 修改位置

 var property = new Cesium.SampledPositionProperty();property.addSample(this.starttime,Cesium.Cartesian3.fromDegrees(this.defaultPoint[0],this.defaultPoint[1],300000.0));property.addSample(this.stoptime,Cesium.Cartesian3.fromDegrees(this.defaultPoint[0] + 5,this.defaultPoint[1] + 5,300000.0)); blueBox.position = property;

CompositeProperty 多属性组合

  var sampledProperty = new Cesium.SampledProperty(Cesium.Cartesian3);sampledProperty.addSample(Cesium.JulianDate.fromIso8601("2019-03-01T00:00:00.00Z"),new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));sampledProperty.addSample(Cesium.JulianDate.fromIso8601("2019-03-02T00:00:00.00Z"),new Cesium.Cartesian3(400000.0, 300000.0, 400000.0));var ticProperty = new Cesium.TimeIntervalCollectionProperty();ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-02T00:00:00.00Z/2019-03-02T06:00:00.00Z",isStartIncluded: true,isStopIncluded: false,data: new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)}));ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-02T06:00:00.00Z/2019-03-04T12:00:00.00Z",isStartIncluded: true,isStopIncluded: false,data: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)}));ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-04T12:00:00.00Z/2019-03-04T18:00:00.00Z",isStartIncluded: true,isStopIncluded: false,data: new Cesium.Cartesian3(400000.0, 300000.0, 600000.0)}));ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-04T18:00:00.00Z/2019-03-05T23:00:00.00Z",isStartIncluded: true,isStopIncluded: true,data: new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)}));var compositeProperty = new Cesium.CompositeProperty();compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-01T00:00:00.00Z/2019-03-02T00:00:00.00Z",data: sampledProperty}));compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
    iso8601: "2019-03-02T00:00:00.00Z/2019-03-05T00:00:00.00Z",isStartIncluded: false,isStopIncluded: false,data: ticProperty})); blueBox.box.dimensions = compositeProperty;

参考资料
[1]https://cesiumjs.org/Cesium/Build/Documentation/Entity.html?classFilter=entity
[2]http://blog.sina.com.cn/s/blog_15e866bbe0102xqsx.html
[3]https://zhuanlan.zhihu.com/p/50534090
[4]http://cesium.xin/wordpress/archives/108.html

更多内容，欢迎关注公众号
seeling_GIS