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