线类覆盖物支持在地图上绘制折线、虚线、带纹理的线,通过这些可以绘制各种各样的规划路线或物体轨迹。
通过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);
上一篇
下一篇
本篇文章对您是否有帮助?