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