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

//获取圆上坐标
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