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