arcgis js 4 使用pixi.js 构建箭头导航线

我们来用pixi.js 来实现箭头导航线动画

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

let option = {

renderer: {

type: "simple",

symbol: {

lineColor: "#ffff00",

lineWidth: 4,

arrowSize: 15,

}

},

data: [

{

geometry: [

[12610148.27932812, 2653758.051763372],

[13517124.081943521, 3656135.9369390993]

],

attributes: {

name: "深圳-上海",

}

},

{

geometry: [

[12958063.6570659, 4857420.273468611],

[12716675.521741385, 3593151.825632137]

],

attributes: {

name: "北京-武汉",

}

},

]

};

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

// 动画id

this.raf;

// 存放导航线数组

this.graphics = [];

在初始的时候

```javascript

for (let i in data) {

let item = data[i];

//获取屏幕坐标

let geometry = item.geometry

let XY1 = toScreen(geometry[0]);

let XY2 = toScreen(geometry[1]);

//画箭头图形

let arrow = new PIXI.Graphics();

//获取线条颜色，粗细和箭头尺寸大小

let lineWidth = this.options.renderer.symbol.lineWidth,

lineColor = this.options.renderer.symbol.lineColor,

arrowSize = this.options.renderer.symbol.arrowSize;

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