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