我们来用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 = [];
在初始的时候
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
