Issue with intersecting holes in PolygonHierarchy

CesiumJS
1

Hi,

I recently started to work with PolygonHierarchy structure and I came up with some cool stuff. (see dual_no_intersect.png)

The problem occurs when 2 circles (or more) are intersecting with eachother (see dual_with_intersect.png). As you can see, there are some artefacts on the shape when 2 holes intersect.

The outer polygon is quite big and it looks like those artefacts tends to the bottom left corner of the polygon.

Here is the code sample I use to do this:

var fogHoles = ;
var fogBoundaryBox = [
            -50.0, 45.0,
            30.0, 45.0,
            30.0, 20.0,
            -50.0, 20.0
          ];
          
var fogEnabled = false;

var fogOfWarPolygon = viewer.entities.add({
  polygon : {
    hierarchy :
    {
      positions : Cesium.Cartesian3.fromDegreesArray(fogBoundaryBox),
      holes : fogHoles
    },
    material : Cesium.Color.BLACK.withAlpha(0.5)
  }
});

function digNewFogOfWarHole(id, newHoleUtmPositionsArray)
{
  var indexToRemove = -1;
  
  for(var i=0; i<fogHoles.length; i++)
  {
    if(fogHoles[i].id == id)
    {
      indexToRemove = i;
    }
  }
  
  if(indexToRemove!=-1)
  {
    fogHoles.splice(indexToRemove, 1);
  }

  var posUtmArray = newHoleUtmPositionsArray.split(";");
  var finalUtmPosArray = ;
    for (var i = 0 ; i < posUtmArray.length ; i++)
  {
    var posUtmArray_data = posUtmArray[i].toString().split(",");
    var utm = {
        northing : parseFloat(posUtmArray_data[2]),
        easting : parseFloat(posUtmArray_data[3]),
        zoneLetter : posUtmArray_data[0],
        zoneNumber: parseInt(posUtmArray_data[1])
      };
    finalUtmPosArray.push(utm);
    }
  
  var newHoleLLPositionsArray = ;
  for (var i = 0 ; i < finalUtmPosArray.length; i++)
  {
    var LatLong = UTMtoLL(finalUtmPosArray[i]);
    newHoleLLPositionsArray.push(LatLong.lon);
    newHoleLLPositionsArray.push(LatLong.lat);
  }
  
  var newHoleStruct = {
              id,
              positions : Cesium.Cartesian3.fromDegreesArray(newHoleLLPositionsArray)
            };
  fogHoles.push(newHoleStruct);
}

function updateFog()
{
  fogOfWarPolygon.polygon.hierarchy = {
        positions : Cesium.Cartesian3.fromDegreesArray(fogBoundaryBox),
        holes : fogHoles
      };
}

Basically, I have a function somewhere that call "digNewFogOfWarHole" function and every N seconds, I call updateFog() to refresh the view with new holes.

So questions:
   - Am I doing something wrong?
   - Is there a workaround to fix this?

Regards,

2

dual_with_intersect.PNG
dual_with_intersect.PNG854×677 514 KB
dual_no_intersect.PNG
dual_no_intersect.PNG1061×595 590 KB

3

Hi Maximilien,

The definition is not clear, but holes may not overlap. You’ll have to combine overlapping holes yourself to get the effect you desire.

Hope that helps.

Scott

4

Thanks for reporting this Maximilien. I’ve open an issue in GitHub (#6238), to either remedy this behavior or clean up the docs to make this more clear.

Thanks,

Gabby

5

Hi Scott and Gaby,

Thanks for your replies.

Scott, the thing is that each circle has a specific ID and move independently over time. So basically, if I do merge shapes myself, it will be very very tricky.

Thank you for posting the issue Gaby.

Regards,
Max