arcgis js 4 使用d3.js 构建虚线动画圆（根据地理

我们来用d3.js 来实现虚线动画圆

首先数据结构定义

let options = {

renderer: {

type: "simple",

symbol: {

r: 7000,

color: "#e97501",

width: "3",

dasharray: "10",

animation: "dash 15s linear infinite reverse"

}

},

data: [

{

geometry: [12702451.34188237, 2577586.8581332113],

attributes: {

name: "1号圆环"

}

},

{

geometry: [113.8054826, 22.7357998],

spatialReference: {

wkid: 4326

},

attributes: {

name: "2号圆环"

}

}

]

};

我们通过一些全局变量保存一些信息

this.graphics = new Array(); //存储svg圆对象

this.circleCoord = new Array(); //存储圆上坐标

对于动画类 我们使用css来构建cssTool

export const cssTool = {};

cssTool.createkeyframes = function () {

const runkeyframes =`@keyframes dash {

to {

stroke-dashoffset: 1000;

}

}`

const style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = runkeyframes;

document.getElementsByTagName('head')[0].appendChild(style);

};

cssTool.create = function (runkeyframes) {

const style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = runkeyframes;

document.getElementsByTagName('head')[0].appendChild(style);

};

获取圆上坐标 Circle 为esri 的Circle

```javascript

//获取圆上坐标

function getCirCoord(item) {

let symbol = this.options.renderer.symbol;

let geo = item.geometry

let geometry = coordOnCircle(geo,symbol.r,0,0);

return geometry;

}

//获取圆上一点

function coordOnCircle(coordinate, dis, ringInd, pointInd) {

//ringInd和pointInd分别指环索引和点索引

let geometry = null;

let coordinateType = getXYType(coordinate[0],coordinate[1]);

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