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);

};

//擷取圓上坐标
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