添加转换相关功能

src/index.js

@@ -13,6 +13,7 @@
 import App from './view/App'
 // import connectTestTool from './view/utils/connectTestTool'
 // import CoordinateConversion from './view/utils/CoordinateConversion';
+// import HistoryTrackControl from './view/utils/historyTrackControl';
 
 
 /*
@@ -65,5 +66,7 @@ new App({ el: 'root' }).init();
 // 	connectTestTool: connectTestTool,
 // 	// uploadMap: uploadMapData,
 // 	// moveMarker: updateMarkerPos,
+//	// CoordinateConver: CoordinateConversion,
+//	// HisTrackControl: HistoryTrackControl,
 // }
 // export { BunnyBlitz }

src/view/Map.js

@@ -14,25 +14,20 @@ import React, { Component } from 'react';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import 'leaflet-hash';
-import { Map, TileLayer, /*WMSTileLayer,*/ AttributionControl, ScaleControl } from 'react-leaflet';
-// import { BingLayer } from 'react-leaflet-bing';
+import { Map, TileLayer, AttributionControl, ScaleControl } from 'react-leaflet';
 import Spinner from 'react-bootstrap/Spinner';
 import PubSub from 'pubsub-js';
 
 import Body from './Body';
 import PACKAGE from '../../package.json';
 
-// import Building from './layers/Building';
 import Features from './layers/Features';
 import FloorImagery from './layers/FloorImagery';
-// import Levels from './layers/Levels';
 import MoveableObject from './layers/MoveableObject';
-
 import MapStyler from '../model/mapcss/MapStyler';
 import LevelSelector from './common/LevelSelector';
 import NorthPointer from './common/NorthPointer';
-// import SidePanelButton from './common/SidePanelButton';
-// import PreviewButton from './common/PreviewButton';
+import HistoryTrack from './layers/HistoryTrack';
 
 
 const MAP_MAX_ZOOM = 22;
@@ -111,12 +106,14 @@ L.Hash.prototype.update = function() {
  * Map component handles the whole map and associated widgets.
  */
 class MyMap extends Component {
+	static map;
 	constructor() {
 		super();
 
 		this.state = {
 			loading: false,
-			dataready: false
+			dataready: false,
+			initHisTrack: false,
 		};
 
 		this.mapStyler = new MapStyler();
@@ -451,6 +448,12 @@ class MyMap extends Component {
 						floor={this.props.floor}
 					/>
 				}
+
+				{this.state.initHisTrack &&
+					<HistoryTrack
+						map={this.elem}
+					/>
+				}
 			</Map>
 		</div>;
 	}
@@ -470,6 +473,8 @@ class MyMap extends Component {
 
 		window.mapUUID = this.props.uuid;
 
+		MyMap.map = this.elem.leafletElement;
+
 		// URL hash for map
 		this._mapHash = new L.Hash(this.elem.leafletElement);
 
@@ -554,6 +559,13 @@ class MyMap extends Component {
 				this.elem.leafletElement.panTo(data.coordinates);
 			}
 		});
+
+		PubSub.subscribe("map.his.init", (msg, data) => {
+			// console.log('init his');
+			this.setState({
+				initHisTrack: true
+			});
+		});
 	}
 
 	componentDidUpdate(fromProps) {

src/view/utils/CoordinateConversion.js

@@ -0,0 +1,86 @@
+import { LatLng, Point } from 'leaflet';
+import MyMap from '../Map';
+
+export default class CoordinateConversion {
+    /** 
+     * 将地理坐标投影到给定缩放的像素坐标中。
+     * @param {[lat: number, lng: number]} latlng - 经纬度
+     * @returns {[x:number, y:number]} - 像素点坐标
+     */
+    static latLngToPoint(latlng){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        let ll = new LatLng(latlng.lat, latlng.lng);
+        let p = MyMap.map.latLngToLayerPoint(ll);
+        return {x: p.x, y: p.y};
+    }
+
+    /** 
+     * latLngToPoint的倒数。 将给定缩放上的像素坐标投影到地理坐标中。
+     * @param {[x:number, y:number]} point - 像素点坐标
+     * @returns {[lat: number, lng: number]} - 经纬度
+     */
+    static pointToLatLng(point){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        let p = new Point(point.x, point.y);
+        let ll = MyMap.map.layerPointToLatLng(p);
+        return {lat: ll.lat, lng: ll.lng};
+    }
+
+    /** 
+     * 将地理坐标投影为接受单位的坐标 此 CRS（例如 EPSG:3857 的仪表，用于将其传递给 WMS 服务）。
+     * @param {[lat: number, lng: number]} latlng - 经纬度
+     * @param {number} zoom - 缩放级别
+     * @returns {[x:number, y:number]} - 像素点坐标
+     */
+    static project(latlng, zoom){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        return MyMap.map.project(latlng, zoom);
+    }
+
+    /** 
+     * 给定一个投影坐标返回相应的 LatLng。。
+     * @param {[x:number, y:number]} latlng - 像素点坐标
+     * @param {number} zoom - 缩放级别
+     * @returns {[lat: number, lng: number]} - 经纬度
+     */
+    static unproject(point, zoom){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        return MyMap.map.unproject(point, zoom);
+    }
+
+    /** 
+     * 返回将投影坐标转换为特定缩放的像素坐标时使用的比例。
+     * @param {number} toZoom - 缩放级别
+     * @param {number} fromZoom - 缩放级别
+     * @returns {number} - 比例因子
+     */
+    static scale(toZoom, fromZoom){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        return MyMap.map.getZoomScale(toZoom, fromZoom);
+    }
+
+    /** 
+     * 返回与 scale的比例因子对应的缩放级别。
+     * @param {number} scale - 比例因子
+     * @param {number} fromZoom - 缩放级别
+     * @returns {number} - 缩放级别
+     */
+    static zoom(scale, fromZoom){
+        if(!MyMap.map){ console.error("请先初始化地图!"); }
+        return MyMap.map.getScaleZoom(scale, fromZoom);
+    }
+
+    /** 
+     * 返回两个地理坐标之间的距离
+     * @param {[lat: number, lng: number]} latlng1 - 经纬度1
+     * @param {[lat: number, lng: number]} latlng2 - 经纬度2
+     * @returns {number} - 距离（单位：米）
+     */
+    static distance(latlng1, latlng2){       
+        if(!MyMap.map){ console.error("请先初始化地图!"); } 
+		let ll1 = new LatLng(latlng1.lat, latlng1.lng);
+		let ll2 = new LatLng(latlng2.lat, latlng2.lng);
+		// let distance = ll1.distanceTo(ll2) / 1000;
+        return MyMap.map.distance(ll1, ll2);
+    }
+}