Hello Everyone,
I have currently coded objects that move around the Earth. I would like to put a rectangle around my objects, however, I can not figure out how to code a rectangle(or polygon) to move with time. I also cannot figure out how to give a polygon an elevation. I do not want to put a square around an object on the Earth but rather the object is in the sky, like a satellite.
Any suggestions?
For moving a polygon around, I used references to other objects. The polygon will then use the objects you have coded around as its vertices. If you wanted to completely surround the objects, rather than use them as vertices the best way I can think of is to code transparent points with time-dynamic data and then use those points as references for the polygon.
To give a polygon elevation just set the perPositionHeight property to true.
An example of the syntax for writing references is:
[
{
“id”:“polygon”,
“polygon”:{
“positions”:{
“references”:[
“sat1#position”,“sat2#position”,“sat3#position”
]
}
}
}
]
``
Also remember if when you’re writing references for a polygon you have to have at least 3, which is the same requirement as writing normal positions.
So the position properties you set there are going to be tied in with some kind of object, which is referenced to by its id. For example, lets say you made a billboard with an id of “sat1” with your positions. The czml would look something like this:
[
{
“id”:“document”,
“name”:“simple”,
“version”:“1.0”
},
{
“id”:“sat1”,
“billboard”:{
“image” : “…/path/to/the/image.png”
}
},
{
“position” : {
“epoch” : “2012-08-04T16:00:00Z”,
“cartographicDegrees” : [
0,-95,35,422520,
1113,-95,35,422370,
2226,-100,50,422190,
3339,-110,60,422000,
4452,-120,70,421790,
5565,-120,80,421560,
]
}
}
]
``
Now in order to extract the positions as a reference, you would type it like I had in the previous example with “sat1#positions”. This tells Cesium to first find the object called sat1 and then pull out its positions property to use with the object that called the reference. Hopefully that makes more sense now?
For the perPositionHeight property it just goes within the “polygon” properties. A link to the documentation for it is here: https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-Content#polygonperpositionheight
An easy example is just:
[
{
“id”:“document”,
“name”:“simple”,
“version”:“1.0”
},
{
“id”:“polygon”,
“polygon”:{
“show” : true,
“material”:{
“solidColor”:{
“color”:{
“rgba” : [255, 0, 0, 255]
}
}
},
“fill” : true,
"perPositionHeight" : true,
“positions”:{
“cartesian” : [
2373800, 9665300, 8087700,
2573800, 9665300, 8087700,
2573800, 9465300, 8087700,
2373800, 9465300, 8087700
]
}
}
}
]
``
The other references should be other objects. So you could make “object2” and “object3”, to follow your naming scheme. You just need three unique objects to reference from. You don’t need to define a hole to have a polygon render, but its more about whether your use case calls for one or not. Since I don’t know your exact use case its hard to say if you need holes or not, just that they aren’t required for every polygon.
So the quotation mark thing takes a bit of an explanation. What I have using as examples is the notation for writing CZML files. In order to load one of these you have to add a CzmlDataSource and load it in. Examples for this can be found in the czml sandcastle example. The reason there are no quotes in the polygon example is because they are working directly with primitives. They both contain a lot of the same objects and properties, and an over-simplification is that they are two ways to do the same thing. Since you’re just starting off hopefully that will make sense, and once you gain more experience with Cesium you’ll be able to determine which route is better for what you want to do.
Personally I’ve worked much more with czml files, so I’m not going to be able to help much with the primitive’s syntax. Also in your references it should be “object1#positions”, “object2#positions”, object3#positions. Another good example to learn references from is the simple.czml file that gets included in the sample data folder. One of the sandcastle examples uses it, but I forget which one. Its a large file to work through, but its directly from the Cesium developers and a great reference file. I’ll include the file with this post as well.
simple.czml (250 KB)
The reason some of the objects in simple.czml don’t have three references is because they are not polygons. The minimum number of references is going to be different for each kind of object.
Also with the pictures you sent I think I have a much better idea of what you were trying to do. What I was trying to do was make a polygon between all your objects, rather than draw a rectangle around each individual one. I think the best way is to use the box outline geometry, and set the center as an object you have. You won’t need to use the references for this because we can call the position directly.
What the following code is doing is setting the z-dimension of the box to zero so you end up with a flat rectangle. I pulled this from the box outline geometry example in sandcastle and made slight modifications. To change the size of your rectangle, just edit the dimensions variable. The other place you might have to check the variable names is for the positionOnEllipsoid. Make sure the name of your data source matches and it has the correct id string. You can make a new box outline for each individual object, rather than needing three references.
// Draw the outline of a box.
var dimensions = new Cesium.Cartesian3(400000.0, 400000.0, 0.0);
// Box geometries are initially centered on the origin.
// We can use a model matrix to position the box on the
// globe surface.
var positionOnEllipsoid = czmlDataSource.entities.getById(“object1”).position.getValue(viewer.clock.currentTime);
var boxModelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, dimensions.z * 0.5), new Cesium.Matrix4());
// Create a box outline geometry.
var boxOutlineGeometry = Cesium.BoxOutlineGeometry.fromDimensions({
dimensions : dimensions
});
// Create a geometry instance using the geometry
// and model matrix created above.
var boxOutlineInstance = new Cesium.GeometryInstance({
geometry : boxOutlineGeometry,
modelMatrix : boxModelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
}
});
// Add the geometry instance to primitives.
scene.primitives.add(new Cesium.Primitive({
geometryInstances : boxOutlineInstance,
appearance : new Cesium.PerInstanceColorAppearance({
flat : true,
renderState : {
lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth)
}
})
}));
``
Try adding that code right below where you load the czml you created. Hopefully it will make the box that follows around your object, just be sure to check that all the syntax/variable names match up with your code.