美文网首页
arcgis 4 使用pixi.js 实现贝塞尔曲线飞线 (图片

arcgis 4 使用pixi.js 实现贝塞尔曲线飞线 (图片

作者: haibalai | 来源:发表于2022-02-28 21:56 被阅读0次

    我们已经知道怎么实现贝塞尔曲线飞线 我们用图片来代替球类

    首先数据结构定义 其中多了graph 相关就是拖尾运动球的设置

    let option = {

    renderer:{

    type: "simple",

    symbol: {

    lineColor: "#14ff34",

    lineWidth: 2,

    graphColor: "#f4fdff",

    graphRadius: 3,

    graphSpeed: 0.5

    }

    },

    data: [

    {

    geometry: [

    [12958063.6570659, 4857420.273468611],

    [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: "广州-菲律宾",

    }

    }

    ]

    };

    我们通过一些全局变量保存一些信息

    //requestAnimationFrame 的id 方便取消动画用

    this.raf;

    // 保存小球的数组

    this.particles= [];

    this.markT = 0;

    //获取小球的运动速度,因为样式更改中还要用到该属性,所以在构造函数中定义

    this.graphSpeed = this.options.renderer.symbol.graphSpeed;

    在初始的时候

    ```javascript

    for (let i in data) {

    let item = data[i];

    //添加贝塞尔曲线参考上一章

    /----------------------------------------------/

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

    相关文章

      网友评论

          本文标题:arcgis 4 使用pixi.js 实现贝塞尔曲线飞线 (图片

          本文链接:https://www.haomeiwen.com/subject/tfikrrtx.html