|
@@ -0,0 +1,157 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="车辆轨迹"
|
|
|
+ append-to-body
|
|
|
+ custom-class="dialog_two"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ lock-scroll
|
|
|
+ width="80%">
|
|
|
+ <div id="container" v-if="dialogVisible"></div>
|
|
|
+ <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
|
|
|
+ <h4>轨迹回放控制</h4>
|
|
|
+ <div class="input-item">
|
|
|
+ <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
|
|
|
+ <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
|
|
|
+ <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
|
|
|
+ <span style="color: red">暂无该车辆轨迹信息</span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "trackPlayback",
|
|
|
+ props: {
|
|
|
+ dialogVisible: {
|
|
|
+ type: Boolean
|
|
|
+ },
|
|
|
+ lineArr:Object,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ map: null,
|
|
|
+ marker: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.map && this.map.destroy();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initMap() {
|
|
|
+ this.map = new AMap.Map("container", {
|
|
|
+ resizeEnable: true,
|
|
|
+ center: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
|
|
|
+ zoom: 17
|
|
|
+ });
|
|
|
+ let icon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(52, 26), // 图标尺寸
|
|
|
+ image: 'https://webapi.amap.com/images/car.png',
|
|
|
+ imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ this.marker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
|
|
|
+ // icon: "https://webapi.amap.com/images/car.png",
|
|
|
+ icon: icon,
|
|
|
+ markerMeta: new AMap.Size(28, 28),
|
|
|
+ offset: new AMap.Pixel(-26, -15),
|
|
|
+ autoRotation: true,
|
|
|
+ angle: -15
|
|
|
+ });
|
|
|
+ // 绘制轨迹
|
|
|
+ let polyline = new AMap.Polyline({
|
|
|
+ map: this.map,
|
|
|
+ path: this.lineArr,
|
|
|
+ showDir: true,
|
|
|
+ strokeColor: "#28F", //线颜色
|
|
|
+ // strokeOpacity: 1, //线透明度
|
|
|
+ strokeWeight: 6 //线宽
|
|
|
+ // strokeStyle: "solid" //线样式
|
|
|
+ });
|
|
|
+ let passedPolyline = new AMap.Polyline({
|
|
|
+ map: this.map,
|
|
|
+ path: this.lineArr,
|
|
|
+ strokeColor: "#AF5", //线颜色
|
|
|
+ // strokeOpacity: 1, //线透明度
|
|
|
+ strokeWeight: 6 //线宽
|
|
|
+ // strokeStyle: "solid" //线样式
|
|
|
+ });
|
|
|
+
|
|
|
+ this.marker.on("moving", function (e) {
|
|
|
+ passedPolyline.setPath(e.passedPath);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.map.setFitView();
|
|
|
+ },
|
|
|
+ startAnimation() {
|
|
|
+ this.marker.moveAlong(this.lineArr, 100000);
|
|
|
+ },
|
|
|
+ pauseAnimation() {
|
|
|
+ this.marker.pauseMove();
|
|
|
+ },
|
|
|
+ resumeAnimation() {
|
|
|
+ this.marker.resumeMove();
|
|
|
+ },
|
|
|
+ stopAnimation() {
|
|
|
+ this.marker.stopMove();
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped src="../styles/demo-center.css"></style>
|
|
|
+<style scoped>
|
|
|
+#container {
|
|
|
+ height: 80vh;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.input-card .btn {
|
|
|
+ margin-right: 1.2rem;
|
|
|
+ width: 9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-card .btn:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home-container {
|
|
|
+ padding: 0px 5px 5px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ ::v-deep .el-card__body {
|
|
|
+ padding: 10px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__card {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog {
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ padding: 0 20px 10px 20px !important;
|
|
|
+}
|
|
|
+</style>
|