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;
