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
