绘制弧线 最后更新时间: 2025年10月10日

地图上绘制的线是由 Arc 类定义实现的,线由一组三个经纬度坐标(LatLng对象)点连接而成圆弧。

第一步,绘制弧线

let x = 39.904979;
let y = 116.40964;
// 绘制一个经过乌鲁木齐经过北京到哈尔滨弧形
for (let i = 0; i < 10; i++) {
 let x_ = 0;
 let y_ = 0;
 x_ = Math.random() * 0.5 - 0.25;
 y_ = Math.random() * 0.5 - 0.25;
 let x_2 = 0;
 let y_2 = 0;
 x_2 = Math.random() * 0.5 - 0.25;
 y_2 = Math.random() * 0.5 - 0.25;
 let x_3 = 0;
 let y_3 = 0;
 x_3 = Math.random() * 0.5 - 0.25;
 y_3 = Math.random() * 0.5 - 0.25;
 // 数据准备
 let arcOptions: ArcOptions = new ArcOptions().point(
 new LatLng(x+x_, y+y_), new LatLng(x+x_3,y+y_3),
 new LatLng(x+x_2, y+y_2)).setStrokeColor(ColorUtil.colorStringToNumber("#ff0000"))
 // 绘制弧线并保存句柄
 this.arcList.push(this.aMap.addArc(arcOptions));
}

第二步,修改弧线属性

HeatmapTileProvider 是生成热力图的核心类,一些基础用法可参考如下代码:

// 通过句柄修改弧线的属性
this.arcList.forEach((item: Arc | undefined) =>{
 const colorNow = item?.getStrokeColor()
 if(colorNow == ColorUtil.colorStringToNumber('#00ff00')){
 item?.setStrokeColor(ColorUtil.colorStringToNumber('#ff0000'))
 }else{
 item?.setStrokeColor(ColorUtil.colorStringToNumber('#00ff00'))
 }
})

效果图如下: