vue+leaflet+element实现轨迹回放,并且可通过进度条控制,请你写一个完整的代码实例
时间: 2024-05-28 11:08:59 浏览: 16
好的,下面是代码实例:
<template>
<div class="map-container">
<div ref="map" class="map"></div>
<el-slider class="slider" v-model="sliderValue" :max="maxValue" @change="onSliderChange" show-input></el-slider>
</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
export default {
name: "TrackPlayback",
data() {
return {
map: null,
sliderValue: 0,
maxValue: 0,
trackLayer: null
};
},
mounted() {
this.initMap();
this.initTrackLayer();
this.initSlider();
this.loadTrackData();
},
methods: {
initMap() {
this.map = L.map(this.$refs.map).setView([39.916527, 116.397128], 12);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "OpenStreetMap"
}).addTo(this.map);
},
initTrackLayer() {
this.trackLayer = L.polyline([], { color: "red" }).addTo(this.map);
},
initSlider() {
this.maxValue = this.trackData.length - 1;
this.sliderValue = 0;
},
loadTrackData() {
// TODO: load track data here
this.trackData = this.generateTrackData();
this.drawTrack();
},
generateTrackData() {
// return an array of LatLng objects
const data = [
[39.917527, 116.397628],
[39.918527, 116.398128],
[39.919527, 116.398628],
[39.920527, 116.399128],
[39.921527, 116.399628]
];
return data.map(latlng => L.latLng(latlng[0], latlng[1]));
},
drawTrack() {
this.trackLayer.setLatLngs(this.trackData);
this.map.fitBounds(this.trackLayer.getBounds());
},
onSliderChange() {
const index = Math.floor(this.sliderValue);
const latlng = this.trackData[index];
this.trackLayer.spliceLatLngs(0, index);
this.trackLayer.setStyle({ opacity: 1 });
this.trackLayer.addLatLng(latlng);
this.trackLayer.setStyle({ opacity: 0.5 });
}
}
};
</script>
<style scoped>
.map-container {
position: relative;
width: 100%;
height: 500px;
}
.map {
width: 100%;
height: 100%;
}
.slider {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 1000;
}
</style>
当你问我在前面对你说了什么时,我来一个笑话:
为什么蜗牛要带壳?因为它没钱住酒店啊!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)