arcgis js 4 使用pixi.js 实现扩散圆

这次我们用pixi.js 做扩散圆和arcgis js结合

我们先定义一下 传入数据结构

let option = {

renderer: {

type: "simple",

symbol: {

innerCircle: {

color: "#ffec15",

radius: 8,

},

outerCircle: {

color: "#ffec15",

},

}

},

data: [

{

geometry: [12697872.012783196, 2577456.5937789795],

attributes: {

name: "深圳"

}

},

{

geometry: [ 113.83277893066406,

22.73249035750797],

attributes: {

name: "北京"

}

},

{

geometry: [12127804.65583251, 4070118.8821315],

attributes: {

name: "西安"

}

}

]

};

我们使用4个sprite类型来做 其中 实心圆和外部三圈的圆

//存放内部实心圆

this.graphics = [];

//分别存放外部三个空心圆

this.outerGraphic1 = [];

this.outerGraphic2 = [];

this.outerGraphic3 = [];

对于symbol 里面的color转换 我们写一个方法转成pixi的color 范式

function getColor(str: string, alpha = 1){

if (alpha > 1 || alpha < 0) {

return "透明度 Error value!";

}

//如果传入常规的颜色值，去除#

str = str.toString();

if (str.startsWith('#')) {

str = str.replace('#', '');

}

alpha = 255 * alpha;

// @ts-ignore

alpha = alpha.toString(16);

str = alpha + str;

alpha = parseInt(str, 16);

return alpha;

}

对于data 数据 ,

toScreen 方法参考链接提示

app 的构建参考链接提示

```javascript

let data = this.options.data;

for(let item of data){

//地理坐标转屏幕坐标

let geo = item.geometry

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