arcgis js 4 使用pixi.js 构建道路发光闪烁线

原创

haibalai2009 2022-03-08 15:26:36 ©著作权

©著作权归作者所有：来自51CTO博客作者haibalai2009的原创作品，请联系作者获取转载授权，否则将追究法律责任

我们来用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;

线的坐标转换

function pathToScreen(geometry) {
let arr = [];
for (let item of geometry) {
let newPoint = toScreen(item)

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