one-YI
/
cloud-ui
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat():合并

dev
chentaisen 2024-10-08 09:21:24 +08:00
parent 4daecfda92
commit 8ee741606c
1 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/car/trajectory/index.vue
View File

@ -6,7 +6,7 @@
<script> <script>
import { getDataByRedis } from "@/api/car/ListManager"; import { getDataByRedis } from '@/api/car/ListManager'
export default { export default {
data() { data() {
@ -16,8 +16,8 @@ export default {
carMarker: null, carMarker: null,
carVin: this.$route.query.carVin || null, carVin: this.$route.query.carVin || null,
intervalId: null, intervalId: null,
data: {}, // 数据存储变量 data: {} // 数据存储变量
}; }
}, },
created() { created() {
// 创建定时器，每隔一定时间间隔调用fetchData方法 // 创建定时器，每隔一定时间间隔调用fetchData方法
@ -26,26 +26,26 @@ export default {
methods: { methods: {
async fetchData() { async fetchData() {
try { try {
const res = await getDataByRedis(this.carVin); const res = await getDataByRedis(this.carVin)
this.data = res.data; this.data = res.data
// 更新车辆位置 // 更新车辆位置
this.updateCarMarker(); this.updateCarMarker()
} catch (error) { } catch (error) {
console.error("Error fetching vehicle data:", error); console.error('Error fetching vehicle data:', error)
} }
}, },
initMap() { initMap() {
this.map = new AMap.Map('map', { this.map = new AMap.Map('map', {
center: [116.397428, 39.90923], // 初始化地图中心点 center: [116.397428, 39.90923], // 初始化地图中心点
zoom: 20, // 地图缩放级别 zoom: 20 // 地图缩放级别
}); })
this.polyline = new AMap.Polyline({ this.polyline = new AMap.Polyline({
map: this.map, map: this.map,
path: [], // 初始为空 path: [], // 初始为空
strokeColor: '#3366FF', strokeColor: '#3366FF',
strokeWeight: 5, strokeWeight: 5
}); })
// 初始化车辆模型标记 // 初始化车辆模型标记
this.carMarker = new AMap.Marker({ this.carMarker = new AMap.Marker({
@ -53,43 +53,41 @@ export default {
position: [116.397428, 39.90923], // 初始位置 position: [116.397428, 39.90923], // 初始位置
icon: 'https://webapi.amap.com/images/car.png', icon: 'https://webapi.amap.com/images/car.png',
offset: new AMap.Pixel(-26, -13), offset: new AMap.Pixel(-26, -13),
autoRotation: true, autoRotation: true
}); })
}, },
updateCarMarker() { updateCarMarker() {
if (this.data.longitude && this.data.latitude) { if (this.data.longitude && this.data.latitude) {
const newPoint = [this.data.longitude, this.data.latitude]; const newPoint = [this.data.longitude, this.data.latitude]
// 更新车辆模型位置 // 更新车辆模型位置
this.carMarker.setPosition(newPoint); this.carMarker.setPosition(newPoint)
// 更新路径线条坐标 // 更新路径线条坐标
const path = this.polyline.getPath(); const path = this.polyline.getPath()
path.push(new AMap.LngLat(this.data.longitude, this.data.latitude)); path.push(new AMap.LngLat(this.data.longitude, this.data.latitude))
this.polyline.setPath(path); this.polyline.setPath(path)
// 调整地图视野 // 调整地图视野
this.map.setCenter(newPoint); this.map.setCenter(newPoint)
}
} }
}, },
},
mounted() { mounted() {
this.$store.dispatch('app/toggleSideBarHide',true); this.$store.dispatch('app/toggleSideBarHide', true)
document.querySelector('.navbar').style.display = 'none'; document.querySelector('.navbar').style.display = 'none'
document.querySelector('.tags-view-container').style.display = 'none'; document.querySelector('.tags-view-container').style.display = 'none'
const script = document.createElement('script')
const script = document.createElement('script'); script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7df1851ffb059e1e75c31b9bcd892b6b'
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7df1851ffb059e1e75c31b9bcd892b6b';
script.onload = () => { script.onload = () => {
this.initMap(); this.initMap()
}; }
document.head.appendChild(script); document.head.appendChild(script)
this.initMap(); this.initMap()
}
}, }
};
</script> </script>