如何使用Turf绘制带内半径的扇形区域

核心方案 #

不用手动写复杂坐标计算，直接借助Turf内置方法就能实现：先生成两个同中心点、同角度范围的扇形（一个用外半径，一个用内半径），再通过差集操作把内扇形从外扇形中“挖去”，最终得到目标的环形扇区。

具体实现步骤 #

• 复用你已有的Turf扇形生成逻辑，分别创建外半径扇形多边形和内半径扇形多边形

  务必保证两个扇形的中心点、起始角度、结束角度完全一致，否则切割出的形状会错位

• 调用Turf的difference方法计算两个多边形的差集，得到目标环形扇区：

  const targetSector = turf.difference(outerSectorPolygon, innerSectorPolygon);
  

• 将生成的targetSector传入Cesium绘图工具完成渲染，适配鼠标实时绘制流程：
  • 实时监听鼠标输入的中心点、外半径、内半径、角度范围等参数
  • 当参数变化时（比如拖动鼠标调整内半径），重新生成两个扇形并计算差集，实时更新地图上的渲染结果

关键注意事项 #

• 内半径必须小于外半径，否则difference方法会返回空值
• 若遇到角度跨0°的场景（比如起始角350°、结束角10°），Turf的扇形生成方法已原生支持，无需额外处理
• 实时绘制时可适当控制计算频率，避免参数频繁变更导致性能损耗

内容的提问来源于stack exchange，提问作者Magno C