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 } ] }); } 查看示例