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