Cesium-entity article

  • type of entity:

  1. Boxes:

  • code:

var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.BLUE
    }
});

All properties of box are queried in BoxGraphics in cesium api

  • Example:

  1. Circles and Ellipses

  • the code

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)
    }
});

All properties of ellipse query EllipseGraphics in cesium api

  • example

  1. Corridor

  • the code

var redCorridor = viewer.entities.add({
    name : 'Red corridor on surface with rounded corners',
    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)
    }
});

Corridor all properties in the cesium api query CorridorGraphics

  • example

  1. Cylinder and Cones

  • the code

var greenCylinder = viewer.entities.add({
    name : 'Green cylinder with black outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
    cylinder: {
        length : 400000.0,
        topRadius : 200000.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.GREEN.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.DARK_GREEN
    }
});

Cylinder all properties query CylinderGraphics in cesium api

  • example

  1. Polygons

  • the code

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    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
    }
});

All properties of polygon query PolygonGraphics in cesium api

  • example

  1. Polylines

  • the code

var redLine = viewer.entities.add({
    name : 'Red line on terrain',
    polyline: {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width: 5,
        material : Cesium.Color.RED,
        clampToGround : true
    }
});

All properties of polyline query PolylineGraphics in cesium api

  • example

  1. Polyline Volumes

  • the code

var redTube = viewer.entities.add({
    name : 'Red tube with rounded corners',
    polylineVolume: {
        positions : Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,
                                                        -85.0, 36.0,
                                                        -89.0, 36.0]),
        shape : computeCircle(60000.0),
        material : Cesium.Color.RED
    }
});

All properties of polylineVolume query PolylineVolumeGraphics in cesium api

  • example

  1. Rectangles

  • the code

var redRectangle = viewer.entities.add({
    name : 'Red translucent rectangle',
    rectangle: {
        coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
        material : Cesium.Color.RED.withAlpha(0.5)
    }
});

rectangle all properties in the cesium api query RectangleGraphics

  • example

  1. Spheres and Ellipsoids

  • the code

var blueEllipsoid = viewer.entities.add({
    name : 'Blue ellipsoid',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    ellipsoid: {
        radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
        material : Cesium.Color.BLUE
    }
});

All properties of ellipsoid are queried in cesium api EllipsoidGraphics

  • example

  1. Walls

  • the code

var greenWall = viewer.entities.add({
    name : 'Green wall from surface with outline',
    wall : {
        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,
        outline: true
    }
});

all properties of wall query WallGraphics in cesium api

  • example

Note: When you need to extrude the shape into a body, you need to set the extrudedHeight property. Suppose you set the height (height) to 1000 for the polygon, then the polygon surface will be 1000 meters away from the earth’s surface, and then set the extrudedHeight to 2000 to form a A polygon starting from a height of 1000 and ending at a height of 2000. The actual height of the polygon is 1000. If there is no height (height) attribute but the extrudedHeight is set to 2000, the default height (height) will be 0 to form a starting from height 0 to A polygon with a height of 2000 ends, and the actual height of the polygon is 2000.

  • Set material, frame

All geometric shapes use the same set of properties to control their appearance, the fill property is a Boolean value that specifies whether the interior is filled, and the outline property controls whether the shape’s edges are outlined. When fill is set to true, the material attribute determines the display effect of the model (filled material or color), currently, Entity shape and volume support colors, images, checkerboard (chessboard), stripe (stripes), and grid (grid) .

Examples of fill colors:

XXX.material = Cesium.Color.BLUE.withAlpha(0.5)

Fill image example:

XXX.material='XXX.jpg'

Fill checkerboard (chessboard) example:

XXX.material = new Cesium.CheckerboardMaterialProperty({
    evenColor : Cesium.Color.WHITE,//The first color on the board
    oddColor : Cesium.Color.BLACK, //The second color on the board
    repeat : new Cesium.Cartesian2(4, 4)//Cartesian2 specifies the number of repetitions of horizontal and vertical tiles
});

Fill stripe (stripe) example:

XXX.material = new Cesium.StripeMaterialProperty({
    evenColor : Cesium.Color.WHITE, //The first color of the strip
    oddColor : Cesium.Color.BLACK, //The second color of the strip
    repeat : 32, //number of repetitions
    offset:0, //offset
    //Stripe direction Cesium.StripeOrientation.HORIZONTAL or VERTICAL
    orientation: Cesium.StripeOrientation.HORIZONTAL
});

Fill grid (grid) example:

XXX.material = new Cesium.GridMaterialProperty({
    color : Cesium.Color.YELLOW,
    cellAlpha : 0.2, //alpha value (opacity) of each cell
    lineCount : new Cesium.Cartesian2(8, 8),//Specify the number of grid lines along each axis
    lineThickness : new Cesium.Cartesian2(2.0, 2.0),//Specify the thickness of the grid lines along each axis
    lineOffset:0 //Specify the offset of the grid lines along each axis.
});

example of outLines:

The outline does not have a corresponding material, but relies on two separate outlineColor and outlineWidth properties. outlineWidth is only available on non-Windows systems such as Android, iOS, Linux and OS X. On Windows, the outline width is always 1. This is due to limitations in the implementation of WebGL in all three major browser engines on Windows.

ellipse. fill = false;
ellipse. outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse. outlineWidth = 2.0;

Example of Polylines:

var entity = viewer.entities.add({
    polyline: {
    positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,-77.1, 35]),
    width: 5,
    material : Cesium.Color.RED
}});

Polyline Outline Example:

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth: 3,
    outlineColor : Cesium.Color.BLACK
});

Polyline Glow Example:

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,//Used to specify the luminous intensity, expressed as a percentage of the bus width
    color : Cesium.Color.BLUE,
    taperPower: 1 //Taper effect strength, the default is 1, the value is 0-1
});

  • track entity

//If you need to locate and then set the tracking entity, it must be used in the then method, otherwise the tracking will not take effect
viewer.zoomTo(XXentity).then(()=>{
    / / Set the tracking must have a position attribute
    XXentity.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
    //set up tracking
    viewer.trackedEntity = XXentity;
    //set cancel tracking
    viewer.trackedEntity = undefined;
});

  • management entity

add entity

var entity = new Cesium. Entity({
   id : 'entity's id'
});
viewer.entities.add(entity);
var entity = new Cesium. Entity();
entity.name = 'entityName';
var polygon = new Cesium. PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
polygon.hierarchy = Cesium.Cartesian3.fromDegreesArray([
            -109.080842,45.002073,
            -105.91517,45.002073,
            -104.058488,44.996596,
            -104.053011,43.002989,
            -104.053011,41.003906,
            -105.728954,40.998429,
            -107.919731,41.003906,
            -109.04798,40.998429,
            -111.047063,40.998429,
            -111.047063,42.000709,
            -111.047063,44.476286,
            -111.05254,45.002073]);
entity.polygon = polygon;
viewer.entities.add(entity);

Get entity by id

var entity = viewer.entities.getById('entity's id');

Get the entity, create it if it does not exist

var entity = viewer.entities.getOrCreateEntity('entity's id');

Update entity, when you need to update a large number of entities at once, queue the changes and trigger the event at the end, the performance is better, so you need to use the collectionChanged Event of EntityCollection

// After defining the viewer, add the following method, when the entity has added, removed, updated and other events, the following method will be triggered
//It will be called every time it is changed. If three entities are added, the output id is 1, id is 2, and id is 3
function onChanged(collection, added, removed, changed){
    var msg = 'id is';
    for(var i = 0; i < added. length; i ++ ) {
        msg + = '\\
' + added[i].id;
    }
    console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);
//Call viewer.entities.suspendEvents() before adding the first entity; suspend temporarily
//Call viewer.entities.resumeEvents() after adding the last entity; resume
//The above monitoring will output id is 1 2 3

  • pick up entity

//Bind click event
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
    pickEntity(event. position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

//scene.pick can only get one object, and it gets the topmost object. undefined if there is no object at the pick point
function pickEntity(windowPosition) {
    var picked = viewer. scene. pick(windowPosition);
    if (Cesium. defined(picked)) {
        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (id instanceof Cesium. Entity) {
            return id;
        }
    }
    return undefined;
};

//drillPick is different from Pick, Pick can only pick up one object, while drillPick can pick up multiple objects
//And drillPick can set the limit parameter, the limit parameter can control the number of objects to be acquired, and the exceeding ones will not be acquired
function drillPickEntities(windowPosition) {
    var i;
    var entity;
    var picked;
    var pickedPrimitives = viewer. scene. drillPick(windowPosition);
    var length = pickedPrimitives. length;
    var result = [];
    var hash = {};
    for (i = 0; i < length; i ++ ) {
        picked = pickedPrimitives[i];
        entity = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (entity instanceof Cesium.Entity & amp; & amp; !Cesium.defined(hash[entity.id])) {
            result. push(entity);
            hash[entity.id] = true;
        }
    }
    return result;
};

  • Points of InterestPoints, Billboards, and Labels

var viewer = new Cesium. Viewer('cesiumContainer');
var citizensBankPark = viewer.entities.add({
    name : 'Citizens Bank Park',
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    point : {
        pixelSize: 5,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth: 2
    },
    label: {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        pixelOffset : new Cesium. Cartesian2(0, -9)
    }
});

var citizensBankPark = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    billboard : {
        image : 'http://localhost:81/images/2015/02-02/Philadelphia_Phillies.png',
        width: 64,
        height: 64
    },
    label: {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin : Cesium.VerticalOrigin.TOP,
        pixelOffset : new Cesium. Cartesian2(0, 32)
    }
});

  • 3D Models

var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model: {
        uri: 'http://localhost:8011/mapdata/gltf/sample/CesiumAir/Cesium_Air.gltf'
    }
});
viewer.trackedEntity = entity;

heading (azimuth), pitch (inclination), and roll (rolling), etc. to control the model

var center = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium. Math. toRadians(45);
var pitch = Cesium. Math. toRadians(15);
var roll = Cesium. Math. toRadians(0);
var hpr = new Cesium. HeadingPitchRoll(heading, pitch, roll);
var quaternion = Cesium.Transforms.headingPitchRollQuaternion(center, hpr);

var entity = viewer.entities.add({
    position: center,
    model: {
        uri: 'http://localhost:8011/mapdata/gltf/sample/CesiumAir/Cesium_Air.gltf'
    },
    orientation : quaternion,
});