Polyline outline width and coloring are not working about cesium

[sraimund]

I landed on this issue coming from outlineWidth property of the PolygonGraphics docs. Based on the suggested workaround of @thw0rted, here the code for converting polygons into polylines with outline:

const dataSource = await Cesium.GeoJsonDataSource.load("polygons.geojson");

for (const entity of dataSource.entities.values) {
    entity.polyline = new Cesium.PolylineGraphics();
    entity.polyline.positions = entity.polygon.hierarchy.getValue().positions;
    entity.polygon = undefined;
    
    entity.polyline.width = 3;
    entity.polyline.material = new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.WHITE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK
    });
}

viewer.dataSources.add(dataSource); 

An exemplary use case would be to style borders of administrative units (given as polygons).

[s3xysteak]

Now I have a possibly good way before an official solution emerges, here is the code:

// Assuming the existence of a DataSource which is a geojson about polygon
const entities = dataSource.entities.values
entities.forEach(entity => {
  entity.polygon.width = 4
  entity.polygon.material = Cesium.Color.fromCssColorString('#FF5500')

  entity.polyline = new Cesium.PolylineGraphics({
    positions: entity.polygon.hierarchy.getValue().positions,
    width: 2,
    material: Cesium.Color.BLACK
  })
  
})

That looks like a outline of the polygon.

[kristiancalhoun]

Hi Jonah,

Are you running Chrome with ANGLE enabled? You can check http://analyticalgraphicsinc.github.com/webglreport/ to find out. If so, then the maximum aliased line width is 1 and the polyline outline will not show up. You can disable ANGLE in Chrome using the --use-gl=desktop flag. The Sandbox example you mention displays correctly for me in Chrome without ANGLE and in Firefox 12.0.

If the width is still not changing, make sure you're using a valid value. Within Cesium, you can use the Context.getMinimumAliasedLineWidth and Context.getMaximumAliasedLineWidth functions to find the range.

Hope this helps,

-Kristian

[mramato]

Kristian hit the nail on the head, but in case you're unfamiliar with ANGLE, you can read more about it here: http://code.google.com/p/angleproject/

Both Chrome and Firefox use ANGLE by default on Windows and render with DirectX under-the-hood. There is actually a bug opened for ANGLE with this particular issue: http://code.google.com/p/angleproject/issues/detail?id=119

[djone010]

Thanks for all the information and quick response. When I turn off angle though, I get this browser does not support WebGL.

[mramato]

There's a good reason they use ANGLE, OpenGL is not supported very well on a wide variety of video cards. One thing you can try is to upgrade your video card drivers. Some drivers are explicitly black-listed by Firefox and Chrome. If that doesn't fix it, then it's likely you need ANGLE in order for WebGL to work on your particular machine. Hopefully ANGLE will fix the line width issues in a future release.

[MarchChadwick]

Would love to change the outlineWidth property. No luck as yet.

[GatorScott]

The ANGLE project declared in 2014 that they would not be implementing wide lines. Having said that, wide outlines are working for me on Windows 10 in

• Chrome 62.0.3202.62, ANGLE (NVIDIA Quadro M1000M Direct3D11 vs_5_0 ps_5_0)
• Firefox 56.0, ANGLE (NVIDIA Quadro M1000M Direct3D11 vs_5_0 ps_5_0)
• Edge 40.15063.674.0, Intel(R) HD Graphics 530
• Internet Explorer 11.674.15063.0, NVIDIA Quadro M100M

What configuration is failing for you? I used webglreport.com to obtain the Unmasked Renderer shown above.

[MarchChadwick]

Hello GatorScott and thank you for response. I am using Chrome with a Macbook pro. Following PolylineOutlineMaterialProperty https://cesiumjs.org/Cesium/Build/Documentation/PolylineOutlineMaterialProperty.html in the Cesium sandbox https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html&label=undefined produces no change in outline thickness for me.

[hpinkos]

@MarchChadwick support for outlineWidth is dependent on your OS and your graphics card. If the value of scene.maximumAliasedLineWidth is 1, then your machine only supports 1px width geometry outlines. See more information here: https://stackoverflow.com/questions/25394677/how-do-you-change-the-width-on-an-ellipseoutlinegeometry-in-cesium-map/25405483#25405483

In the future, please ask questions like this on the forum: https://groups.google.com/forum/?hl=en#!forum/cesium-dev
We use GitHub exclusively for bug tracking and planning new features, and we might miss your question if you comment on a closed issue like this. Thanks!

[thw0rted]

Since the docs are now going to link to this issue, I'll make a suggestion here for future readers. If you're trying to make a filled shape with a thick outline, and can easily express that outline as an array of points (say, a PolygonGraphics or EllipseGraphics), it's pretty simple to add a PolylineGraphics to your entity instead of using the built-in outline property on your 2D shape. Hopefully at some point in the future this won't be necessary, but for now this ensures a consistent appearance on any platform.

[mzlan]

Hi，I set the browser angel default as opengl and box outlineWidth working。

var outlineOnly = viewer.entities.add({
name: "Yellow box outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
outlineWidth:2,
},
});