simulation-front/src/views/workManagement/openDriver.vue

<template>
	<div id="ThreeJS" class="three_div"></div>
</template>


<script>
	import {
		getStdMapMixin
	} from "@/mixin/workManagement/getStdMapMixin.js"
	import {
		openDriveMixin
	} from "@/mixin/workManagement/openDriveMixin.js"


	export default {
		name: "OpenDrive",
		mixins: [getStdMapMixin, openDriveMixin],
		components: {
			// vueQr,
			// glHome,
		},
		data() {
			return {
				isLoaded: false,
				lineArr:[]
			};
		},
		props: {
			mapId: {
				type: String,
				default: () => ""
			},
			startPoint: {
				type: Object,
				default: () => {}
			},
			endPoint: {
				type: Object,
				default: () => {}
			},
			sections: {
				type: Array,
				default: () =>[]
			}
		},
		methods: {
			changeMap(fileUrl) {
				this.onFileSelect(fileUrl);
				this.reloadOdrMap();
			},
			getMapDetails(mapId) {
			    if(mapId == "2"){
					if(this.isLoaded == true){
						this.reloadNewMap("/map/mine4.xodr");
					}else{
						this.loadMap("/map/mine4.xodr");
						this.isLoaded = true;
					}
					return;
				}
				
				this.$axios({
					method: "post",
					url: this.$api.workManagement.mapDetails,
					data: {
						mapId
					}
				}).then((res) => {
					if (res.code == 200) {
						if(this.isLoaded == true){
							this.reloadNewMap(res.info.mapPath);
						}else{
							this.loadMap(res.info.mapPath);
							this.isLoaded = true;
						}
						
					}
				})
			}
		},
		mounted() {
		},
		updated() {

		},
		watch: {
			mapId: {
				handler(newVal, oldVal) {
					this.getMapDetails(newVal);
				}
			},
			startPoint: {
				handler(newVal, oldVal) {
					newVal.type="start";
					this.drawPoint(newVal);
				}
			},
			endPoint: {
				handler(newVal, oldVal) {
					newVal.type="end";
					this.drawPoint(newVal);
				}
			},
			sections: {
				handler(newVal, oldVal) {
					if(this.lineArr && this.lineArr.length > 0){
						this.lineArr.forEach((elem, index) => {
							this.clearColorLine(elem.roadId, elem.laneId);
						})
						this.clearPoint();
					}
					newVal.forEach((elem, index) => {
						this.fillColorLine(elem.roadId, elem.laneId);
					})
					this.lineArr = newVal;
				}
			}
		}
	};
</script>
<style scoped lang="less">
	.three_div {
		width: 100% !important;
		height: 100% !important;
	}

	/deep/ canvas {
		width: 100% !important;
		height: 100% !important;
	}
</style>