import { FrameAnimation } from '@/model/FrameAnimation';
|
import { map } from '@/utils/map/index_old';
|
import SatelliteProxy from '@/views/satellitetelemetry/SatelliteProxy';
|
import { unref } from 'vue';
|
|
function GridAnimation() {
|
// 帧动画控制工具
|
this.frameAnimation = new FrameAnimation();
|
this.frameAnimation.fps = 4;
|
this.frameAnimation.timeout = 1000;
|
// 地图绘制图形缓存
|
this.mapViews = {};
|
// 两天之间的卫星遥测动画播放时间
|
this.duration = 4;
|
// 地图网格相关对象
|
this.mapViews = undefined;
|
}
|
|
GridAnimation.prototype = {
|
/**
|
* 开始动画
|
* @param {Array} datas 一组卫星遥测网格数据
|
*/
|
startAnimation(data, drawAnimation) {
|
// const frameData = this.dataPrepare(data);
|
this.nextAnimation(data, drawAnimation);
|
},
|
/**
|
*
|
* @param {*} data
|
* @param {*} startIndex
|
* @param {*} endIndex
|
* @returns
|
*/
|
nextAnimation(data, drawAnimation) {
|
if (data == undefined) return;
|
// for (let i = startIndex; i < data.length - 1; i++) {
|
// // 终点
|
// if (i == endIndex || i == data.length - 1) {
|
// break;
|
// }
|
// const animationData = data.slice(i, i + 2)
|
// // 数据插帧计算
|
// const { count, frameData } = this.dataPrepare(animationData);
|
// // 加入帧动画任务
|
// this.frameAnimation.addTask(count, frameData, drawAnimation);
|
// }
|
// 数据插帧计算
|
const { count, frameData } = this.dataPrepare(data);
|
// 加入帧动画任务
|
this.frameAnimation.addTask(count, frameData, drawAnimation);
|
|
this.start();
|
},
|
/**
|
* 数据准备
|
* 对数据进行插帧处理，插入每一帧对应的颜色和数值
|
*/
|
dataPrepare(data) {
|
const frameData = [];
|
const count = this.duration * this.frameAnimation.fps;
|
|
for (let i = 0; i < data.length; i++) {
|
// 最后一组数据直接插入
|
if (i == data.length - 1) {
|
frameData.push(unref(data[i]));
|
}
|
// 其他数据进行插帧计算
|
else {
|
const d1 = unref(data[i]);
|
const d2 = unref(data[i + 1]);
|
const offsets = [];
|
d1.forEach((value, i) => {
|
let d = 0;
|
if (
|
typeof d2[i].pm25 === 'number' &&
|
typeof value.pm25 === 'number'
|
) {
|
d = (d2[i].pm25 - value.pm25) / count;
|
}
|
offsets.push(d);
|
});
|
frameData.push(d1);
|
// d2 在下一次循环作为 d1 插入动画数据组里
|
for (let t = 1; t < count; t++) {
|
const tmpData = d1.map((v, i) => {
|
const newData = { ...v };
|
if (typeof newData.pm25 === 'number') {
|
newData.pm25 += offsets[i] * t;
|
}
|
newData.pm25 = Math.round(newData.pm25 * 100) / 100;
|
return newData;
|
});
|
frameData.push(unref(tmpData));
|
}
|
}
|
}
|
|
return { frameData, count: count * (data.length - 1) };
|
},
|
|
// drawAnimation(data, index, count) {
|
// SatelliteProxy.clearText(this.mapViews);
|
// this.mapViews.textViews = SatelliteProxy.drawDataText(
|
// this.mapViews.points,
|
// this.gridData,
|
// this.mapViews.textViews
|
// );
|
// SatelliteProxy.drawColor(this.mapViews.gridViews, gridData);
|
// },
|
|
/*******************************动画任务逻辑 -start ******************************/
|
start: function () {
|
if (this.frameAnimation.isStop) {
|
// sector.clearSector();
|
}
|
this.frameAnimation.start();
|
},
|
changeSpeed: function (speed) {
|
this.frameAnimation.changeSpeed(speed);
|
},
|
pause: function () {
|
this.frameAnimation.pause();
|
},
|
stop: function () {
|
// this.factorDatas = undefined;
|
this.frameAnimation.addOnNextTasks(undefined);
|
// this.OnEachFrameCallback = undefined;
|
// this.OnEachTaskEndCallback = undefined;
|
this.frameAnimation.stop();
|
// this._clearMap();
|
},
|
setOnStopCallback: function (callback) {
|
this.frameAnimation.setOnStopCallback(
|
function () {
|
callback();
|
}.bind(this)
|
);
|
},
|
|
runStatus() {
|
return this.frameAnimation.runStatus();
|
},
|
|
/**
|
* 设置是否开启动态绘制速度
|
*/
|
setDynamicSpeed(b, sec) {
|
if (b) {
|
this.frameAnimation.dynamicSpeed = true;
|
this.frameAnimation.taskPeriod = sec;
|
} else {
|
this.frameAnimation.dynamicSpeed = false;
|
this.frameAnimation.taskPeriod = sec;
|
}
|
}
|
};
|
|
export { GridAnimation };
|
