arcgis js 4 使用pixi.js 构建喷泉粒子
我们来用pixi.js 来构建喷泉粒子
首先数据结构定义
-
let option = {
-
renderer: {
-
type: "simple",
-
symbol: {
-
startColor: "#beffd1",
-
endColor: "#91ffd7",
-
maxLifetime: 0.35,
-
maxParticles: 300
-
}
-
},
-
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": {
"start": 1,
"end": 0.3
},
"scale": {
"start": 0.5,
"end": 1
},
"color": {
"start": this.options.renderer.symbol.startColor,
"end": this.options.renderer.symbol.endColor
},
"speed": {
"start": 600,
"end": 200
},
"acceleration": {
"x": 0,
"y": 3000
},
"startRotation": {
"min": 260,
"max": 280
},
"rotationSpeed": {
"min": 0,
"max": 0
},
"lifetime": {
"min": 0.25,
"max": this.options.renderer.symbol.maxLifetime
更多参考 https://xiaozhuanlan.com/topic/7894063521
