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

标签：case,缩放,ease,js,break,arcgis,easePoly,d3
来源： https://www.cnblogs.com/haibalai/p/15827315.html