我们来用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
网友评论