fix:小车打点动画完善

This commit is contained in:
SunTao 2024-12-02 10:29:27 +08:00
parent 8c54ee60e0
commit 6503d7f09d
2 changed files with 40 additions and 19 deletions

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({
@ -1245,10 +1266,11 @@ export default {
//
scale: 0.03,
// ,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}
*/
drawCarMapPoint(item) {
console.log(item, "小车点位");
const features = [];
const feature = new Feature({
geometry: new Point(item.location),

View File

@ -208,7 +208,7 @@
>
<template slot-scope="scope">
<el-button
v-if="activeName === '已生成'"
v-if="activeName !== '未生成'"
size="mini"
type="text"
icon="el-icon-view"