Polygons Constructed via CZML not displaying

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I’m reading in a couple JSON files and constructing a CZML, I cant seem to get the polygons to show on the map at all.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

function geoArray (GeometryArray) {
pointList =
for (var l = 0; l < GeometryArray.length; l++){
var geometryArr = GeometryArray[l];

for (var n = 0; n < geometryArr[0].length; n++){
var pointA = {“cartographicDegrees” : Cesium.Cartographic.fromDegrees(geometryArr[0][n][1], geometryArr[0][n][0])};
pointList.push(pointA);
}
return pointList
}};

var TraffickingCZML = [{
“id” : “document”,
“name” : “CZML Geometries: Country by Trafficking Cases”,
“version” : “1.0”,
clock: {
interval: ‘1990-01-01T00:00:00.000Z/2018-12-13T23:59:59.000Z’,
currentTime: ‘1990-01-01T00:00:00.000Z’,

}
}];

d3.json(‘static/data/globe.geo.json’).then(function (globe) {
if( globe ) {
d3.json(’/static/data/TraffickingGDPCounts.json’).then(function (trafficking) {

var TrafficArray = trafficking;
var arr = globe.features;

for (var i = 0; i < arr.length; i++){

var obj = arr[i];
for (var n = 0; n < TrafficArray.length; n++){

var traffickObj = TrafficArray[n];
if (traffickObj[‘properties.code’] == obj[‘properties’][‘iso_a2’]) {

if (traffickObj[‘Total’]) {

var geometryPacket ={

“id” : obj[‘properties’][‘postal’],

“name” : obj[‘properties’][‘geounit’],
“availability” : traffickObj[‘Year’] + ‘-01-01T00:00:00.000Z’ + ‘/’ + traffickObj[‘Year’] + ‘-12-31T23:59:59.999Z’,
“vertexPositions” : {“cartographicDegrees” : geoArray(obj[‘geometry’][‘coordinates’])},
“polygon” : {
“show”: true,
“material” : {
“solidColor” : {
“color” : traffickObj[‘properties.color’]
}
},
“extrudedHeight” : 100000 * traffickObj[‘Total’],
“perPositionHeight” : true,
“outline” : true,
“outlineColor” : {
“rgba” : [0, 0, 0, 255]
}
}
};
TraffickingCZML.push(geometryPacket);
};
}
}};

})}
});

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
shouldAnimate : true,
terrainProvider: Cesium.createWorldTerrain(),

});

var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(3)
})
);

var promise = Cesium.CzmlDataSource.load(TraffickingCZML)
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
});

``

``

geometry Packet looks like this in the console:

``

  1. {id: “CO”, name: “Colombia”, availability: “2010-01-01T00:00:00.000Z/2010-12-31T23:59:59.999Z”, vertexPositions: {…}, polygon: {…}}
  2. availability: “2010-01-01T00:00:00.000Z/2010-12-31T23:59:59.999Z”
  3. id: “CO”
  4. name: “Colombia”
  5. polygon:
  6. extrudedHeight: 1300000
  7. material:
  8. solidColor: {color: “CHARTREUSE”}
  9. proto: Object
  10. outline: true
  11. outlineColor:
  12. rgba: (4) [0, 0, 0, 255]
  13. proto: Object
  14. perPositionHeight: true
  15. show: true
  16. proto: Object
  17. vertexPositions:
  18. cartographicDegrees: Array(26)
  19. 0:
  20. cartographicDegrees: s {longitude: 0.046902920334411694, latitude: -1.3649328324461212, height: 0}
  21. proto: Object

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Needed to break up my json objects because they were too large.

4. The Cesium version you’re using, your operating system and browser.

Using Cesium 1.52 in Chrome, Thanks so much for your help!

2

Looks like your packet is not specifying the positions of the polygon correctly. The property is named “positions” and should be a child of “polygon”.

See the CZML spec for polygon:

https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Polygon

3

I just swapped that back, must have found some old methods on this forum. That didn’t seem to be the issue.
I also tried loading the datasouce in a different way

var czmlStream = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlStream.load(TraffickingCZML));

``

But that didn’t have any visual effect either. Is there any way to see if the datasource is loading properly?

4

Changed my method slightly to try to just push these as entities…still no luck.

d3.json(‘static/data/globe.geo.json’).then(function (globe) {

if( globe ) {

d3.json(’/static/data/TraffickingGDPCounts.json’).then(function (trafficking) {

var TrafficArray = trafficking;

var arr = globe.features;

for (var i = 0; i < arr.length; i++){

var obj = arr[i];

for (var n = 0; n < TrafficArray.length; n++){

var traffickObj = TrafficArray[n];

if (traffickObj[‘properties.code’] == obj[‘properties’][‘iso_a2’]) {

if (traffickObj[‘TraffickDict’][‘Total’]) {

// console.log(obj[‘properties’][‘postal’] + traffickObj[‘Year’]);

var geometryPacket = viewer.entities.add({

“id” : obj[‘properties’][‘postal’] + traffickObj[‘Year’],

“name” : obj[‘properties’][‘geounit’],

“availability” : traffickObj[‘Year’] + ‘-01-01T00:00:00.000Z’ + ‘/’ + traffickObj[‘Year’] + ‘-12-31T23:59:59.999Z’,

“polygon” : {

“positions” : {“cartographicDegrees” : geoArray(obj[‘geometry’][‘coordinates’])},

“show”: true,

“material” : {

“solidColor” : {

“color” : traffickObj[‘properties.color’]

}

},

“extrudedHeight” : 100000 * traffickObj[‘TraffickDict’][‘Total’],

“perPositionHeight” : true,

“outline” : true,

“outlineColor” : {

“rgba” : [0, 0, 0, 255]

}

}

});

TraffickingCZML.push(geometryPacket);

};

}

}};

})}

var entity = viewer.entities.getById(‘CO2002’);

console.log(entity) //RETURNS UNDEFINED

});

var czmlStream = new Cesium.CzmlDataSource();

viewer.dataSources.add(czmlStream.load(TraffickingCZML));

console.log(czmlStream)

var camera = viewer.camera;

viewer.scene.render();

viewer.camera.flyTo({

destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 8000000.0),

orientation : {

right: new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339),

roll : 0.0

}

});

console.log(viewer.entities._entities); //SHOWS ALL THE ENTITIES I WOULD EXPECT

5

You seem to be providing positions in radians rather than degrees as indicated.

Scott