arcgis js 4 使用d3.js 构建虚线动画 （线或者面）
我们来用d3.js 来实现动画虚线 可以应用于polyline
首先数据结构定义
-
let options = {
-
renderer: {
-
type: "simple",
-
symbol: {
-
color: "#e97501",
-
width: "3",
-
dasharray: "10",
-
animation: "dash 20s linear infinite reverse"
-
}
-
},
-
data: [
-
{
-
geometry: [
-
[12610148.27932812, 2653758.051763372],
-
[13517124.081943521, 3656135.9369390993]
-
],
-
attributes: {
-
name: "深圳-上海",
-
}
-
},
-
{
-
geometry: [
-
[12958063.6570659, 4857420.273468611],
-
[12716675.521741385, 3593151.825632137]
-
],
-
attributes: {
-
name: "北京-武汉",
-
}
-
},
-
]
-
};
我们通过一些全局变量保存一些信息
-
this.graphics = new Array();
-
cssTool.createkeyframes();
对于动画类 我们使用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);
-
};
批量转换
更多参考 https://xiaozhuanlan.com/topic/1367820945
