绘制弧线 最后更新时间: 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'))
  }
})

效果图如下：