ArcGIS for JS 绘制 圆弧

ArcGIS for JS 中并未提供绘制圆弧或是扇形的API，但在开发过程中又确实需要，在一番研究后找到了合适的方法生成圆弧。

1. 通过Circle生成圆弧

通过绘制 Circle 时，增加 numberOfPoints 参数，可以控制圆弧的精度，从而达到绘制圆弧的目的。

// 创建一个circle，并规定生成圆的点数
const circle = new Circle({
  center: new Point({
    longitude: 120.38,
    latitude: 36.06,
  }),
  geodesic: true,
  radius: 2000,
  numberOfPoints: 360,
})

这样生成的圆，正好是360个点，也就是说，每隔1度生成一个点，圆弧无非是圆上的一部分，所以，我们只需要取出圆上的一部分点即可。

// 获取rings
const rings = circle.rings[0]

// 模拟圆弧其角度
const startAngle = 20
const endAngle = 80

// 生成圆弧的rings
const arcRings = [[...rings.slice(startAngle, endAngle + 1), [120.38, 36.06]]]

这样，我们就得到了圆弧的 rings，接下来，就可以通过 Polygon 生成圆弧了。

// 创建一个graphic
const graphic = new Graphic({
  geometry: new Polygon({
    rings: arcRings,
  }),
  symbol: new SimpleFillSymbol({
    color: [255, 0, 0, 0.5],
    outline: {
      color: [255, 0, 0, 0.5],
      width: 2,
    },
  }),
})

// 添加扇形到地图
view.graphics.add(graphic)

特殊情况

起始角度较大，以至于结束角度大于了360度（或者说是结束角度较小，扇形朝上时），这时取点可能需要考虑分段取点，其实我们可以通过双倍取 Circle 的 rings，然后取出我们需要的部分即可：

// 获取rings
const rings = [...circle.rings[0], ...circle.rings[0]]

// 模拟圆弧其角度
const startAngle = 320
const endAngle = 50

// 生成圆弧的rings
const arcRings = [[...rings.slice(startAngle, endAngle + 1), [120.38, 36.06]]]

示例与源码

2. 通过自定义方法生成圆弧

自定义方法, 根据中心经纬度, 半径, 起始角度, 结束角度, 生成圆弧的方法如下:

/**
 *  生成圆弧的 rings
 * @param startAngle 开始角度
 * @param endAngle 结束角度
 * @param radius 半径
 * @param center 圆心
 */
function generateArc(
  startAngle: number,
  endAngle: number,
  radius: number,
  center: [number, number]
) {
  const pointNum: number = 100
  const points: [number, number][] = []
  let sin: number, cos: number, x: number, y: number, angle: number
  for (let i: number = 0; i <= pointNum; i++) {
    angle = startAngle + ((endAngle - startAngle) * i) / pointNum
    sin = Math.sin((angle * Math.PI) / 180)
    cos = Math.cos((angle * Math.PI) / 180)
    x = center[0] + radius * sin
    y = center[1] + radius * cos
    points.push([x, y])
  }
  return [points]
}

// 示例用法
const arcRings = generateArc(0, 90, 1000, [120.38, 36.06])

// 创建一个graphic
const graphic = new Graphic({
  geometry: new Polygon({
    rings: arcRings,
  }),
  symbol: new SimpleFillSymbol({
    color: [255, 0, 0, 0.5],
    outline: {
      color: [255, 0, 0, 0.5],
      width: 2,
    },
  }),
})

// 添加扇形到地图
view.graphics.add(graphic)

注意事项

• 生成的圆弧的点数越多，圆弧越平滑，但是性能越差，所以需要根据实际情况进行取舍。
• 在正常创建的地图中，一般是3857也就是102100坐标系，改方法生成的圆弧是在4326坐标系下，因此其展示的时候为椭圆弧，你需要在创建地图时，指定坐标系为4326，但是一般地图均是在102100坐标系下，所以这种方法一般不适用于正常的地图，但是如果你的地图是在4326坐标系下，那么这种方法就可以使用了。

示例与源码