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 * @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({
@ -1249,6 +1270,7 @@ export default {
}), }),
}), }),
]); ]);
}, 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),

View File

@ -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"