arcgis js 4 使用d3.js 构建缩放圆

我们使用d3.js 与arcgis 构建缩放圆

首先还是先定义数据结构

let options = {

renderer: {

type: "simple",

symbol: {

r: 10, //圆半径

color: "#0cff04", //圆颜色

time1: 800, //放大速度

time2: 800, //缩小速度

r1: 30, //放大的尺寸

r2: 10, //缩小的尺寸

ease1: "easeElasticOut",

ease2: "easePoly"

}

},

data: [

{

geometry: [12702451.34188237, 2577586.8581332113],

attributes: {

name: "1号圆"

}

},

{

geometry: [113.785789, 22.731076],

attributes: {

name: "3号圆"

}

}

]

};

我们构建全局变量存储svg的圆

this.graphics = [];

针对不同圆的缩放效果

```

function getEasing(type) {

let ease;

switch (type) {

case "easeLinear":

ease = d3.easeLinear;

break;

case "easePoly":

ease = d3.easePoly;

break;

case "easePolyIn":

ease = d3.easePolyIn;

break;

case "easePolyOut":

ease = d3.easePolyOut;

break;

case "easePolyInOut":

ease = d3.easePolyInOut;

break;

case "easeQuad":

ease = d3.easeQuad;

break;

case "easeQuadIn":

ease = d3.easeQuadIn;

break;

case "easeQuadOut":

ease = d3.easeQuadOut;

break;

case "easeQuadInOut":

ease = d3.easeQuadInOut;

break;

case "easeCubic":

ease = d3.easeCubic;

break;

case "easeCubicIn":

ease = d3.easeCubicIn;

break;

case "easeCubicOut":

ease = d3.easeCubicOut;

break;

case "easeCubicInOut":

ease = d3.easeCubicInOut;

break;

case "easeSin":

ease = d3.easeSin;

break;

case "easeSinIn":

ease = d3.easeSinIn;

break;

case "easeSinOut":

ease = d3.easeSinOut;

break;

case "easeSinInOut":

ease = d3.easeSinInOut;

break;

case "easeExp":

ease = d3.easeExp;

break;

case "easeExpIn":

ease = d3.easeExpIn;

break;

case "easeExpOut":

ease = d3.easeExpOut;

break;

case "easeExpInOut":

ease = d3.easeExpInOut;

break;

case "easeCircle":

ease = d3.easeCircle;

break;

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