全部服务产品
开发者频道
定价
登录
绘制线
下载开发文档

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

绘制折线

通过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)]})
Bloom效果折线

通过配置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);

上一篇

绘制Marker点

下一篇

绘制面

本篇文章对您是否有帮助?