vue3 + arcgis.js4.x---导航箭头轨迹线

onMounted(() => {
  window.customMap = mapInit.initMap()

  const graphicsLayer = new GraphicsLayer() // 创建一个图层对象
  const polyline = new Polyline({
    paths: [
      [117.227239, 31.820586],
      [117.227239, 33.820586],
      [119.227239, 31.820586]
    ]
  })
  // 图层
  const lineGraphic = new Graphic({
    geometry: polyline,
    symbol: new CIMSymbol({
      data: {
        type: 'CIMSymbolReference',
        symbol: {
          type: 'CIMLineSymbol',
          symbolLayers: [
            {
              // 路线白色箭头
              type: 'CIMVectorMarker',
              enable: true,
              size: 4,
              markerPlacement: {
                type: 'CIMMarkerPlacementAlongLineSameSize', // 在这条线上放置相同大小的标记
                endings: 'WithMarkers',
                placementTemplate: [20], // 箭头间距
                angleToLine: true // 符号保持其与直线的角度
              },
              frame: {
                xmin: -5,
                ymin: -5,
                xmax: 5,
                ymax: 5
              },
              markerGraphics: [
                {
                  type: 'CIMMarkerGraphic',
                  geometry: {
                    rings: [
                      // 箭头-自定义绘制路线上面的连续出现的图标
                      [
                        [-5, -5.47],
                        [1.96, -0.03],
                        [-6, 5.6],
                        [1.96, -0.03],
                        [-5, -5.47]
                      ]
                    ]
                  },
                  symbol: {
                    // 符号样式
                    type: 'CIMPolygonSymbol',
                    symbolLayers: [
                      {
                        type: 'CIMSolidStroke', // 闭合的
                        enable: true,
                        color: [255, 255, 255, 255],
                        width: 1
                      }
                    ]
                  }
                }
              ]
            },
            {
              // 路线浅绿色背景
              type: 'CIMSolidStroke',
              enable: true,
              capStyle: 'Butt',
              joinStyle: 'Round',
              width: 5,
              color: [48, 211, 102, 255]
            },
            {
              // 路线暗绿色边框
              type: 'CIMSolidStroke',
              enable: true,
              capStyle: 'Butt',
              joinStyle: 'Round',
              width: 8,
              color: [0, 115, 76, 255]
            }
          ]
        }
      }
    })
  })
  // 图层添加到图层组对象
  graphicsLayer.add(lineGraphic)
  window.customMap.map.add(graphicsLayer) // 将图层添加到地图上
})