折线（MultiPolyline）

折线一般用于运动轨迹显示、路线规划显示 等场景中。
MultiPolyline类 是以图层的方式对折线进行单条或批量绘制，以及删改等操作。

实例说明：
以下代码示例，演示了两条折线分别绑定了两种不同样式（您可针对实际情况灵活使用）
折线类参考：MultiPolyline
样式详细参数，参考：PolylineStyle
折线数据格式，参考：PolylineGeometry

//初始化地图
var map = new TMap.Map('mapContainer', {
    center: new TMap.LatLng(40.038515, 116.272185),//地图显示中心点
    zoom:16 //缩放级别
});
 
//创建 MultiPolyline
var polylineLayer = new TMap.MultiPolyline({
    id: 'polyline-layer', //图层唯一标识
    map: map,//设置折线图层显示到哪个地图实例中
    //折线样式定义
    styles: {
        'style_blue': new TMap.PolylineStyle({
            'color': '#3777FF', //线填充色
            'width': 6, //折线宽度
            'borderWidth': 5, //边线宽度
            'borderColor': '#FFF', //边线颜色
            'lineCap': 'butt' //线端头方式
        }),
        'style_red': new TMap.PolylineStyle({
            'color': '#CC0000', //线填充色
            'width': 6, //折线宽度
            'borderWidth': 5, //边线宽度
            'borderColor': '#CCC', //边线颜色
            'lineCap': 'round' //线端头方式
        })
    },
    //折线数据定义
    geometries: [
        {//第1条线
            'id': 'pl_1',//折线唯一标识，删除时使用
            'styleId': 'style_blue',//绑定样式名
            'paths': [new TMap.LatLng(40.038540, 116.272389), new TMap.LatLng(40.038844, 116.275210), new TMap.LatLng(40.041407, 116.274738)]
        },
        {//第2条线
            'id': 'pl_2',   
            'styleId': 'style_red',
            'paths': [new TMap.LatLng(40.039492,116.271893), new TMap.LatLng(40.041562,116.271421), new TMap.LatLng(40.041957,116.274211)]
        }
    ]
});

查看示例

效果截图：

添加、删除、更新折线

删除折线
接上例，本例调用remove方法删除其中的红色折线

polylineLayer.remove("pl_2")

添加折线
本例调用add方法重新添加一条红色折线

//新折线的坐标点串
var polyArray=[
    [40.04139033988746,116.27439379692078],
    [40.041538187788476,116.2742006778717],
    [40.04139033988746,116.27317070960999],
    [40.041258919261864,116.27314925193787],
    [40.041078215488064,116.27226948738098],
    [40.04068395104652,116.2722909450531],
    [40.04043753461282,116.2721836566925],
    [40.040273256495645,116.27244114875793],
    [40.0393368636699,116.27265572547913]
]
//转为LatLng数组
polyArray = polyArray.map(p => {
    return new TMap.LatLng(p[0], p[1]);
});
polylineLayer.add({//新的折线添加到图层中
    'id': 'pl_2',   
    'styleId': 'style_red',
    'paths': polyArray
})

效果截图：

更新折线
与添加、删除操作类似，可移步：MultiPolyline类参考

实战路线规划

本例，我们将通过WebServiceAPI的路线规划接口，计算得到 "中国技术交易大厦"到 “希格玛大厦” 的驾车路线规划结果，并通过JavascriptAPI GL的折线(MultiPolyline)显示在地图中。

先上最终效果截图：
注：实际应用中，一般会在起、终点位置分别显示两个点标记(Marker)，因并非本文主要内容，可移步MultiMarker了解

代码实践讲解：

//注：本例仅为说明流程，不保证严谨
 
var map;
function initMap(){//程序入口
    //初始化地图
    map = new TMap.Map('mapContainer', {
        center: new TMap.LatLng(39.980619,116.321277),//地图显示中心点
        zoom:15 //缩放级别
    });
 
    //WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
    var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
    url+="?from=39.984039,116.307630";  //起点坐标
    url+="&to=39.977263,116.337063";  //终点坐标
    url+="&output=jsonp&callback=cb" ;  //指定JSONP回调函数名，本例为cb
    url+="&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"; //开发key，可在控制台自助创建
 
    //发起JSONP请求，获取路线规划结果
    jsonp_request(url);
}
 
//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
function jsonp_request(url){
    var script=document.createElement('script');
    script.src=url;
    document.body.appendChild(script);
}
 
//定义请求回调函数
function cb(ret){
    //从结果中取出路线坐标串
    var coors = ret.result.routes[0].polyline, pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩，因此需要解压）
    var kr = 1000000;
    for (var i = 2; i < coors.length; i++) {
      coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
    }
    //将解压后的坐标生成LatLng数组
    for (var i = 0; i < coors.length; i += 2) {
      pl.push(new TMap.LatLng(coors[i], coors[i+1]));
    }
    display_polyline(pl)//显示路线
}
 
function display_polyline(pl){
    //创建 MultiPolyline显示折线
    var polylineLayer = new TMap.MultiPolyline({
        id: 'polyline-layer', //图层唯一标识
        map: map,//绘制到目标地图
        //折线样式定义
        styles: {
            'style_blue': new TMap.PolylineStyle({
                'color': '#3777FF', //线填充色
                'width': 6, //折线宽度
                'borderWidth': 5, //边线宽度
                'borderColor': '#FFF', //边线颜色
                'lineCap': 'round' //线端头方式
            })
        },
        //折线数据定义
        geometries: [
            {
                'id': 'pl_1',//折线唯一标识，删除时使用
                'styleId': 'style_blue',//绑定样式名
                'paths': pl
            }
        ]
    });
}

查看示例

如果开发者希望表现实时路况信息, 可以使用折线的彩虹线功能,具体信息请查看MultiMarker的rainbowPaths属性。