src/view/App.js

@@ -9,8 +9,6 @@ import VectorDataManager from '../ctrl/VectorDataManager';
 import PresetsManager from '../ctrl/PresetsManager';
 // import ImageryManager from '../ctrl/ImageryManager';
 import AccountAuth from '../model/AccountAuth';
-import LocationCard from './common/LocationCard';
-import MapUtil from './utils/MapUtil';
 
 
 /**
@@ -18,25 +16,18 @@ import MapUtil from './utils/MapUtil';
  * It creates mostly everything.
  */
 export default class App {
+	static origin;
 	constructor(params) {
 		this.el = params.el
 		this.id = params.id
 		this.url = params.url
 
 		if (params.origin) {
-			this.origin = new LatLng(params.origin[0], params.origin[1])
+			App.origin = new LatLng(params.origin[0], params.origin[1])
 		} else {
-			this.origin = new LatLng(0, 0)
+			App.origin = new LatLng(0, 0)
 		}
 
-		//静态只读m
-		Object.defineProperty(App, 'origin', {
-			value: this.origin,
-			writable: false,
-			enumerable: false,
-			configurable: false
-		});
-
 		this.state = {
 			center: params.center || { lat: 39.9087, lng: 116.3975 }, // { lat: 39.9087, lng: 116.3975 } undefined
 			zoom: params.zoom || 18,
@@ -44,9 +35,7 @@ export default class App {
 			maxZoom: params.maxZoom || 22,
 			maxBounds: params.maxBounds || null,
 		};
-
-
-		// this.View = React.createRef();
+		this.child = React.createRef();
 	}
 
 	init() {
@@ -156,18 +145,18 @@ export default class App {
 	}
 
 
-	/** * 更新标记位置 * * 
-	 * @param {Object} data - 根据data.type类型，将不同的标记按照data.data移动 * 
-	*/
-	moveMarker(data) {
-		if (data.type === "card") {
-			let cards = data.data.map(card => {
-				let latlng = MapUtil.distancePointToLatLng(App.origin, card.x, card.y);
-				return new LocationCard(latlng.lat, latlng.lng, card.loc_time, card.milli_time, card.card_id, card.info, card.src);
-			});
-			PubSub.publish('body.data.update', cards);
-		}
-	}
+	// /** * 更新标记位置 * * 
+	//  * @param {Object} data - 根据data.type类型，将不同的标记按照data.data移动 * 
+	// */
+	// moveMarker(data) {
+	// 	if (data.type === "card") {
+	// 		let cards = data.data.map(card => {
+	// 			let latlng = MapUtil.distancePointToLatLng(App.origin, card.x, card.y);
+	// 			return new LocationCard(latlng.lat, latlng.lng, card.loc_time, card.milli_time, card.card_id, card.info, card.src);
+	// 		});
+	// 		PubSub.publish('body.data.update', cards);
+	// 	}
+	// }
 
 	/** * 加载地图文件 * * 
 	 * @param {String} url - 地图文件路径 * 
@@ -185,4 +174,18 @@ export default class App {
 				console.error('There was a problem with the fetch operation:', error);
 			});
 	}
+
+	/** 添加地图事件
+	 * 
+	 */
+	on(eventName, callback) {
+		PubSub.publish("map.event.bind", {
+			eventName: eventName, callback: callback
+		});
+	}
+	off(eventName, callback) {
+		PubSub.publish("map.event.unbind", {
+			eventName: eventName, callback: callback
+		});
+	}
 }

src/view/Map.js

@@ -645,11 +645,30 @@ class MyMap extends Component {
 		});
 
 		PubSub.subscribe("map.his.init", (msg, data) => {
-			// console.log('init his');
 			this.setState({
 				initHisTrack: true
 			});
 		});
+
+		PubSub.subscribe("map.event.bind", (msg, data) => {
+			if(data.eventName === 'contextmenu'){
+				this.elem.leafletElement.addEventListener(data.eventName, data.callback);
+				return;
+			}
+			this.elem.leafletElement.on(data.eventName, data.callback);
+		});
+
+		PubSub.subscribe("map.event.unbind", (msg, data) => {
+			if(data.eventName === 'contextmenu'){
+				this.elem.leafletElement.removeEventListener(data.eventName, data.callback);
+				return;
+			}
+			if(!data.callback){
+				this.elem.leafletElement.off(data.eventName);
+				return;
+			}
+			this.elem.leafletElement.off(data.eventName, data.callback);
+		});
 	}
 
 	componentDidUpdate(fromProps) {

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;