Offset overlapping polylines with client-side graphics.

1163
3
Jump to solution
05-14-2021 11:10 AM
rogenjh
New Contributor III

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...) but I'm wondering if anyone has an example of this running properly?

Thanks so much!

Goal visual:

rogenjh_0-1621015228085.jpeg

 

0 Kudos
1 Solution

Accepted Solutions
KristianEkenes
Esri Regular Contributor

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 

View solution in original post

3 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

I have a simple test case that uses geometryEngine.offset() method. It has not updated in a while but it should work. 

 

-Undral

KristianEkenes
Esri Regular Contributor

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 

rogenjh
New Contributor III

Very interesting both of you. 

My current idea then is to offset by "Unique Value" / type of the circuit, and then assign CIM Symbols within the Unique Value Renderer. I believe this would fulfill my requirement and would probably me simpler than querying as you noted.

I am hoping that future versions of ESRI will allow for feature reduction on line symbols because that might suit my use case best of all.

0 Kudos