arcgis js 4 使用pixi.js 绘制贝塞尔曲线

我们先定义一下贝塞尔曲线的数据结构

let option = {
renderer:{
type: "simple",
symbol: {
lineColor: "#14ff34",
lineWidth: 3
}
},
data: [
{
geometry: [
[12958063.6570659, 4857420.273468611],
[12716675.521741385, 3593151.825632137]
],
attributes: {
name: "北京-武汉",
}
},
{
geometry: [
[12609052.185915885, 2656339.6069692653],
[11855688.835137373, 3458622.655850267]
],
attributes: {
name: "广州-重庆",
}
},
{
geometry: [
[12609052.185915885, 2656339.6069692653],
[13521404.55552746, 3666531.372785874]
],
attributes: {
name: "广州-上海",
}
},
{
geometry: [
[12609052.185915885, 2656339.6069692653],
[13785570.925280986, 1381981.4713991268]
],
attributes: {
name: "广州-菲律宾",
}
}
 
]
};

贝塞尔曲线最重要是获取中间那个点

//获取贝塞尔曲线中间控制点的坐标
getPoint(sx, sy, ex, ey){
//获取开始，结束点所在直线1公式
let k = (ey - sy)/(ex - sx);
let b = (k(sy + ey) + (sx + ex))/(2k);
//以开始点为旋转中心，逆时针旋转30度，获得该直线2公式
let angle = (Math.atan2(ey - sy, ex - sx))/(Math.PI/180) + 30;
let k1 = Math.tan((Math.PIangle)/180); let b1 = sy - k1sx;
//中间控制点即为直线1和2的交点
let c1x = (b - b1)/(k1 + 1/k),
c1y = k1*c1x + b1;

 
 
 更多参考https://xiaozhuanlan.com/topic/0781345692