Cesium learning notes (III) creating instances

First instance

Draw Wyoming with a rectangle （Wyoming） The scope of the ：

var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
    
  polygon : {
    
  	//hierarchy Define rectangular ring ,Cartesian3: Rectangular coordinates 
    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]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),//0.5: translucent 
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(wyoming);

Shape and solid

Draw a cube

var viewer = new Cesium.Viewer("cesiumContainer");

var blueBox = viewer.entities.add({
    
  name: "Blue box",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  box: {
    
    dimensions: new Cesium.Cartesian3(40000.0, 300000.0, 500000.0),// Modify the length, width and height 
    material: Cesium.Color.BLUE,
  },
});

var redBox = viewer.entities.add({
    
  name: "Red box with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  box: {
    
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

var outlineOnly = viewer.entities.add({
    
  name: "Yellow box outline",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
  box: {
    
    dimensions: new Cesium.Cartesian3(40000.0, 300000.0, 500000.0),
    fill: false,
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
  },
});

viewer.zoomTo(viewer.entities);

material Properties and outline attribute

material Property controls whether to fill the color ,outline Property controls whether the outline is drawn .

var entity = viewer.entities.add({
    
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    // ellipse 
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)// You can replace it here with a picture URL, The ellipse filling effect becomes the picture filling 
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

You can customize the hatch pattern , such as ：

• Checkerboard fill ：

var checkerBoard = viewer.entities.add({
    
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0),
  ellipse:{
    
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    // Custom checker fill ：
    material: new Cesium.CheckerboardMaterialProperty({
    
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      repeat: new Cesium.Cartesian2(4, 4),
    }),
  },
});

• Mesh fill

ellipse.material = new Cesium.GridMaterialProperty({
    
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,// transparency , And the above withAlpha The effect is the same 
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

cellAlpha=0.1(default)

cellAlpha=0.5

• outline
  outlineWidth Attribute in Windows The lower part of the system is fixed as 1, Do not modify .

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

• Polyline

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

var polyline = entity.polyline // 

You can also draw fluorescent polylines ：

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

Camera Control

Use viewer.zoomTo Command to view a specific entity , Or use viewer.flyTo Method to dynamically transfer the lens to a specific entity . These methods can be applied to entities 、 Set of entities 、 data source 、 Or an array of entities .
The camera angle of view is towards the north by default ,45 Degrees from the top , have access to HeadingPitchRange To modify the ：

var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

In the code above ,Math.toRadians() Convert degrees to radians .Cesium.HeadingPitchRange(heading, pitch, range) The first parameter in is the orientation angle , Facing north 0, Clockwise angle increases ; The second parameter is the pitch angle (pitch angle), The positive elevation angle represents the elevation above the plane , The negative elevation angle means that it is below the plane ; The third parameter is the viewing angle range .
zoomTo and flyTo The method is asynchronous , There is no guarantee that they will be completed before they return .

Sometimes , Especially when dealing with time dynamic data , We want the camera to remain in the center of the entity , Not on earth . This is by setting view . trackedentity To complete . The tracking entity needs to set the position .

wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

By way of viewer.trackedEntity Set to undefined Or double click next to the entity to cancel entity tracking , Or call zoomTo and flyTo You can also cancel entity tracking .

Managing Entities

EntitiesCollection Is an associative array used to manage and monitor a set of entities .viewer.entities It's just one. EntitiesCollection,EntitiesCollection contain add,remove,removeAll And so on .
Sometimes we need to update previously created entities . Each entity has a unique ID, We can specify this ID, Or the system automatically generates .

viewer.entities.add({
    
    id : 'uniqueId'
});

Use getById(unique ID) To get the entity , If it's time to ID non-existent , Then return to undefined.

var entity = viewer.entities.getById('uniqueId');

Use getOrCreateById(unique ID) To get the entity , If it's time to ID non-existent , Then create an entity .

var entity = viewer.entities.getOrCreateEntity('uniqueId');

Picking

/** * Returns the top-most entity at the provided window coordinates * or undefined if no entity is at that location. * * @param {Cartesian2} windowPosition The window coordinates. * @returns {Entity} The picked entity or undefined. */
function pickEntity(viewer, windowPosition) {
    
  var picked = viewer.scene.pick(windowPosition);
  if (defined(picked)) {
    
    var id = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (id instanceof Cesium.Entity) {
    
      return id;
    }
  }
  return undefined;
};

/** * Returns the list of entities at the provided window coordinates. * The entities are sorted front to back by their visual order. * * @param {Cartesian2} windowPosition The window coordinates. * @returns {Entity[]} The picked entities or undefined. */
function drillPickEntities(viewer, 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 &&
        !Cesium.defined(hash[entity.id])) {
    
      result.push(entity);
      hash[entity.id] = true;
    }
  }
  return result;
};

spot , Billboard , label

You can create graphic points or labels on the map .

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
    },
    /* Replace graphic points with billboard signs  billboard : { image : '//cesium.com/images/docs/tutorials/creating-entities/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.BOTTOM,
        pixelOffset : new Cesium.Cartesian2(0, -9)
    }
});

viewer.zoomTo(viewer.entities);

3D Model

load 3D Model

var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
    
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
    
    // add to 3D Model path 
        uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
    }
});
viewer.trackedEntity = entity;

The default model is upright and facing east , By modifying the Entity.orientation Property to change the orientation 、 Pitch angle 、 Rotation angle, etc .

var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
    
    position : position,
    orientation : orientation,
    model : {
    
        uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
    }
});
viewer.trackedEntity = entity;