Line rendering

Question

Hi everyone, I'm trying to create somthing line an airway route and I'm using lines to do it, I'm using a wide line with opacity and the thin line in the middle, dashed. As you can see in the picture when the line is overlapping to create a turn the fill is overlapping and create a different opacity/color

I would be happy to get an advise how to overcome it and the fill will be solid with out the overlapping color

thanks

PreetiMaske · Answer

I should have asked earlier how are you creating the symbols for the graphics. I believe you are using multilayer symbol. If not, then I recommend using Multilayer symbol for the graphic using the example provided below.

If you are already using Multilayer symbol then choosing the right color for the bottommost stroke symbol layer and not having to apply any additional transparency should work for your use case. If you need additional transparency you can set it GraphicOverlay.

overlay.Opacity = 0.8;

Below are two images I captured with code snippet below. First one is GraphicsOverlay with 0.8 opacity and second one is without opacity.

var overlay = new GraphicsOverlay();

polylineBuilder = new PolylineBuilder(SpatialReferences.Wgs84);
polylineBuilder.AddPoint(new MapPoint(-30, 20, SpatialReferences.Wgs84));
polylineBuilder.AddPoint(new MapPoint(30, 20, SpatialReferences.Wgs84));
polylineBuilder.AddPoint(new MapPoint(-30, -20, SpatialReferences.Wgs84));
polylineBuilder.AddPoint(new MapPoint(30, -20, SpatialReferences.Wgs84));

var tranpstrokeLayer = new SolidStrokeSymbolLayer(20, Color.Gray);                        
tranpstrokeLayer.CapStyle = StrokeSymbolLayerCapStyle.Round;
strokeLayer = new SolidStrokeSymbolLayer(3, Color.White);
strokeLayer.CapStyle = StrokeSymbolLayerCapStyle.Round;
dashEffect = new DashGeometricEffect();
dashEffect.DashTemplate.Add(7);
dashEffect.DashTemplate.Add(9);
dashEffect.DashTemplate.Add(0.5);
dashEffect.DashTemplate.Add(9);
strokeLayer.GeometricEffects.Add(dashEffect);

lineSymbol = new MultilayerPolylineSymbol(new List<SymbolLayer> { tranpstrokeLayer,strokeLayer });
var dashDotGraphic = new Graphic(polylineBuilder.ToGeometry(), lineSymbol);

overlay.Graphics.Add(dashDotGraphic);

Few resources: https://github.com/Esri/arcgis-maps-sdk-dotnet-samples/tree/main/src/WPF/WPF.Viewer/Samples/Symbology/RenderMultilayerSymbols

https://developers.arcgis.com/net/api-reference/api/net/Esri.ArcGISRuntime/Esri.ArcGISRuntime.Symbology.MultilayerSymbol.html

https://developers.arcgis.com/net/styles-and-data-visualization/symbols-renderers-and-styles/

Hope this helps.

pinisolomon1 · Answer

hi @PreetiMaske , thank you for the response, It would be great if you guys could look into it.

Do you have any suggestion for another way to achieve what I want, maybe not using a wide line, maybe I could use something else?

PreetiMaske · Answer

I don't think there is currently any way to avoid the dark shaded area caused by overlapping in Native SDK.

I was comparing Native SDK behavior with ArcGIS Pro and noticed that in ArcGIS Pro single feature does not cast shadow but multiple features will result in overlap shadows.

Image above is from ArcGIS Pro that shows that if it is one geometry , it displays without overlaps at connecting vertices but if there are different geometries , it would cause the darker shade at overlaps.

Unfortunately it is not same in Native SDKs. I will look further and see if something can be done in Native SDKs to achieve the same behavior. I will also log an issue internally for us to look into this further. If I find any workarounds I will let you know.

Thanks,

Preeti