arcgis js 4 使用pixi.js 构建爆炸粒子效果

我们来用pixi.js 来实现爆炸粒子

首先数据结构定义

let option = {

renderer:{

type:'simple',

symbol:{

url:'',

json:'',

spriteScale: 0.5,

animationSpeed: 0.6,

spriteTint: "#FFFFFF"

}

},

data: [

{

geometry: [12956152.73135875, 4855356.473704897],

attributes: {

name: "北京"

}

},

{

geometry: [12697872.012783196, 2577456.5937789795],

attributes: {

name: "深圳"

}

}

]

};

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

this.graphics = [];

在初始的时候

```javascript

for (let i in data) {

let item = data[i];

let geo = item.geometry

//获取转换后的屏幕坐标

let XY1 = toScreen(geo);

//加载需要使用的精灵图，加载完成后调用函数onAssetsLoaded

const loader = new PIXI.Loader();

//爆炸位图配置文件

loader.add('spritesheet', './static/spritesheet/mc.json');

loader.load(onAssetsLoaded);

//改变函数onAssetsLoaded中的this指向

let that = this;

function onAssetsLoaded() {

//创建存放纹理的列表

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