添加历史轨迹功能

package-lock.json

@@ -44,6 +44,7 @@
         "leaflet-polylinedecorator": "^1.6.0",
         "leaflet-textpath": "^1.2.0",
         "leaflet-toolbar": "^0.4.0-alpha.2",
+        "leaflet-trackplayer": "^2.0.2",
         "martinez-polygon-clipping": "^0.7.3",
         "mdi-react": "^5.5.0",
         "mousetrap": "^1.6.3",
@@ -14564,6 +14565,11 @@
         "leaflet": "*"
       }
     },
+    "node_modules/leaflet-trackplayer": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/leaflet-trackplayer/-/leaflet-trackplayer-2.0.2.tgz",
+      "integrity": "sha512-7Eor1jVXvjCLfhp71jC11ReWNjmWxqCsOukkPMnTMllAvDfldPtPJXbqhsYZ2ud8cVipWBDg2Sn7SB56spQ/7g=="
+    },
     "node_modules/left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -36849,6 +36855,11 @@
       "integrity": "sha512-g1KeU3DYGUOwXTS0vKIgJ8KgY0h/2B0qENNQUSYMFtSY2yzwaHWMbDyhDbk+aO8LgJ1iOX4fUt2bh1sYZbpmmQ==",
       "requires": {}
     },
+    "leaflet-trackplayer": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/leaflet-trackplayer/-/leaflet-trackplayer-2.0.2.tgz",
+      "integrity": "sha512-7Eor1jVXvjCLfhp71jC11ReWNjmWxqCsOukkPMnTMllAvDfldPtPJXbqhsYZ2ud8cVipWBDg2Sn7SB56spQ/7g=="
+    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",

package.json

@@ -60,6 +60,7 @@
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet-textpath": "^1.2.0",
     "leaflet-toolbar": "^0.4.0-alpha.2",
+    "leaflet-trackplayer": "^2.0.2",
     "martinez-polygon-clipping": "^0.7.3",
     "mdi-react": "^5.5.0",
     "mousetrap": "^1.6.3",

src/index.js

@@ -10,12 +10,9 @@
  *
  */
 
-// import request from 'request-promise-native';
-// import LocationCard from './view/common/LocationCard';
 import App from './view/App'
-// import updateMarkerPos from './view/utils/moveMarker'
 // import connectTestTool from './view/utils/connectTestTool'
-// import uploadMapData from './view/utils/uploadMapdata'
+// import CoordinateConversion from './view/utils/CoordinateConversion';
 
 
 /*

src/view/layers/HistoryTrack.js

@@ -0,0 +1,115 @@
+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);

src/view/utils/historyTrackControl.js

@@ -0,0 +1,62 @@
+import PubSub from "pubsub-js";
+import HistoryTrack from "../layers/HistoryTrack";
+
+export default class HistoryTrackControl{
+    /** 
+     * 打开历史轨迹。
+     */
+    initHistoryTrack(){
+        PubSub.publish("map.his.init");
+    }
+
+    /** 
+     * 清空历史轨迹。
+     */
+    clearHistoryTrack(){
+        PubSub.publish("his.play.ctrl", {state: HistoryTrack.HIS_CLEAR});
+    }
+
+    /** 
+     * 播放历史轨迹。
+     */
+    playHistoryTrack(){
+        setTimeout(() => {
+            PubSub.publish("his.play.ctrl", {state: HistoryTrack.HIS_PLAY});
+        }, 100);
+    }
+
+    /** 
+     * 暂停历史轨迹。
+     */
+    pauseHistoryTrack(){
+        PubSub.publish("his.play.ctrl", {state: HistoryTrack.HIS_PAUSE});
+    }
+
+    /** 
+     * 设置历史轨迹进度。
+     * @param {number} value - 进度值0到1
+     */
+    setHistoryTrackProgress(value){
+        PubSub.publish("his.play.ctrl", {progress: value, state: HistoryTrack.HIS_SET_PROGRESS});
+    }
+
+    /** 
+     * 设置历史轨迹速度。
+     * @param {number} speed - 速度值
+     */
+    setHistoryTrackSpeedMultiply(multi){
+        PubSub.publish("his.play.ctrl", {speedMultiply: multi, state: HistoryTrack.HIS_SET_SPEED});
+    }
+
+    /** 
+     * 设置历史轨迹。
+     * @param {Array<[lat: number, lng: number]>} path - 经纬度坐标数组
+     * @param {String} src - 移动标识图标路径
+     * @param {number} speed - 标识移动速度
+     */
+    setHistoryPath(path, src, multi = 1){
+        setTimeout(() => {
+            PubSub.publish("map.his.set", {path: path, src: src, speedMultiply: multi});
+        }, 50);
+    }
+}