arcgis js 4 使用pixi.js 构建道路发光闪烁线
我们来用pixi.js 构建发光的线,这个可以用于交通道路端的可视化
首先数据结构定义 其
-
let option = {
-
renderer: {
-
type: "simple",
-
symbol: {
-
lineColor: "#48ff9a",
-
lineWidth: 3,
-
filterColor: "#48ff9a",
-
filterStrength: 2,
-
filterSpeed: 1.5
-
}
-
},
-
data: [
-
{
-
geometry: [[12609052.185915885, 2656339.6069692653],
-
[12716675.521741385, 3593151.825632137]],
-
attributes: {
-
name: "广州-武汉",
-
}
-
},
-
{
-
geometry: [[12609052.185915885, 2656339.6069692653],
-
[11855688.835137373, 3458622.655850267]],
-
attributes: {
-
name: "广州-重庆",
-
}
-
},
-
{
-
geometry: [[12609052.185915885, 2656339.6069692653],
-
[13521404.55552746, 3666531.372785874]],
-
attributes: {
-
name: "广州-上海",
-
}
-
},
-
{
-
geometry: [[12609052.185915885, 2656339.6069692653],
-
[13785570.925280986, 1381981.4713991268]],
-
attributes: {
-
name: "广州-菲律宾",
-
}
-
}
-
-
]
-
};
我们通过一些全局变量保存一些信息
-
//创建列表存放线
-
this.graphics = [];
-
//获取动画速度
-
this.tweenTime = this.options.renderer.symbol.filterSpeed;
-
//发光滤镜
-
this.glowFilter = null;
线的坐标转换
```javascript
function pathToScreen(geometry) {
let arr = [];
for (let item of geometry) {
let newPoint = toScreen(item)
更多参考 https://xiaozhuanlan.com/topic/5428170396