map-monitor/src/view/layers/HistoryTrack.js

import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import { withLeaflet } from 'react-leaflet';
import L, { LatLng } from 'leaflet';
import 'leaflet-trackplayer';

/**
 * HistoryTrack layer allows to show 
 */
class HistoryTrack extends Component {
	static HIS_PLAY = 0;
	static HIS_PAUSE = 1;
	static HIS_CLEAR = 2;
	static HIS_SET_SPEED = 3;
	static HIS_SET_PROGRESS = 4;
	path = [];
	cur_index = 0;
	cur_speed = 1;
	cur_multi = 1;
	componentDidMount(){
		this.map = this.props.map.leafletElement;
		// console.log(this.map, this.props);

		PubSub.subscribe("his.play.ctrl", (msg, data) => {
			// console.log(data.state);
			if(!this.track){
				console.error("需要先设置track数据！")
				alert("需要先设置track数据！");
				return;
			}

			switch (data.state) {
				case HistoryTrack.HIS_PLAY:
					this.track.start();
					break;
				case HistoryTrack.HIS_PAUSE:
					this.track.pause();
					break;
				case HistoryTrack.HIS_CLEAR:
					this.track.remove();
					break;
				case HistoryTrack.HIS_SET_SPEED:
					this.cur_multi = data.speedMultiply;
					this.track.setSpeed(this.cur_multi * this.cur_speed);
					break;
				case HistoryTrack.HIS_SET_PROGRESS:
					this.track.setProgress(data.progress);
					break;
			
				default:
					console.error("HistoryTrack 未知状态！")
					break;
			}
		});

		PubSub.subscribe("map.his.set", (msg, data) => {
			this.cur_index = 0;
			this.cur_distance = 0;
			this.cur_speed = 1;
			// console.log('set his');
			this.path = data.path;
			if(this.track){
				this.track.remove();
			}
			// console.log(data.src);
			let hisIcon = L.icon({
				iconSize: [20, 20],
				iconUrl: data.src,
				iconAnchor: [10, 10]
			});
			this.cur_multi = data.speedMultiply;
			this.cur_speed = this.getSpeed(this.cur_index);
			this.track = new L.TrackPlayer(this.path, {
				markerIcon: hisIcon,
				speed: this.cur_multi * this.cur_speed,
				weight: 10,
				passedLineColor: '#32CD32',
				notPassedLineColor: '#00BFFF',
				panTo: false,
				markerRotate: true,
			});
			this.track.addTo(this.map);
			this.track.on('progress', this.deal);
		});
	}

	deal = (a, b, c) => {
		if(this.cur_index !== c){
			this.cur_index = c;
			this.cur_speed = this.getSpeed(this.cur_index);
			this.track.setSpeed(this.cur_multi * this.cur_speed);
			// console.log(c, "speed ", this.cur_speed, "千米/h");
		}
	}

	getSpeed(index){
		if(index + 1 === this.path.length) return 0;
		let ll1 = new LatLng(this.path[index].lat, this.path[index].lng);
		let ll2 = new LatLng(this.path[index + 1].lat, this.path[index + 1].lng);
		let distance = ll1.distanceTo(ll2) / 1000;
		let speed = distance / (this.path[index + 1].time - this.path[index].time) * 3600000;
		// console.log((this.path[index + 1].time - this.path[index].time));
		return speed;
	}

	componentWillUnmount(){
		PubSub.unsubscribe("map.his.set");
		PubSub.unsubscribe("map.play.ctrl");
	}

	render(){
		return <>
		</>;
	}
}
export default withLeaflet(HistoryTrack);