arcgis 4 构建插值线性动画 （二）

调用

• let lineSymbol2 = {
• type: "simple-line",
• color: "#ffffff",
• width: "2",
• style: "solid"
• },
• let lineSymbol = {
• type: "simple-line",
• color: "#1cccdf",
• width: "3",
• style: "solid"
• },
• let paths = [
• [
• [12709310.232279215, 2544308.84766577],
• [12691271.093603922, 2593840.0419945405],
• [12662836.51908185, 2633893.0448159534]
• ]
• ]
• let myMapId = {
• layerName: "gralyer1",
• mapId: this.view,
• dynamicLine: lineSymbol,
• staticLine: lineSymbol2,
• isInsert: true,
• isBaseLine: true,
• isClear: false
• };
• this.myLine = new PathAnimation(myMapId);
• this.myLine.setData(paths);
• this.myLine.setSpeed(5);
• this.myLine.open();

线性动画主类

```javascript

import realTimeTrance from './realTimeTrance';

/**

• 线动画
• @param options[]
  **/

export class PathAnimation {
constructor(options) {
this.options = {
layerName: 'gralyer',
view: null,
time: 100,
isInsert: null, //是否进行插值算法
isBaseLine: null, //是否需要加基线
dynamicLine: {
//动线样式
type: 'simple-line',
color: [0, 0, 0, 1],
width: '1',
style: 'solid'
},
staticLine: {
//基线样式
type: 'simple-line',
color: '#F44336',
width: '2',
style: 'solid'
},
isClear: null
};
this.initialize(options);
}

initialize(options) {
this.setOptions(this, options);
this._view = this.options.view;
this.time = this.options.time;
this.linePoints = null;
this.isOpen = false;
this.speed = 2;
this.createTrance();
this.index = 0;
}

//初始化将传入参数赋值
setOptions(obj, options) {
for (const i in options) {
obj.options[i] = options[i];
}
return obj.options;
}

setLineSymbol(symbol) {
this.realTimeTrance.setLineSymbol(symbol);
}

//初始化线
createTrance() {
const self = this;
const option = {
view: self._view,
lineSymbol: self.options.dynamicLine,
layerName: self.options.layerName
};
self.realTimeTrance = new realTimeTrance(option);
}

//设置点数据
setData(lineData) {
this.lineData = lineData;
if (this.options.isInsert) {
this.linePoints = this.getNewData(lineData);
} else {
this.linePoints = lineData[0];
}
return this.linePoints;
}

 更多参考 https://xiaozhuanlan.com/topic/0173492568