Search code examples
cesiumjs

is there a way to display a diagonally hatched material for a Cesium polygon


I am trying to create a special material for a Cesium Polygon, which has to incorporate a hatched area with an outline. Now, from the base materials I can use "Stripe", so i can create my graphic like this:

var viewer = new Cesium.Viewer('cesiumContainer');
var degrees_array = [
    92.1470732697006,
    21.954465553476467,
    99.08781126987297,
    32.557089696031916,
    68.66765785924682, 
    24.272023818381587
];
var polygon = viewer.entities.add({
    name : 'polygon',
    polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray(degrees_array),
    extrudedHeight: 0,
    material : new Cesium.StripeMaterialProperty(
                {
                    evenColor:Cesium.Color.GRAY,
                    oddColor:Cesium.Color.WHITE,
                    orientation: Cesium.StripeOrientation.HORIZONTAL,
                    repeat:100,
                    offset:0

                }
    ),
            //outline is ignored by WebGL 
            //outline: true,
            //outlineColor:Cesium.Color.BLACK,
            //outlineWidth:1
    }
});
//since designing an outline is not possible with polygon we create a custom polylineGraphics:
var outline_array = degrees_array;
// since loop is not available for polylineGraphics we add the first point positions
outline_array.push(outline_array[0],outline_array[1]);
var outline = viewer.entities.add({
   polyline : {
    positions : Cesium.Cartesian3.fromDegreesArray(outline_array),
    width : 5,
    material : Cesium.Color.GRAY,
    clampToGround:true,
    zIndex:0
   }
});

viewer.zoomTo(polygon)

see sandcastle link

My questions: - is there a way to rotate the stripes, so that they appear as diagonally hatched - can zoom be omitted for the Stripe material, so that it is always displayed with the same line width?

Thanks a lot!


Solution

  • If you are still wondering. You can rotate the stripes by using stRotation

      polygon: {
        hierarchy: <posititons>
        stRotation: Cesium.Math.toRadians(45),
        material: stripeMaterial,
      }