标识详细信息，POI标识图标调整，名称显示

src/view/common/LocationCard.js

@@ -6,13 +6,14 @@ import MapUtil from "../utils/MapUtil";
 import App from "../App";
 
 export default class LocationCard{
+    delta_time;
 /** * 定位卡
     * @param {Number} x - 定位卡x坐标 
     * @param {Number} y - 定位卡y坐标 
     * @param {String} milli_time - 定位时间戳（毫秒）
     * @param {String} loc_time - 定位时间 
     * @param {Number} card_id - 定位卡ID 
-    * @param {JSX} info - jsx详细信息 
+    * @param {String} info - 详细信息 （html格式字符串）
     * @param {String} src - 标记图标路径
    */
     constructor(x, y, loc_time, milli_time, card_id, info, src){
@@ -30,10 +31,21 @@ export default class LocationCard{
         PubSub.publish('map.card.add', this);
     }
 
-    move(x, y){
+    move(x, y, duration = 1000){
         let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
         this.lat = latlng.lat;
         this.lng = latlng.lng;
+        this.delta_time = duration;
+        PubSub.publish('map.card.move', this);
+    }
+
+    update(x, y, milli_time, loc_time){
+        let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
+        this.lat = latlng.lat;
+        this.lng = latlng.lng;
+        this.delta_time = milli_time - this.milli_time;
+        this.milli_time = milli_time;
+        this.loc_time = loc_time;
         PubSub.publish('map.card.move', this);
     }
 

src/view/common/MoveableMarker.js

@@ -6,30 +6,17 @@ import PubSub from 'pubsub-js';
 import 'leaflet.marker.slideto/Leaflet.Marker.SlideTo.js'
 
 class MoveableMarker extends Component{
-    createInfo(data){
-        let infos = [];
-        for (let i = 0; i < data.length; i++) { 
-            const element = data[i];
-            if(element !== ','){
-                infos.push(<span key={data[i]}>{element}</span>);
-            }else{
-                infos.push(<br/>);
-            }
-        }
-        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
@@ -52,7 +39,7 @@ class MoveableMarker extends Component{
             >
                 {this.props.data.info &&
                     <Tooltip>
-                        { this.createInfo(this.props.data.info) }
+                        <div dangerouslySetInnerHTML={{ __html: this.props.data.info }} />
                     </Tooltip>
                 }
             </Marker>;

src/view/common/POI.js

@@ -11,10 +11,10 @@ export default class POI{
     * @param {Number} x - POI x坐标
     * @param {Number} y - POI y坐标 
     * @param {String} name - POI 名称
-    * @param {Array<String>} info - jsx详细信息 
+    * @param {String} info - 详细信息 （html格式字符串）
     * @param {String} src - 标记图标路径
    */
-    constructor(id, x, y, name, info, src){
+    constructor(id, x, y, name, info, src, showName = false){
         let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
         this.lat = latlng.lat;
         this.lng = latlng.lng;
@@ -22,18 +22,19 @@ export default class POI{
         this.info = info;
         this.name = name;
         this.id = id;
+        this.showName = showName;
     }
 
     add(){
         PubSub.publish('map.poi.add', this);
     }
 
-    // move(x, y){
-    //     let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
-    //     this.lat = latlng.lat;
-    //     this.lng = latlng.lng;
-    //     PubSub.publish('map.poi.move', this);
-    // }
+    move(x, y){
+        let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
+        this.lat = latlng.lat;
+        this.lng = latlng.lng;
+        PubSub.publish('map.poi.move', this);
+    }
 
     remove(){
         PubSub.publish('map.poi.remove', this);

src/view/common/POIMarker.js

@@ -1,51 +1,38 @@
 import React, { Component } from 'react';
-import { Marker, Popup, Tooltip, withLeaflet } from "react-leaflet";
-import { DivIcon, Icon } from 'leaflet';
+import { Marker, Popup, withLeaflet } from "react-leaflet";
+import L, { Icon } from 'leaflet';
 
 class POIMarker extends Component{
-    createInfo(data){
-        let infos = [];
-        for (let i = 0; i < data.length; i++) { 
-            const element = data[i];
-            if(element !== ','){
-                infos.push(<span key={data[i]}>{element}</span>);
-            }else{
-                infos.push(<br/>);
-            }
-        }
-        return infos;
-    }
-
     render(){
         return <>
             <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],
-                    popupAnchor: [0, -10]
+                    iconSize: [30,30],
+                    iconAnchor: [15,30],
+                    popupAnchor: [0, -40]
                 })}
                 name={`${this.props.data.id}`} key={this.props.data.id}
                 ref={marker => this.marker = marker}
             >
                 {this.props.data.info &&
                     <Popup>
-                        { this.createInfo(this.props.data.info) }
+                        <div dangerouslySetInnerHTML={{ __html: this.props.data.info }} />
                     </Popup>
                 }
             </Marker>;
+            {this.props.data.showName &&
                 <Marker 
-                    position={[this.props.data.lat, this.props.data.lng] } 
-                    icon={new DivIcon({
-                        html: <div>{this.props.data.name}</div>,
-                        iconSize: [80,20],
-                        iconAnchor: [40,-10]
-                    })}
-                    key={"poi-text-" + this.props.data.name}
-                >
-
-                </Marker>
+                position={[this.props.data.lat, this.props.data.lng] } 
+                icon={L.divIcon({
+                    html: this.props.data.name,
+                    iconSize: [400,20],
+                    iconAnchor: [80,40]
+                })}
+                key={"poi-text-" + this.props.data.name}
+            ></Marker>
+            }
         </>
     }
 }

src/view/layers/HistoryTrack.js

@@ -62,7 +62,7 @@ class HistoryTrack extends Component {
 			if(this.track){
 				this.track.remove();
 			}
-			console.log(data.src);
+			// console.log(data.src);
 			let hisIcon = L.icon({
 				iconSize: [20, 20],
 				iconUrl: data.src,
@@ -109,7 +109,8 @@ class HistoryTrack extends Component {
 	}
 
 	render(){
-		return <></>;
+		return <>
+		</>;
 	}
 }
 export default withLeaflet(HistoryTrack);

src/view/layers/MoveableObject.js

@@ -13,7 +13,6 @@ class MoveableObjectLayer extends Component {
 
 	componentDidMount(){
 		PubSub.subscribe('map.card.add', (msg, data) => {
-			let ms = this.state.markers;
 			let element = <MoveableMarker 
 					data={data} 
 					key={data.card_id}
@@ -23,19 +22,15 @@ class MoveableObjectLayer extends Component {
 		});
 
         PubSub.subscribe('map.card.move', (msg, data) => {
+			// eslint-disable-next-line
 			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});
+				PubSub.publish("map.marker.move", {id: data.card_id, lat: data.lat, lng: data.lng, duration: data.delta_time});
 			}
 		});
 
         PubSub.subscribe('map.card.remove', (msg, data) => {
+			// eslint-disable-next-line
 			let markers = this.state.markers.filter(m => m.key != data.card_id);
 			this.setState({markers: markers});
 		});

src/view/layers/POIObject.js

@@ -21,19 +21,22 @@ class POIObjectLayer extends Component {
 			this.setState({markers: [...this.state.markers, element]});
 		});
 
-        // PubSub.subscribe('map.poi.move', (msg, data) => {
-		// 	let marker = this.state.markers.filter(m => m.key == data.id);
-		// 	if(marker.length > 0){
-		// 		let element = <POIMarker 
-		// 			data={data} 
-		// 			key={data.id}
-		// 			ref={this.marker}
-		// 		></POIMarker>
-		// 		this.setState({markers: [...this.state.markers.filter(m => m.key != data.id), element]});
-		// 	}
-		// });
+        PubSub.subscribe('map.poi.move', (msg, data) => {
+			// eslint-disable-next-line
+			let marker = this.state.markers.filter(m => m.key == data.id);
+			if(marker.length > 0){
+				let element = <POIMarker 
+					data={data} 
+					key={data.id}
+					ref={this.marker}
+				></POIMarker>
+				// eslint-disable-next-line
+				this.setState({markers: [...this.state.markers.filter(m => m.key != data.id), element]});
+			}
+		});
 
         PubSub.subscribe('map.poi.remove', (msg, data) => {
+			// eslint-disable-next-line
 			let markers = this.state.markers.filter(m => m.key != data.id);
 			this.setState({markers: markers});
 		});

src/view/utils/MapUtil.js

@@ -1,5 +1,4 @@
 import { LatLng, Point } from 'leaflet';
-import MyMap from '../Map';
 
 export default class MapUtil {
     static map;