RealtimeMap.vue: simplify the code (2e9fdd33) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/components/RealtimeMap.vue

+63 −128

Original line number	Diff line number	Diff line
		@@ -46,8 +46,7 @@ export default {
		"18447": {"plate": "粤BDF447"}
		},
		geojson_line_1: [[113.99739584160139, 22.610765716856296], [113.99773288526481, 22.610577804306548], [113.99824514560808, 22.609808813574297], [113.99899240486543, 22.608186143427105], [113.99899684055141, 22.608138484311375], [113.99876376465981, 22.606584405046835], [113.9987454049567, 22.606539955896604], [113.9983737643716, 22.606046923598996], [113.99771305207776, 22.60586005946536], [113.996462081496, 22.60628164325351], [113.99540699384544, 22.60655007340282], [113.99537457846512, 22.606374521317747], [113.99533345805837, 22.60631869878032], [113.99491868014185, 22.60615102642152], [113.99446803578164, 22.605922922486105], [113.993628105381, 22.605432281601264], [113.99361283376653, 22.605399929510398], [113.99427914343141, 22.604297776694622], [113.99455101208882, 22.604066349285663], [113.99481121659123, 22.60381079129223], [113.99549648383878, 22.60304833084697], [113.99570726599393, 22.60298417975627], [113.99623267681147, 22.60298349183956], [113.99686127008054, 22.603078201644227], [113.9977201426685, 22.603401409146592], [113.99788215074415, 22.603408536156227], [113.99794417914393, 22.60338145776082], [113.9980463074806, 22.603268395934986], [113.99816665521513, 22.602614977726315], [113.99835030416712, 22.60216721735362], [113.99856193554633, 22.601842951121434], [113.99881928525701, 22.6015215956419], [113.9988344317295, 22.601194082723367], [113.99895072783376, 22.600790214181995], [113.9990602569799, 22.600602634774226], [113.99921879840926, 22.600476730796977], [113.99919877407567, 22.60043325336671], [113.99802751236375, 22.600038565633355], [113.99775839514615, 22.599792681543633], [113.99730187808832, 22.598960946075003], [113.99590977592047, 22.5977773063799], [113.99576459924215, 22.59751983095157], [113.99543299558397, 22.59717440812865], [113.9951938686417, 22.5966914370548], [113.99501583215859, 22.59639577584673], [113.99463229185628, 22.596104860560743], [113.99420385593578, 22.595969591352997], [113.99378584507669, 22.595967937443213], [113.99320018866534, 22.59621976224022], [113.99265363550316, 22.596738860232236], [113.99200633643709, 22.59716671060916], [113.99157366427197, 22.5971462468509], [113.99088482201618, 22.596941863390235], [113.99038484213679, 22.596998494112995], [113.99032102143205, 22.597043977909916], [113.99019829041364, 22.59753578294312], [113.99030286538937, 22.59863964935582], [113.99048378356784, 22.59907317753902], [113.99052006299269, 22.59911721823263], [113.99075599101839, 22.599276010611053], [113.99126127611241, 22.599535900836155], [113.9917686585336, 22.6000105337692], [113.99191211157755, 22.60053218120178], [113.99183362959826, 22.601016496848214], [113.99144872111891, 22.60153952301182], [113.99077751816642, 22.602118998056795], [113.99043902651476, 22.60239072790739], [113.99010219314502, 22.60332391993846]],
		geojson_line_2: [[113.991459678304494, 22.599604921099228], [113.991896923307195, 22.599936617485952], [113.992010569899804, 22.6005318195689], [113.991917242336896, 22.60102266627295], [113.991719622194296, 22.601431625928001], [113.991526274764496, 22.601612498395962], [113.992045849875581, 22.60262745159568], [113.992339522764453, 22.602968084896109], [113.992798857282978, 22.603280910653833], [113.99298710913483, 22.60350336409337], [113.993853067653333, 22.603677155592816], [113.994199451060737, 22.604268045049292], [113.993864148579476, 22.604784676421257], [113.993478403889895, 22.605480929778221], [113.995278497141001, 22.606402240970631], [113.995327766644706, 22.606673415602611], [113.996490585116902, 22.6063775771138], [113.997715653744606, 22.60596002561628], [113.998320711544395, 22.60613169032316], [113.998664870688501, 22.606599236851789], [113.998897946580101, 22.608153316116329], [113.998161891211794, 22.609753417676441], [113.9976555155949, 22.610514448689759], [113.997348907905405, 22.61067741494136]],
		bldg_geojson: {},
		geojson_line_2: [[113.9973489079054, 22.61067741494136], [113.9976555155949, 22.61051444868976], [113.9981618912118, 22.60975341767644], [113.9988979465801, 22.60815331611633], [113.9986648706885, 22.60659923685179], [113.9983207115444, 22.60613169032316], [113.9977156537446, 22.60596002561628], [113.9964905851169, 22.6063775771138], [113.9953277666447, 22.60667341560261], [113.995278497141, 22.60640224097063], [113.9934784038899, 22.60548092977822], [113.99386414857948, 22.604784676421257], [113.99419945106074, 22.60426804504929], [113.99385306765333, 22.603677155592816], [113.99298710913483, 22.60350336409337], [113.99279885728298, 22.603280910653833], [113.99233952276445, 22.60296808489611], [113.99204584987558, 22.60262745159568], [113.9915262747645, 22.601612498395962], [113.9917196221943, 22.601431625928], [113.9919172423369, 22.60102266627295], [113.9920105698998, 22.6005318195689], [113.9918969233072, 22.59993661748595], [113.9914596783045, 22.59960492109923]],
		gate_geojson: {},
		stations_geojson: {
		"type": "FeatureCollection", "features": [
		@@ -232,137 +231,73 @@ export default {
		calculateDistance(point1, point2) {
		return Math.sqrt(Math.pow(point2[0] - point1[0], 2) + Math.pow(point2[1] - point1[1], 2));
		},
		update_location: function () {
		this.display_data = [];
		this.bus_marker_arr.forEach((marker) => marker.remove())
		let i;
		for (i = 0; i < this.bus_location_data_api.length; i++) {
		// if current time - report time < 300s, then display
		if (parseInt(new Date().getTime() / 1000) - this.bus_location_data_api[i].time_mt < 300) {
		const busLocation = [this.bus_location_data_api[i].lng, this.bus_location_data_api[i].lat];
		var busHeadingAngle = 0
		if (this.bus_location_data_api[i].route_code.slice(-1) === '1') { //XYBS1
		this.bus_location_data_api[i].route_geojson = this.geojson_line_1
		const closestSegment = this.findNearestSegment(busLocation, this.bus_location_data_api[i].route_geojson);
		busHeadingAngle = this.calculateBusAngle(closestSegment[0][1], closestSegment[0][0], closestSegment[1][1], closestSegment[1][0]);
		} else { //XYBS2
		this.bus_location_data_api[i].route_geojson = this.geojson_line_2
		const closestSegment = this.findNearestSegment(busLocation, this.bus_location_data_api[i].route_geojson);
		busHeadingAngle = this.calculateBusAngle(closestSegment[0][1], closestSegment[0][0], closestSegment[1][1], closestSegment[1][0]) - 180;
		}



		// create a DOM element for the marker

		//up direction (0)
		var bus_marker_up = document.createElement('div');
		bus_marker_up.className = 'marker';
		bus_marker_up.style.backgroundImage = 'url(https://bus.sustcra.com/bus-top-view.png)';
		bus_marker_up.style.width = '30px';
		bus_marker_up.style.height = '30px';
		bus_marker_up.style.backgroundSize = 'cover';

		//down direction (1)
		var bus_marker_down = document.createElement('div');
		bus_marker_down.className = 'marker';
		bus_marker_down.style.backgroundImage = 'url(https://bus.sustcra.com/bus-top-view.png)';
		bus_marker_down.style.width = '30px';
		bus_marker_down.style.height = '30px';
		bus_marker_down.style.backgroundSize = 'cover';
		bus_marker_down.style.cursor = "pointer";

		// var bus_marker = document.createElement('div');
		// bus_marker.className = 'marker';
		// bus_marker.style.backgroundImage = 'url(https://bus.sustcra.com/bus-top-view.png)';
		// bus_marker.style.width = 35 + 'px';
		// bus_marker.style.height = 35 + 'px';
		// bus_marker.style.backgroundSize = 'cover';
		// bus_marker_up.style.cursor = "pointer";


		// add marker to map
		if (this.bus_location_data_api[i].route_dir === 0) { //up
		// console.log(busHeadingAngle)
		this.bus_location_data_api[i].course = busHeadingAngle - 180
		this.bus_location_data_api[i].route_dir_text = '上行UP'
		var marker = new maplibre.Marker({element: bus_marker_up})
		.setLngLat([this.bus_location_data_api[i].lng, this.bus_location_data_api[i].lat])
		.setRotation(parseInt(this.bus_location_data_api[i].course))
		.setPopup(
		new maplibre.Popup({offset: 20}) // add popups
		.setHTML(
		'<div style="line-height: 1.2;">' + // 设置外层 div 的行距
		'<p class="car-plate" style="margin: 0; line-height: 1.2;">' + // 为每个 p 标签设置行距和边距
		'Plate: <b>' + this.bus_location_data_api[i].id +
		'</b></p><p style="margin: 0; line-height: 1.2;">' +
		'Speed: <b>' + this.bus_location_data_api[i].speed + " km/h" +
		'</b></p><p style="margin: 0; line-height: 1.2;">' + 'Line <b>' + this.bus_location_data_api[i].route_code.slice(-1) + ' ' + this.bus_location_data_api[i].route_dir_text +
		'</b></p>' +
		'</div>'
		)
		)
		.addTo(this.map);
		} else {
		this.bus_location_data_api[i].course = busHeadingAngle
		this.bus_location_data_api[i].route_dir_text = '下行DOWN'
		var marker = new maplibre.Marker({element: bus_marker_down})
		.setLngLat([this.bus_location_data_api[i].lng, this.bus_location_data_api[i].lat])
		.setRotation(parseInt(this.bus_location_data_api[i].course))
		.setPopup(
		new maplibre.Popup({offset: 20}) // add popups
		.setHTML(
		'<div style="line-height: 1.2;">' + // 设置外层 div 的行距
		'<p class="car-plate" style="margin: 0; line-height: 1.2;">' + // 为每个 p 标签设置行距和边距
		'Plate: <b>' + this.bus_location_data_api[i].id +
		'</b></p><p style="margin: 0; line-height: 1.2;">' +
		'Speed: <b>' + this.bus_location_data_api[i].speed + " km/h" +
		'</b></p><p style="margin: 0; line-height: 1.2;">' + 'Line <b>' + this.bus_location_data_api[i].route_code.slice(-1) + ' ' + this.bus_location_data_api[i].route_dir_text +
		'</b></p>' +
		'</div>'
		)
		)
		update_location() {
		// 清除所有现有的标记
		this.bus_marker_arr.forEach((marker) => marker.remove());
		this.bus_marker_arr = [];

		// 重新计算并添加新的标记
		for (let i = 0; i < this.bus_location_data_api.length; i++) {
		const busData = this.bus_location_data_api[i];
		// 如果当前时间 - 报告时间 < 300秒，则显示
		if ((new Date().getTime() / 1000) - busData.time_mt < 150) {
		const busLocation = [busData.lng, busData.lat];
		let busHeadingAngle = 0;
		const isRoute1 = busData.route_code.slice(-1) === '1';
		busData.route_geojson = isRoute1 ? this.geojson_line_1 : this.geojson_line_2;
		const closestSegment = this.findNearestSegment(busLocation, busData.route_geojson);
		busHeadingAngle = this.calculateBusAngle(
		closestSegment[0][1], closestSegment[0][0],
		closestSegment[1][1], closestSegment[1][0]
		);
		busHeadingAngle = busData.route_dir === 1 ? busHeadingAngle : busHeadingAngle - 180;

		// 创建标记元素
		const busMarker = document.createElement('div');
		busMarker.className = 'marker';
		busMarker.style.backgroundImage = 'url(https://bus.sustcra.com/bus-top-view.png)';
		busMarker.style.width = '30px';
		busMarker.style.height = '30px';
		busMarker.style.backgroundSize = 'cover';
		busMarker.style.cursor = "pointer";

		// 创建并添加标记到地图
		const marker = new maplibre.Marker({ element: busMarker })
		.setLngLat(busLocation)
		.setPopup(this.createPopup(busData)) // 创建并设置弹窗
		.setRotation(parseInt(busHeadingAngle))
		.addTo(this.map);
		}

		// var marker = new maplibre.Marker(bus_marker)
		// .setLngLat([this.bus_location_data_api[i].lng, this.bus_location_data_api[i].lat])
		// .setRotation(parseInt(this.bus_location_data_api[i].course))
		// .setPopup(
		// new maplibre.Popup({offset: 25}) // add popups
		// .setHTML(
		// '<p class="car-plate">' +
		// 'Plate: <b>' + this.bus_plate_hash[this.bus_location_data_api[i].id].plate +
		// '</b></p><p>' +
		// 'Speed: <b>' + this.bus_location_data_api[i].speed + "km/h" +
		// '</b></p>'
		// )
		// )
		// .addTo(this.map);


		// var marker = new maplibre.Marker(bus_marker)
		// .setLngLat([this.bus_location_data_api[i].lng, this.bus_location_data_api[i].lat])
		// .setRotation(parseInt(this.bus_location_data_api[i].course))
		// .setPopup(
		// new maplibre.Popup({offset: 25}) // add popups
		// .setHTML(
		// '<p class="car-plate">' +
		// 'Plate: <b>' + this.bus_location_data_api[i].id +
		// '</b></p><p>' +
		// 'Speed: <b>' + this.bus_location_data_api[i].speed + "km/h" +
		// '</b></p><p>' + 'Next Sta: <b>' + this.bus_location_data_api[i].next_station_string +
		// '</b></p>'
		// )
		// )
		// .addTo(this.map);

		this.bus_marker_arr.push(marker)


		}
		}

		// 保存新标记以便后续清除
		this.bus_marker_arr.push(marker);
		}
		}
		},

		createPopup(busData) {
		// 创建弹窗内容
		const routeDirText = busData.route_dir === 0 ? '上行 UP' : '下行 DOWN';
		const LineColour = busData.route_code.slice(-1) === '1' ? '#29abe2': '#f7911d';
		const htmlContent = `
		<div style="line-height: 1.2;">
		<p class="car-plate" style="margin: 0; line-height: 1.2;">
		粤B${busData.id.slice(2,)}
		</p>
		<p style="margin: 0; line-height: 1.2;">
		${busData.speed} km/h
		</p>
		<p style="margin: 0; line-height: 1.4;">
		<span style="background-color: ${LineColour}; color: white; padding: 2px 4px; border-radius: 3px;"><b>Line ${busData.route_code.slice(-1)} 号线</b></span>
		</p>
		<p style="margin: 0; line-height: 1.2;">
		<b>${routeDirText}</b>
		</p>
		<p style="margin: 0; line-height: 1.2;">
		下站: <b>${busData.next_station_string}</b>
		</p>
		</div>
		`;
		return new maplibre.Popup({ offset: 20 }).setHTML(htmlContent);
		},
		async refresh() {
		await this.fetch_bus();

Admin message