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';
/**
线动画
@paramoptions[]
**/
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
