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!
If you are still wondering. You can rotate the stripes by using stRotation
polygon: {
hierarchy: <posititons>
stRotation: Cesium.Math.toRadians(45),
material: stripeMaterial,
}