Hiding everything outside a polygon

CesiumJS
1

Hi there,

I love using Cesium, but I have been stuck recently trying to figure how to do something:

Basically, I would like everything outside of a polygon to be hidden.

Is there a way to build a polygon that would span accross the whole globe, and then draw some kind of hole inside it?

Or alternatively, some kind of "mask" property to use?

Any ideas appreciated!
Thanks,
RA

2

Hi there,

Check out the rectangle property of an ImageryLayer. It will allow you to limit the visible portion of imagery.

http://cesiumjs.org/Cesium/Build/Documentation/ImageryLayer.html

Here’s some example code:

Hope that helps!

  • Rachel
3

Hi,

Thanks, I tried this but the result is…strange:

image.png
image.png1242×552 833 KB

On this image, the red rectangle is the same I passed the ImageryLayer. The first thing is that the full tile shows if at least some of it is in the zone, and then it looks like it is repeating the last pixel of the tile infinitely.

What I am looking for is to have everything outside the red box all black for example.

The other ideas I have looked at is trying to have a polygon cover the whole globe, and then draw a “hole” in it, but I am having trouble getting this “full covering” polygon… (tried something based on https://cesiumjs.org/tutorials/Geometry-and-Appearances/)

Still open to ideas :slight_smile:

Thanks,

Cad

4

For anyone looking, this is how I solved it:

I use turf to increase my boundaries by a wide margin, and then use them for the hole. This is not covering the entire map, but since I am zooming close to the square, it is enough for me.

function rectangleToPolygon(coords){

var minX = Number(coords[0]);

var maxX = Number(coords[2]);

var minY = Number(coords[1]);

var maxY = Number(coords[3]);

return [

minX, minY,

maxX, minY,

maxX, maxY,

minX, maxY,

minX, minY

];

}

var cover = rectangleToPolygon(_.flatten(turf.bbox(turf.buffer(turf.bboxPolygon(bounds), 5000, ‘kilometers’))));

var rect = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(rectangleToPolygon(bounds)));

globe.entities.add({

name: ‘’,

polygon : {

hierarchy : new Cesium.PolygonHierarchy(

Cesium.Cartesian3.fromDegreesArray(cover), //Cover

[rect] //Holes

),

material : Cesium.Color.BLACK

}

});

image.png
image.png1242×552 833 KB

5

Hi Rachid,

The stretching occurs because Cesium tries to cover the globe with the base imagery layer. Fortunately this is easy to work around – basically you create a base layer that’s a single transparent pixel. This way the base layer gets stretched and not the data on top of it. Check out this thread for more details: https://groups.google.com/d/msg/cesium-dev/3SSScyR_d1I/4khIxOD_lzEJ (it’s not a bug as Scott mention if you continue reading) Also, here’s a working example (with a bright yellow base, but you can change that): http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=959b0e00e891eff58a3ddacfea90beb8

Your solution works too though! Limiting the imagery layer is just marginally less expensive.

Hope that helps,

  • Rachel