arcgis js 4 使用pixi.js 构建火焰粒子

我们来用pixi.js 来构建火焰粒子

首先数据结构定义

• let option = {
• renderer: {
• type: "simple",
• symbol: {
• startColor: "#ffb256",
• endColor: "#fff25f",
• maxLifetime: 0.3,
• maxParticles: 200
• }
• },
• data: [
• {
• geometry: [12697872.012783196, 2577456.5937789795],
• attributes: {
• name: "深圳"
• }
• },
• {
• geometry: [12956152.73135875, 4855356.473704897],
• attributes: {
• name: "北京"
• }
• },
• {
• geometry: [12127804.65583251, 4070118.8821315],
• attributes: {
• name: "西安"
• }
• }
•  
• ]
• };

我们使用pixi 粒子插件

• import {Emitter} from "pixi-particles";

火焰粒子的具体参数，由于参数过于复杂，我们抽选出简单的参数来配置
```javascript

• this.configuration = {
• "alpha": {
• "list": [
• {"value":0.62, "time":0},
• {"value":0, "time":0.6},
• {"value":0, "time":0.7},
• {"value":0, "time":1}
• ],
• "isStepped": false
• },
• "scale": {
• "list": [
• {"value":0.2, "time":0},
• {"value":0.4, "time":1}
• ],
• "isStepped": false
• },
• "color": {
• "start" : this.options.renderer.symbol.startColor,
• "end": this.options.renderer.symbol.endColor,
• },
• "speed": {
• "list": [
• {"value":400, "time":0},
• {"value":300, "time":0.7},
• {"value":300, "time":1},
• ],
• "isStepped": true
• },
• "startRotation": {
• "min": 265,
• "max": 275
• },
• "rotationSpeed": {
• "min": 30,
• "max": 30
• },
• "lifetime": {
• "min": 0.1,
• "max": 0.3

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