fix:小车打点动画完善
This commit is contained in:
parent
8c54ee60e0
commit
6503d7f09d
@ -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,23 +1232,45 @@ export default {
|
||||
if (!this.carMapPointSource) {
|
||||
this.drawCarMapPoint(item.data);
|
||||
} else {
|
||||
console.log(item.data, "location");
|
||||
// 获取小车图层的features数组
|
||||
const [features] = this.carMapPointSource.getFeatures();
|
||||
// 修改geometry定位
|
||||
features.set("geometry", new Point(item.data.location));
|
||||
features.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.03,
|
||||
// 将角度转换为弧度,并除以180*π
|
||||
rotation: (item.data.direction-90) * (Math.PI / 180),
|
||||
// 获取当前位置和目标位置
|
||||
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();
|
||||
features.setGeometry(new Point([x, y]));
|
||||
features.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.03,
|
||||
// 将角度转换为弧度,并除以180*π
|
||||
rotation: (item.data.direction - 90) * (Math.PI / 180),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
]);
|
||||
}, 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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user