Polygon outline width issue

Hi everyone, I try to outine an polygon with the heavy polyline. But it look terrible. Any one can help me to create the outline line complete overlap the polygon
My example code below:

 var viewer = new Cesium.Viewer('cesiumContainer');

var arrayCoords=[102,20,103,21,104,20,102,20];
var arrayHeightCoords=[102,20,10000,103,21,10000,104,20,10000,102,20,10000];
var outlineWidth=50;
//bottom line
viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(arrayCoords),
      width: outlineWidth,
      height: 0,
      material: Cesium.Color.PINK.withAlpha(0.8)
    }
});

//polygon
viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(arrayCoords),
      height: 0,
      extrudedHeight:10000,
      material: Cesium.Color.GREEN.withAlpha(0.5),
    }
});

//top line
viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights(arrayHeightCoords),
      width: outlineWidth,
       material: Cesium.Color.PINK.withAlpha(0.8)
    }
});

viewer.zoomTo(viewer.entities);

@chinhls

Thank you for sending over your code. While it does not give you the functionality that you are looking for, it still makes for an interesting demo.

We see that the objects PolygonGraphics and BoxGraphics have the members outline, outlineColor, and outlineWidth. Is there any reason why you are not using these members to add an outline to your polygon.

https://cesium.com/learn/cesiumjs/ref-doc/PolygonGraphics.html?classFilter=polygon

https://cesium.com/learn/cesiumjs/ref-doc/BoxGraphics.html?classFilter=boxgr

I created a quick sandcastle demo that showcases how these members can be used to change the outline of a box.

They can also be used on a polygon.

Let me know what you think! Is this what you are looking for?

-Sam

Thank you @sam.rothstein . I’m wondering that the the outlineWidth
property does not support on windows.And you can try if you set this property to the value greater than 10 it does not take any effect. And the one more thing i need only the top and bottom line, I don’t want the line appear on poylgon body as you can see in this picture bellow>

1 Like

@chinhls

The outlineWidth property should be functional on Windows 10. Is it not working for you? If so, I can help you write up an issue on GitHub for this. In terms of values greater than 10, I had the same problem. In the next hour, I am going to write up an issue on our GitHub page for our development team to take a look at.

To address your immediate question, I suggest that you draw two triangles at the top and bottom of the triangular prism. Update the outlineWidth member for the two triangles and set outlineShow to false for the triangular prism. I believe that this is the simplest way to give you the functionality that you are looking for.

Let me know if you have any other questions or concerns!

-Sam

@chinhls

I just submitted an issue for the outlineWidth member. Please look over the issue and add details as necessary! :rocket:

-Sam

Thank for your help. Just one more question. How can i outline wall with dash material.The default wall geometry does not support width how can i change the width of wall.I try corridor to support width of wall and using polyline to create dash border. But it not compelete overlap

My code example here:
[Cesium Sandcastle](https://wall outline)

Thanks

1 Like

@chinhls

Your demo looks amazing :grinning:

It seems like you figured out how to outline the wall with dashes and update the width of the wall. Congratulations!

Let me know if you have any other questions or concerns!

-Sam

In 10 dec 2021 - outlineWidth still does not work in Windows 10 or Windows 11 on GeFprseRTX 2070
I test in my project & off Cesium demo in last Chrome version with hadrware ON -

Also not work material - as sample I need set dash material for polygon outline.
if I need similar dash outline as this sample

1 Like

Just wanted to add that a lot of us use GeoJSON / KML importing, so the usual workaround of drawing a polygon and a polyline doesn’t work, we have to go through the end entities, find all polygons and create polyline duplicates of the positions. But. I have a generic styling engine that can apply styling rules to different types, but these new polylines will be affected other styling rules. I have to write special code to deal with special cases and special … aargh.

The earliest bug reports on this is from 2012, so it’s obviously been a thing for a long time. I’ve currently disabled a) width on polygons (calling it a Cesium limitation) and b) outline (same Cesium issue) on filled polygons. But it seems a bit mad that this is still a thing? If nothing else, I feel it’s better handled internally to Cesium as virtual entities (ie. entities not exposed in the collection that I / styling engine can get my grubby little hands on) instead of everyone writing special code to trick Cesium rather that relying on the Cesium API? Thoughts?

Cheers,

Alex

1 Like