Offset overlapping polylines with client-side graphics.

rogenjh

Hey Everyone -- 

Working from 4.18.

I have a new project requirement to map out polylines that represent circuits. The circuit graphics are created on the client side. They will all begin at one point and will shoot outwards from there.

My major issue is that I can have multiple circuits running the same track and multiple circuits that are smaller parts of one larger track. The beginning and end latitude and longitude are the same. Or, the beginning coordinates are the same, and the circuit follows the same track, but it does not run the entire distance.

After researching how to visually represent circuits, I found ESRI provides this idea to offset circuits that are overlapping. I would like to implement this idea for a POC.

I've found offset in the geometry engine (https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngineAsync.html#offset) but I'm wondering if anyone has an example of this running properly?

Thanks so much!

Goal visual:

 

KristianEkenes

There's no need to use geometryEngine for this case. You can take advantage of CIMLineSymbol and offset the line symbol from the geometry. Here's a code pen that does this with a highway layer: https://codepen.io/kekenes/pen/eYgeVEB

 

The lines of note are here:

 

[5/14 2:37 PM] Kristian Ekenes
    
{​​​​​​​
  type: "cim",
  // CIM Line Symbol
  data: {​​​​​​​
    type: "CIMSymbolReference",
    symbol: {​​​​​​​
      type: "CIMLineSymbol",
      symbolLayers: [
        {​​​​​​​
          primitiveName: "highway",
          // white dashed layer at center of the line
          type: "CIMSolidStroke",
          effects: [
            {​​​​​​​
              type: "CIMGeometricEffectOffset",
              offset: 5,
              option: 0
            }​​​​​​​
          ]
        }​​​​​​​
      ]
    }​​​​​​​
  }​​​​​​​
}​​​​​​​

 

When using geoemtryEngine offset, you first need to query for the geometries, then modify them using offset and add them back to the view as a client-side feature layer. That's a lot of work on your part. 

CIMLineSymbol allows you to request the features only one time and symbolize the various circuits on offsets depending on the value you provide the symbol. Let me know if you need further assistance.

 

Kristian