线类覆盖物支持在地图上绘制折线、虚线、带纹理的线，通过这些可以绘制各种各样的规划路线或物体轨迹。

通过Polyline类会来绘制折线，示例代码如下：

polyline = new Polyline({
     points: [new LatLng(39.76, 116.13),
          new LatLng(39.95, 116.23),
          new LatLng(40.16, 116.78)],
     fillcolor: '#f0f',
     width: 20,
     join: SysEnum.LineJoinType.ROUND,
     cap: SysEnum.LineCapType.ROUND,
     isThined: true,
});
mapController.addOverlay(polyline);

效果图：

通过设置colorList即可实现多段颜色的设置，colorList长度需要比points长度小1。

this.colorsLine = new Polyline({
    points: [new LatLng(39.620, 116.327), new LatLng(39.9171, 116.522),new LatLng(39.8171, 116.622),new LatLng(40.36, 116.43), new LatLng(40.77, 115.78)],
    width: 20,
    join: SysEnum.LineJoinType.ROUND,
    cap: SysEnum.LineCapType.BUTT,
    colorList: ['#f0f', '#3c6e04', '#b31203','#f0f']
});

通过isGradient参数设置是否是渐变线，colorList长度需要与points长度一致。

this.gradientLine = new Polyline({
    points: [new LatLng(39.620, 116.327), new LatLng(39.9171, 116.522),new LatLng(39.8171, 116.622),new LatLng(40.36, 116.43), new LatLng(40.77, 115.78)],
    width: 20,
    join: SysEnum.LineJoinType.ROUND,
    cap: SysEnum.LineCapType.BUTT,
    isGradient: true,
    colorList: ['#f0f', '#3c6e04', '#b31203','#f0f','#3c6e04']
});
this.gradientLine.addEventListener(OverlayEvent.CLICK,()=>{
    // 设置为非渐变模式 
    this.gradientLine?.colorList(['#f0f', '#3c6e04', '#b31203','#f0f']).setIsGradient(false);
});

通过dottedline和dottedlineType参数配置，可实现虚线样式绘制。

示例代码：

dotline = new Polyline({
    points: [new LatLng(39.620, 116.327), new LatLng(39.9171, 116.522)],
    fillcolor: '#00f',
    width: 20,
    join: SysEnum.LineJoinType.ROUND,
    cap: SysEnum.LineCapType.BUTT,
    dottedline: true,
    dottedlineType: SysEnum.PolylineDottedLineType.DOTTED_LINE_CIRCLE
});
// 在地图中添加点状虚线
mapController.addOverlay(dotline);

效果图：

示例代码：

polylineGeodesic = new Polyline({
     points: [new LatLng(40.082, 116.617),
          new LatLng(55.851, 37.701),
          new LatLng(32.851, 112.701)],
     fillcolor: '#ff10bed6',
     width: 16,
     join: SysEnum.LineJoinType.ROUND,
     cap: SysEnum.LineCapType.ROUND,
     textures: [new ImageEntity('rawfile://Icon_road_blue_arrow.png')], // 添加纹理
     isThined: false,
     isGeodesic: true // 是否绘制大地线
});
mapController.addOverlay(polylineGeodesic);

效果图：

通过配置textures参数，设置多纹理数据；通过配置indexList配置每段线的纹理索引。indexList数组的长度比points数组长度小1，且indexList数组中的每个数值取值范围为0至textures的长度减1。

let trace = [
    new LatLng(39.88063,116.47946),
    new LatLng(39.88063,116.47951),
    new LatLng(39.88099,116.47951),
    new LatLng(39.88126,116.47951),
    new LatLng(39.88158,116.4795),
    new LatLng(39.88158,116.4795),
    new LatLng(39.88234,116.4795),
    new LatLng(39.88234,116.4794),
    new LatLng(39.88232,116.47925),
    new LatLng(39.88232,116.47913),
    new LatLng(39.88228,116.47838),
    new LatLng(39.88296,116.4774),
    new LatLng(39.88433,116.47741),
    new LatLng(39.88505,116.47742),
    new LatLng(39.8901,116.4775),
    new LatLng(39.89215,116.47755),
    new LatLng(39.89469,116.47831),
    new LatLng(39.89463,116.4787)];
this.polyline = new Polyline(
    {
        points: trace,
        width: 30,
        join: SysEnum.LineJoinType.ROUND,
        cap: SysEnum.LineCapType.ROUND,
        textures:[new ImageEntity('rawfile://Icon_road_blue_arrow.png'),
            new ImageEntity('rawfile://Icon_road_green_arrow.png'),
            new ImageEntity('rawfile://Icon_road_red_arrow.png'),
            new ImageEntity('rawfile://Icon_road_yellow_arrow.png')], // 添加纹理图片
        indexList:[1,1,1,1,2,2,3,3,1,1,1,2,2,1,1,1,1], // 填充多纹理的索引，数量等于点数减1
    });
this.polyline.addEventListener(OverlayEvent.CLICK, () => {
    promptAction.showToast({
        message: '点击多纹理线',
        duration: 2000,
    });
});
this.mapController?.addOverlay(this.polyline);
this.mapController?.setViewport(trace,{margins:[vp2px(100),vp2px(100),vp2px(100),vp2px(100)]})

通过配置lineBloomType、lineBloomWidth、lineBloomBlurTimes、lineBloomAlpha来实现Bloom发光特效。

// 方形虚线
this.lineBloom = new Polyline({
    points: [new LatLng(39.420, 116.237), new LatLng(40, 116.822),new LatLng(39.9171, 116.522)],
    fillcolor: '#62d',
    width: 16,
    join: SysEnum.LineJoinType.ROUND,
    cap: SysEnum.LineCapType.BUTT,
    lineBloomType: SysEnum.ELineBloomType.GRADIENTA,
    lineBloomWidth: 50,
    lineBloomBlurTimes: 1,
    lineBloomAlpha: 0.5,
});
this.mapController.addOverlay(this.lineBloom);

通过TrackAnimation设置轨迹线动画效果

1. 创建TrackAnimation动画，并绑定到Polyline

const polyline = new Polyline({
    points: trackList, // 轨迹线坐标数组LatLng[]
    fillcolor: 'rgba(71, 205, 22, 1.0)',
    width: 6,
    strokeWidth: 2,
    strokeColor: 'rgba(8, 32, 150, 1.00)',
    collisionBehavior:SysEnum.CollisionBehavior.COLLIDE_WITH_BASEPOI
});
let forwardStyle = new LineStyle();
forwardStyle.setWidth(12);
// forwardStyle.setStrokeColor(Color.Gray);
// forwardStyle.setStrokeWidth(6);
forwardStyle.setBitmapResource(new ImageEntity('rawfile://Icon_road_green_arrow.png'))
polyline.setTrackForwardStyle(forwardStyle);
let backwardStyle = new LineStyle();
backwardStyle.setWidth(12);
// backwardStyle.setColor(Color.White);
// backwardStyle.setStrokeColor(Color.Gray);
// backwardStyle.setStrokeWidth(6);
backwardStyle.setBitmapResource(new ImageEntity('rawfile://Icon_road_blue_arrow.png'))

polyline.setTrackBackwardStyle(backwardStyle);
let trackAnimate = this.trackAnimate = new TrackAnimation(trackList);
// trackAnimate.setDuration(1000);
// trackAnimate.setTrackPosRadio(1.0, 0.0);
trackAnimate.setTrackPos(trackList[0]);
trackAnimate.setTrackLine(polyline);
trackAnimate.setTrackUpdateListener({
    onTrackUpdate: (pt: LatLng, fAngle: number, fPathFraction: number)=>{
        console.log('TrackAnimation',pt,fAngle,fPathFraction);
    }
})

polyline.setCollisionBehavior(SysEnum.CollisionBehavior.ALWAYS_SHOW)
polyline.setAnimation(trackAnimate);

this.mapController.addOverlay(polyline);

2. 启动动画

this.trackAnimate.setTrackPos(point); // 轨迹点，也可以使用setTrackPosRadio占比表达
this.trackAnimate.setDuration(1000);
this.trackAnimate.start()