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
