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
+28 -7
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00 * @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页 * @Description: 大屏首页
--> -->
@@ -1232,11 +1232,32 @@ export default {
if (!this.carMapPointSource) { if (!this.carMapPointSource) {
this.drawCarMapPoint(item.data); this.drawCarMapPoint(item.data);
} else { } 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(); const [features] = this.carMapPointSource.getFeatures();
// 修改geometry定位 features.setGeometry(new Point([x, y]));
features.set("geometry", new Point(item.data.location));
features.setStyle([ features.setStyle([
new Style({ new Style({
image: new Icon({ image: new Icon({
@@ -1245,10 +1266,11 @@ export default {
// 图标缩放比例 // 图标缩放比例
scale: 0.03, scale: 0.03,
// 将角度转换为弧度,并除以180*π // 将角度转换为弧度,并除以180*π
rotation: (item.data.direction-90) * (Math.PI / 180), rotation: (item.data.direction - 90) * (Math.PI / 180),
}), }),
}), }),
]); ]);
}, 10);
} }
} }
}); });
@@ -1260,7 +1282,6 @@ export default {
* @return {void} * @return {void}
*/ */
drawCarMapPoint(item) { drawCarMapPoint(item) {
console.log(item, "小车点位");
const features = []; const features = [];
const feature = new Feature({ const feature = new Feature({
geometry: new Point(item.location), geometry: new Point(item.location),
@@ -208,7 +208,7 @@
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
v-if="activeName === '生成'" v-if="activeName !== '生成'"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-view" icon="el-icon-view"