arcgis js 4 使用pixi.js 实现贝塞尔曲线飞线

我们已经知道怎么实现贝塞尔曲线， 那么贝赛尔飞线 我们可以模拟sprite 沿着线的轨迹运动有点像飞线的感觉了

首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置

let option = {

renderer:{

type: "simple",

symbol: {

lineColor: "#14ff34",

lineWidth: 2,

graphColor: "#f4fdff",

graphRadius: 3,

graphSpeed: 0.5

}

},

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: "广州-菲律宾",

}

}

]

};

我们通过一些全局变量保存一些信息

//requestAnimationFrame 的id 方便取消动画用

this.raf;

// 保存小球的数组

this.circles = [];

this.markT = 0;

//获取小球的运动速度，因为样式更改中还要用到该属性，所以在构造函数中定义

this.graphSpeed = this.options.renderer.symbol.graphSpeed;

在初始的时候

```javascript

for (let i in data) {

let item = data[i];

//添加贝塞尔曲线参考上一章

/----------------------------------------------/

//画一组8个小球，放入列表中

let balls = [];

for (let i = 0; i < 8; i++) {

let circle = new PIXI.Graphics();

//小球透明度逐渐减小

let alpha = 1/(i*0.5 + 1);

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