Arcgis JS API 利用CIM Symbol 实现双拼色管线效果 - 雨林笔记-前端个人技术记录

CIMSymbol是一个很强大的样式系统。并且官方提供了一个代码生成器[CIM Symbol Builder](https://esri.github.io/cim-symbol-builder-js/)。
这里的需求使用CIMSymbol来实现将管线数据渲染为双拼色的效果。
关键属性：renderer
如图所示，下图中采用了FeatureLayer测试数据。如果你是mapImage类型数据则可以使用MapImageLayer.suberLayers.render实现。

```ts
 //下面用到的CIM Symbol样式json
const CimStyle = {
      'type': 'CIMLineSymbol',
      'symbolLayers': [
        {
          'type': 'CIMSolidStroke',
          'effects': [
            {
              'type': 'CIMGeometricEffectOffset',
              'method': 'Bevelled',
              'offset': 2, //为一半的颜色设置偏移 实现双拼颜色
              'option': 'Fast'
            },
            {
              'type': 'CIMGeometricEffectDashes',
              'lineDashEnding': 'NoConstraint',
              'controlPointEnding': 'NoConstraint'
            }
          ],
          'enable': true,
          'colorLocked': true,
          'capStyle': 'Square',
          'joinStyle': 'Miter',
          'lineStyle3D': 'Strip',
          'miterLimit': 10,
          'width': 2, // 颜色粗细
          'color': [
            0,
            224,
            26,
            255
          ]
        },
        {
          'type': 'CIMSolidStroke',
          'effects': [
            {
              'type': 'CIMGeometricEffectOffset',
              'method': 'Mitered',
              'offset': 0,
              'option': 'Fast'
            },
            {
              'type': 'CIMGeometricEffectDashes',
              'lineDashEnding': 'NoConstraint',
              'controlPointEnding': 'NoConstraint'
            }
          ],
          'enable': true,
          'colorLocked': true,
          'capStyle': 'Square',
          'joinStyle': 'Miter',
          'lineStyle3D': 'Strip',
          'miterLimit': 10,
          'width': 2, // 另一半的颜色粗细
          'color': [
            250,
            0,
            0,
            255
          ]
        }
      ]
    };
    
// 新建测试图层
const layer = new FeatureLayer({
      title: '测试图层',
      url: 'https://[domain.com]/server/rest/services/Hosted/backup_test/FeatureServer/0',
      renderer: new SimpleRenderer({
        symbol: new CIMSymbol({
          data: {
            type: 'CIMSymbolReference',
            symbol: CimStyle as __esri.CIMLineSymbol
          }
        })
      })
    });
    this.stateService.map.layers.push(layer); //地图中追加图层
```