定位卡重构，增加移动动画

package-lock.json

@@ -45,6 +45,7 @@
         "leaflet-textpath": "^1.2.0",
         "leaflet-toolbar": "^0.4.0-alpha.2",
         "leaflet-trackplayer": "^2.0.2",
+        "leaflet.marker.slideto": "^0.3.0",
         "martinez-polygon-clipping": "^0.7.3",
         "mdi-react": "^5.5.0",
         "mousetrap": "^1.6.3",
@@ -14570,6 +14571,11 @@
       "resolved": "https://registry.npmmirror.com/leaflet-trackplayer/-/leaflet-trackplayer-2.0.2.tgz",
       "integrity": "sha512-7Eor1jVXvjCLfhp71jC11ReWNjmWxqCsOukkPMnTMllAvDfldPtPJXbqhsYZ2ud8cVipWBDg2Sn7SB56spQ/7g=="
     },
+    "node_modules/leaflet.marker.slideto": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/leaflet.marker.slideto/-/leaflet.marker.slideto-0.3.0.tgz",
+      "integrity": "sha512-BQwOy5CuDBuEXIbeJ1mjO9SqlY3au65LhWJ1hjkwQYy/XhOhaF7kIF3+0DRasONIvbFYL+QwQ2/QjEjDUZgn4A=="
+    },
     "node_modules/left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -36860,6 +36866,11 @@
       "resolved": "https://registry.npmmirror.com/leaflet-trackplayer/-/leaflet-trackplayer-2.0.2.tgz",
       "integrity": "sha512-7Eor1jVXvjCLfhp71jC11ReWNjmWxqCsOukkPMnTMllAvDfldPtPJXbqhsYZ2ud8cVipWBDg2Sn7SB56spQ/7g=="
     },
+    "leaflet.marker.slideto": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/leaflet.marker.slideto/-/leaflet.marker.slideto-0.3.0.tgz",
+      "integrity": "sha512-BQwOy5CuDBuEXIbeJ1mjO9SqlY3au65LhWJ1hjkwQYy/XhOhaF7kIF3+0DRasONIvbFYL+QwQ2/QjEjDUZgn4A=="
+    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",

package.json

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

src/view/common/LocationCard.js

@@ -1,24 +1,43 @@
 /** * 定位卡
  * 
 */
+import PubSub from "pubsub-js";
+import MapUtil from "../utils/MapUtil";
+import App from "../App";
 
 export default class LocationCard{
 /** * 定位卡
-    * @param {Number} lat - 定位卡纬度 
-    * @param {Number} lng - 定位卡经度 
+    * @param {Number} x - 定位卡x坐标 
+    * @param {Number} y - 定位卡y坐标 
     * @param {String} milli_time - 定位时间戳（毫秒）
-    * @param {String} locTime - 定位时间 
+    * @param {String} loc_time - 定位时间 
     * @param {Number} card_id - 定位卡ID 
     * @param {JSX} info - jsx详细信息 
     * @param {String} src - 标记图标路径
    */
-    constructor(lat, lng, loc_time, milli_time, card_id, info, src){
-        this.lat = lat;
-        this.lng = lng;
+    constructor(x, y, loc_time, milli_time, card_id, info, src){
+        let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
+        this.lat = latlng.lat;
+        this.lng = latlng.lng;
         this.milli_time = milli_time;
         this.loc_time = loc_time;
-        this.card = card_id;
+        this.card_id = card_id;
         this.src = src ? src : "img/move.png";
         this.info = info;
     }
+
+    add(){
+        PubSub.publish('map.card.add', this);
+    }
+
+    move(x, y){
+        let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
+        this.lat = latlng.lat;
+        this.lng = latlng.lng;
+        PubSub.publish('map.card.move', this);
+    }
+
+    remove(){
+        PubSub.publish('map.card.remove', this);
+    }
 }

src/view/common/MoveableMarker.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import { Marker, /*Popup, */Tooltip, withLeaflet } from "react-leaflet";
-import { Icon } from 'leaflet';
+import { Icon, LatLng } from 'leaflet';
+import bearing from '@turf/bearing';
+import PubSub from 'pubsub-js';
+import 'leaflet.marker.slideto/Leaflet.Marker.SlideTo.js'
 
 class MoveableMarker extends Component{
     createInfo(data){
@@ -16,23 +19,42 @@ class MoveableMarker extends Component{
         return infos;
     }
 
+    componentDidMount(){       
+        this.card_id =  this.props.data.card_id;
+		
+		PubSub.subscribe('map.marker.move', (msg, data) => {
+            if(this.card_id === data.id){
+                // console.log(this.marker, 'slideTo' in this.marker);
+                let oldLatlng = this.marker.leafletElement.getLatLng();
+                let newLatlng = new LatLng(data.lat, data.lng);
+                let b = bearing([oldLatlng.lat, oldLatlng.lng], [newLatlng.lat, newLatlng.lng]) + 90;
+                console.log(b, b * 0.33333);
+                this.marker.leafletElement.setRotationAngle(b * 0.33333);
+                this.marker.leafletElement.slideTo([data.lat, data.lng], {
+                    duration: data.duration,
+                    keepAtCenter: false
+                });
+            }
+        });
+    }
+
     render(){
         return <>
-            <Marker position={[this.props.data.lat, this.props.data.lng] } icon={new Icon({
-                // iconUrl: window.EDITOR_URL + "img/move.png",
-                iconUrl: window.EDITOR_URL + this.props.data.src,
-                iconSize: [20,20],
-                iconAnchor: [10,10]
-            })} name={`${this.props.data.card}`} key={this.props.key}>
+            <Marker 
+                position={[this.props.data.lat, this.props.data.lng] } 
+                icon={new Icon({
+                    iconUrl: window.EDITOR_URL + this.props.data.src,
+                    iconSize: [20,20],
+                    iconAnchor: [10,10]
+                })}
+                name={`${this.card_id}`} key={this.card_id}
+                ref={marker => this.marker = marker}
+            >
                 {this.props.data.info &&
                     <Tooltip>
                         { this.createInfo(this.props.data.info) }
                     </Tooltip>
                 }
-                {/* <Popup>
-                    <span>{}</span>
-                    <button onClick={() => {console.log(`marker-${this.props.data.id}`)}}>点击</button>
-                </Popup> */}
             </Marker>;
         </>
     }

src/view/layers/MoveableObject.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PubSub from 'pubsub-js';
-import {  withLeaflet } from 'react-leaflet';
+import {  withLeaflet, LayerGroup } from 'react-leaflet';
 import MoveableMarker from '../common/MoveableMarker';
 
 /**
@@ -8,33 +8,58 @@ import MoveableMarker from '../common/MoveableMarker';
  */
 class MoveableObjectLayer extends Component {
 	state = {
-		markers: []
+		markers: [],
 	}
 
 	componentDidMount(){
-		PubSub.subscribe('body.data.got', (msg, data) => {
-			let els = [];
-			for (let i = 0; i < data.length; i++) {
-				let element = <MoveableMarker 
-					data={data[i]} 
-					key={data[i].card}
+		PubSub.subscribe('map.card.add', (msg, data) => {
+			let ms = this.state.markers;
+			let element = <MoveableMarker 
+					data={data} 
+					key={data.card_id}
+					ref={this.marker}
 				></MoveableMarker>
-				els.push(element)
+			this.setState({markers: [...this.state.markers, element]});
+		});
+
+        PubSub.subscribe('map.card.move', (msg, data) => {
+			let marker = this.state.markers.filter(m => m.key == data.card_id);
+			if(marker.length > 0){
+				// let element = <MoveableMarker 
+				// 	data={data} 
+				// 	key={data.card_id}
+				// 	ref={this.marker}
+				// ></MoveableMarker>
+				// this.setState({markers: [...this.state.markers.filter(m => m.key != data.card_id), element]});
+				PubSub.publish("map.marker.move", {id: data.card_id, lat: data.lat, lng: data.lng, duration: 1000});
 			}
-			this.setState({markers: els});
-			// console.log("MoveableObjectLayer", this.state.markers);
 		});
+
+        PubSub.subscribe('map.card.remove', (msg, data) => {
+			let markers = this.state.markers.filter(m => m.key != data.card_id);
+			this.setState({markers: markers});
+		});
+	}
+
+	move(){
+
+	}
+
+	stop(){
+		
 	}
 
 	componentWillUnmount(){
-		PubSub.unsubscribe('body.data.got');
+		PubSub.unsubscribe('map.card.add');
+		PubSub.unsubscribe('map.card.move');
+		PubSub.unsubscribe('map.card.remove');
 	}
 
 	render() {
 		return (
-			<>
+			<LayerGroup key="moveable">
 				{ this.state.markers }
-			</>
+			</LayerGroup>
 		);
 	}
 }