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)

posted @ 2022-01-20 17:20  haibalai  阅读(174)  评论(0编辑  收藏  举报