Coloring everything outside of a polygon

Hello,

Is it possible to color everything outside of a polygon geometry? For example, if I had a RectangleGeometry inside the U.S. then everything outside of that RectangleGeometry would be colored differently. Initially I looked at the SandCastle Polygon example and the PolygonHierarchy seemed to the best approach, so I created a PolygonHierarchy with 6 positions that fill the globe with a color. Next I added a hole of a rectangle inside the U.S. that I thought would be a hole within this polygon.

So, this is what it looks like when I fill the globe, which appears to work okay except it takes 10+ seconds to render, when compared to 1 second for a normal RectanglePolygon:

Next, when I add a rectangle hole (taken from the original Polygon sandcastle demo) in the U.S., I see the following unexpected result:

However, I expected to see something like the following (except the non-hole polygon fills the rest of the globe):

Here’s a Github gist of the Sandcastle code that can illustrate the above problems (PolygonHierarchy takes too long to render when compared to a normal RectanglePolygon and holes don’t appear properly?): https://gist.github.com/minhongrails/b7e5fea5813cbe9ecfe5

Does anyone know of any alternative approaches? I was thinking of just creating my own polygon that replicates the PolygonHierarchy but it would be nice to use the existing API if possible.

Thanks!

Minh

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.entities.add({
name : ‘Positive Longitude’,
polygon : {
hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray([ 0, 80,
0,-80,
179.9999,-80,
179.9999, 80])
},
material : Cesium.Color.BLUE.withAlpha(0.5)
}
});

viewer.entities.add({
name : ‘Negative Longitude’,
polygon : {
hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray([ -179.9999, 80,
-179.9999,-80,
0.0 ,-80,
0.0 , 80])
},
material : Cesium.Color.BLUE.withAlpha(0.5)
}
});

``

It’s not really a bug as when you try to create a polygon it determines if your going to be going east or west to fill, so if you go beyond 180 degrees for your width it’s going to switch to filling in via the smaller area.

To work around that you can create 2 polygons that wrap the globe.

Thanks Mike for your response, you're always so helpful! :)

I don't think I'm understanding the PolygonHierarchy correctly but if I add holes to the PolygonHierarchy, shouldn't it create a hole within the polygon? For example, I modified the second part of your sample to add a hole (I also created a [Sandcastle Github gist here](https://gist.github.com/minhongrails/fea0dd84b917cf9cbb9c)):

viewer.entities.add({
name : ‘Negative Longitude’,
polygon : {
hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray([ -179.9999, 80,
-179.9999,-80,
0.0 ,-80,
0.0 , 80])
},
material : Cesium.Color.BLUE.withAlpha(0.5)
}
});


However, I see the following result:


Shouldn’t the “Negative Longitude” entity still show the entity except for the rectangle hole? I tried it with other polygons that yielded similar results. I’m also still seeing a ~4 second delay before the polygons are rendered (this is faster than my previous example of a single polygon, which took ~8-9 seconds) so I’m thinking maybe it has something to do with the PolyHierarchy and its usage of Triangulation by Ear Clipping by David Eberly (I saw this mentioned in the PolygonGeometry source)?

At any rate, I’ve been exploring alternatives to using the PolygonHierarchy. In particular, I’m working on using the earcut library to triangulate a polygon representation of the globe with holes. This library I believe also uses David Eberly’s implementation but has some optimizations from FIST as well.

Alternatively I was also looking at maybe using the SingleTileImageryProvider but from a quick glance it appears to only support rectangles while I need to support arbitrary polygons and circles.

This looks like a bug in the triangulation code, so I submitted the following issue for us to look at: https://github.com/AnalyticalGraphicsInc/cesium/issues/2788

mapbox’s earcut actually uses the same algorithm that we do. We looked at using it in Cesium at one point but it actually failed in many cases. It’s entirely possible they’ve improved it since then but I’m not sure.

I try :slight_smile:

I believe the speed issue is because of the sheer volume of the global polygon(s). I haven’t tried, but I wondering if more smaller polygons would speed up the rendering. I don’t know if there is a better way to accomplish your goals. Hopefully some others in the forum can chime in with some advise.

FYI, this issue has been fixed and will be part of Cesium 1.23 on July 1st. See https://github.com/AnalyticalGraphicsInc/cesium/pull/3998 for details.