fix:小车打点动画完善
This commit is contained in:
parent
8c54ee60e0
commit
6503d7f09d
@ -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"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user