fix:小车打点动画完善

This commit is contained in:
2024-12-02 10:29:27 +08:00
parent 8c54ee60e0
commit 6503d7f09d
2 changed files with 40 additions and 19 deletions
+27 -6
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-29 17:41:31
* @LastEditTime: 2024-12-02 10:24:07
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@@ -1232,11 +1232,32 @@ export default {
if (!this.carMapPointSource) {
this.drawCarMapPoint(item.data);
} else {
console.log(item.data, "location");
// 获取小车图层的features数组
// 获取当前位置和目标位置
const currentLocation = this.carMapPointSource
.getFeatures()[0]
.getGeometry()
.getCoordinates();
const targetLocation = item.data.location;
// 计算两点之间的差值
const dx = (targetLocation[0] - currentLocation[0]) / 100;
const dy = (targetLocation[1] - currentLocation[1]) / 100;
// 设置计数器
let count = 0;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
const timer = setInterval(() => {
count++;
if (count >= 100) {
clearInterval(timer);
return;
}
// 计算当前帧的位置
const x = currentLocation[0] + dx * count;
const y = currentLocation[1] + dy * count;
// 更新小车位置
const [features] = this.carMapPointSource.getFeatures();
// 修改geometry定位
features.set("geometry", new Point(item.data.location));
features.setGeometry(new Point([x, y]));
features.setStyle([
new Style({
image: new Icon({
@@ -1249,6 +1270,7 @@ export default {
}),
}),
]);
}, 10);
}
}
});
@@ -1260,7 +1282,6 @@ export default {
* @return {void}
*/
drawCarMapPoint(item) {
console.log(item, "小车点位");
const features = [];
const feature = new Feature({
geometry: new Point(item.location),
@@ -208,7 +208,7 @@
>
<template slot-scope="scope">
<el-button
v-if="activeName === '生成'"
v-if="activeName !== '生成'"
size="mini"
type="text"
icon="el-icon-view"