How to get multiple holes in a polygon while in for-loop

CesiumJS
1

Hi all! I have yet another question…

I am rendering the geometry of buildings through a WFS (geoJson).

Some of these buildings have a hole in them, some of them have multiple holes, some of them have no holes.

I am running over this geoJson file in a for-loop, making entities of each building.

For the moment, I can get all the buildings on the map, but I am only able to get one hole in buildings which actually have multiple holes (see code below).

This is because I do not know how to dynamically change the setup of making holes in the polygon, depending on the amount of holes…

Can anyone point me in the right direction?

Thanks!

Wout

building.push(viewer.entities.add({

id : id,

polygon : {

hierarchy : {

positions : Cesium.Cartesian3.fromDegreesArray(coordinates),

holes : [{

positions : Cesium.Cartesian3.fromDegreesArray(hole[0])

}]

},

material : color,

outline : true,

outlineColor : Cesium.Color.BLACK,

extrudedHeight : height

}

}));

2

Hello,

Holes is an array, so you can have multiple holes in a polygon like this:

hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray(coordinates),
holes : [{
positions : Cesium.Cartesian3.fromDegreesArray(hole[0])
}, [{
positions : Cesium.Cartesian3.fromDegreesArray(hole[1])
}, [{
positions : Cesium.Cartesian3.fromDegreesArray(hole[2])
}]
}

``

Best,

Hannah

3

Hi Hannah!

That is actually something I was hoping to avoid.

I have over six million buildings in my database, and I have no idea what the maximum amount of holes in one single building is.

Of course, I could figure out what the maximum amount of holes is and provide enough lines to cover it, but maybe one day I will update the database and add a building that has one more hole and run into problems.

So, there is no more “elegant” way to solve it?

Thanks,

Wout

4

Um. I assume you have some sort of “holes” array per item, which may have an arbitrary number of items in it, varying per building? In that case, all you have to do is something like:

var holePositions = holes.map(function(hole) {
return {position : Cesium.Cartesian3.fromDegreesArray(hole)};
});

building.push(viewer.entities.add({
id : id,
polygon : {
hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray(coordinates),
holes : holePositions
},
}
}));

``

In other words, just loop over your original “holes” array, create a new array with a hole position object for each item in the original array, and pass that to the Entity.

5

Hi Mark,

This seems to be the solution, but I can’t seem to get it running.

The snap below shows how holePositions looks like for a random building. To me, this looks reasonable.

However, using “holes : holePosition” in the hierarchy of the polygon does not seem to do anything…

Any suggestions?

Wout

6

Nevermind, found it…

You made a small typo: position --> positions makes a big difference :slight_smile:

For those of you trying to do the same as me: do not forget to redefine var holePositions at the beginning of every loop, or you’ll get very strange results

Thanks for the help! It’s running perfectly now.

Wout