Home Explore Help
Register Sign In
zengminguo
/
map-monitor
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix 增加地图基础操作方法，如缩放、中心、移动视角等

Jay 4 days ago
parent
02f6f6c922
commit
4841c94616
5 changed files with 284 additions and 179 deletions
Unified View Show Diff Stats
  1. 22 16
      src/index.js
  2. 1 2
      src/model/AccountAuth.js
  3. 58 43
      src/view/App.js
  4. 18 16
      src/view/Body.js
  5. 185 102
      src/view/Map.js

+ 22 - 16
src/index.js
View File 

@@ -53,23 +53,29 @@ window.CONFIG = JSON.parse(`{
 
 	"always_authenticated": false
 
 	"always_authenticated": false
 
 }`);
 
 }`);
 
 
 
-console.log(window.CONFIG)
 
 window.EDITOR_NAME = window.CONFIG.editor_name;
 
 window.EDITOR_NAME = window.CONFIG.editor_name;
 
 
 
-// Create app
 
-let app = new App({ el: 'root', id: 'swa3s5ex', url:"ws://121.42.8.157:19702" })
 
-// new App({ el: 'root' }).init();
 
-console.log(app)
 
-app.init();
 
+// // Create app
 
+// let app = new App({ el: 'root', id: 'swa3s5ex', url: "ws://121.42.8.157:19702" })
 
+// // new App({ el: 'root' }).init();
 
+// console.log(app)
 
+// app.init();
 
 
 
-console.log(app.child.current)
 
+// console.log('index', app.View)
 
+// console.log('index', app.View.getZoom())
 
+// console.log('index', app.View.getCenter())
 
+// setTimeout(() => {
 
+// 	// app.View.setCenter({ lat: 39.9087, lng: 116.3975 }) 
+// 	console.log('index', app.View.getZoom())
 
+// 	console.log('index', app.View.getCenter())
 
+// }, 3000)
 
 
 
-// const BunnyBlitz = {
 
-// 	MAP: App,
 
-// 	connectTestTool: connectTestTool,
 
-// 	// uploadMap: uploadMapData,
 
-// 	// moveMarker: updateMarkerPos,
 
-//	// CoordinateConver: CoordinateConversion,
 
-//	// HisTrackControl: HistoryTrackControl,
 
-// }
 
-// export { BunnyBlitz }
 
+const BunnyBlitz = {
 
+	MAP: App,
 
+	// connectTestTool: connectTestTool,
 
+	// uploadMap: uploadMapData,
 
+	// moveMarker: updateMarkerPos,
 
+	// CoordinateConver: CoordinateConversion,
 
+	// HisTrackControl: HistoryTrackControl,
 
+}
 
+export { BunnyBlitz }

+ 1 - 2
src/model/AccountAuth.js
View File 

@@ -46,8 +46,7 @@ class AccountAuth {
 
                 },
 
                 },
 
             };
 
             };
 
             this._socket.emit("REPT", msg, (res) => {
 
             this._socket.emit("REPT", msg, (res) => {
 
-                console.log(res.data);
 
-                
+                // console.log(res.data);
 
                 PubSub.publish('body.map.got', res.data);
 
                 PubSub.publish('body.map.got', res.data);
 
             });  
             });  
         }, 1000);
 
         }, 1000);

+ 58 - 43
src/view/App.js
View File 

@@ -1,16 +1,16 @@
 
-
 
 import React from 'react';
 
 import React from 'react';
 
 import ReactDOM from 'react-dom';
 
 import ReactDOM from 'react-dom';
 
-import Body from './Body';
 
-import ImageryManager from '../ctrl/ImageryManager';
 
-import AccountAuth from '../model/AccountAuth';
 
-import PresetsManager from '../ctrl/PresetsManager';
 
 import PubSub from 'pubsub-js';
 
 import PubSub from 'pubsub-js';
 
+// import request from 'request-promise-native';
 
+import { LatLng } from 'leaflet';
 
+import { osmAuth } from 'osm-auth';
 
+import Body from './Body';
 
 import VectorDataManager from '../ctrl/VectorDataManager';
 
 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 LocationCard from './common/LocationCard';
 
-import { LatLng } from 'leaflet';
 
 import MapUtil from './utils/MapUtil';
 
 import MapUtil from './utils/MapUtil';
 
-// import request from 'request-promise-native';
 
 
 
 
 
 /**
 
 /**
 
@@ -37,7 +37,16 @@ export default class App {
 
 			configurable: false
 
 			configurable: false
 
 		});
 
 		});
 
 
 
-		this.child = React.createRef();
 
+		this.state = {
 
+			center: params.center || { lat: 39.9087, lng: 116.3975 }, // { lat: 39.9087, lng: 116.3975 } undefined
 
+			zoom: params.zoom || 18,
 
+			minZoom: params.minZoom || 8,
 
+			maxZoom: params.maxZoom || 22,
 
+			maxBounds: params.maxBounds || null,
 
+		};
 
+
 
+
 
+		// this.View = React.createRef();
 
 	}
 
 	}
 
 
 
 	init() {
 
 	init() {
 
@@ -54,11 +63,11 @@ export default class App {
 
 	_initCtrl() {
 
 	_initCtrl() {
 
 		window.vectorDataManager = new VectorDataManager();
 
 		window.vectorDataManager = new VectorDataManager();
 
 		window.presetsManager = new PresetsManager();
 
 		window.presetsManager = new PresetsManager();
 
-		window.imageryManager = new ImageryManager();
 
+		// window.imageryManager = new ImageryManager();
 
 
 
 		// Preload some data
 
 		// Preload some data
 
 		window.presetsManager.loadPresets();
 
 		window.presetsManager.loadPresets();
 
-		window.imageryManager.getAvailableImagery();
 
+		// window.imageryManager.getAvailableImagery();
 
 	}
 
 	}
 
 
 
 	/**
 
 	/**
 
@@ -66,7 +75,8 @@ export default class App {
 
 	 * @private
 
 	 * @private
 
 	 */
 
 	 */
 
 	_initView() {
 
 	_initView() {
 
-		ReactDOM.render(<Body center={this.center} ref={this.child} />, document.getElementById(this.el));
 
+		// ref={child => this.View = child}
 
+		ReactDOM.render(<Body {...this.state} ref={child => this.View = child.map} />, document.getElementById(this.el));
 
 		// document.title = window.EDITOR_NAME;
 
 		// document.title = window.EDITOR_NAME;
 
 
 
 		// Disabling context menu
 
 		// Disabling context menu
 
@@ -76,43 +86,48 @@ export default class App {
 
 	}
 
 	}
 
 
 
 	/**
 
 	/**
 
-	 * Launches authentication process
 
+	 * 加载数据库geojson数据
 
 	 * @private
 
 	 * @private
 
 	 */
 
 	 */
 
 	_initIndoorMap() {
 
 	_initIndoorMap() {
 
+		new AccountAuth(this.url, this.id);
 
+	}
 
+
 
+
 
+	/**
 
+	 * Launches authentication process
 
+	 * @private
 
+	 */
 
+	_initAuth() {
 
+		const opts = {
 
+			apiUrl: window.CONFIG.osm_api_url,
 
+			url: window.CONFIG.osm_api_url,
 
+			client_id: window.CONFIG.oauth_consumer_key,
 
+			redirect_uri: window.EDITOR_URL,
 
+			scope: "read_prefs write_api",
 
+			singlepage: true
 
+		};
 
 
 
-		window.editor_user_auth = new AccountAuth(this.url, this.id);
 
-
 
-		// const opts = {
 
-		// 	apiUrl: window.CONFIG.osm_api_url,
 
-		// 	url: window.CONFIG.osm_api_url,
 
-		// 	client_id: window.CONFIG.oauth_consumer_key,
 
-		// 	redirect_uri: window.EDITOR_URL,
 
-		// 	scope: "read_prefs write_api",
 
-		// 	singlepage: true
 
-		// };
 
-
 
-		// window.editor_user_auth = osmAuth(opts);
 
-
 
-		// const params = this._readURLParams(window.location.href);
 
-
 
-		// if(params.code) {
 
-		// 	window.editor_user_auth.authenticate(() => {
 
-		// 		localStorage.setItem("oauth_token", params.code);
 
-		// 		window.history.replaceState({}, "", window.location.href.replace(/\?.*/, ""));
 
-		// 	});
 
-		// }
 
-		// else if(localStorage.getItem("oauth_token")) {
 
-		// 	window.editor_user_auth.bootstrapToken(localStorage.getItem("oauth_token"), () => {
 
-		// 		this._checkAuth();
 
-		// 	});
 
-		// }
 
-		// else {
 
-		// 	//Check if we receive auth token
 
-		// 	this._checkAuth();
 
-		// 	this.authWait = setInterval(this._checkAuth.bind(this), 100);
 
-		// }
 
+		window.editor_user_auth = osmAuth(opts);
 
 
 
+		const params = this._readURLParams(window.location.href);
 
+
 
+		if (params.code) {
 
+			window.editor_user_auth.authenticate(() => {
 
+				localStorage.setItem("oauth_token", params.code);
 
+				window.history.replaceState({}, "", window.location.href.replace(/\?.*/, ""));
 
+			});
 
+		}
 
+		else if (localStorage.getItem("oauth_token")) {
 
+			window.editor_user_auth.bootstrapToken(localStorage.getItem("oauth_token"), () => {
 
+				this._checkAuth();
 
+			});
 
+		}
 
+		else {
 
+			//Check if we receive auth token
 
+			this._checkAuth();
 
+			this.authWait = setInterval(this._checkAuth.bind(this), 100);
 
+		}
 
 	}
 
 	}

+ 18 - 16
src/view/Body.js
View File 

@@ -82,10 +82,11 @@ class Body extends Component {
 
 			changeset: { tags: {} },
 
 			changeset: { tags: {} },
 
 			datalocked: false,
 
 			datalocked: false,
 
 			lastUsedPresets: [],
 
 			lastUsedPresets: [],
 
-			zoom: window.CONFIG.map_initial_zoom
 
+			zoom: 18,
 
 		};
 
 		};
 
 
 
-		this._usedImageryNames = new Set();
 
+		// this._usedImageryNames = new Set();
 
+
 
 		// this._dataReciever = new DataReciever('127.0.0.1', '16820', this._updateData);//'10.126.140.18''localhost'
 
 		// this._dataReciever = new DataReciever('127.0.0.1', '16820', this._updateData);//'10.126.140.18''localhost'
 
 		// this._readers = []
 
 		// this._readers = []
 
 		// this.markers = []
 
 		// this.markers = []
 
@@ -128,6 +129,7 @@ class Body extends Component {
 
 			<Map
 
 			<Map
 
 				ref={elem => this.map = elem}
 
 				ref={elem => this.map = elem}
 
 				{...this.state}
 
 				{...this.state}
 
+				{...this.props}
 
 			/>
 
 			/>
 
 		</Container>;
 
 		</Container>;
 
 	}
 
 	}
 
@@ -283,7 +285,7 @@ class Body extends Component {
 
 	}
 
 	}
 
 
 
 	componentDidMount() {
 
 	componentDidMount() {
 
-		this._timerImagery = setInterval(() => this._updateImagery(), 1000);
 
+		// this._timerImagery = setInterval(() => this._updateImagery(), 1000);
 
 		// this._timerMarker = setInterval(() => this._updateMarker(), 1000);
 
 		// this._timerMarker = setInterval(() => this._updateMarker(), 1000);
 
 		// setTimeout(() => {this._readers = window.vectorDataManager.getAllReaders()}, 1000);
 
 		// setTimeout(() => {this._readers = window.vectorDataManager.getAllReaders()}, 1000);
 
 
 
@@ -1397,11 +1399,11 @@ class Body extends Component {
 
 			this.setState({ zoom: data.zoom });
 
 			this.setState({ zoom: data.zoom });
 
 
 
 			// Disable locator overlay if zooming
 
 			// Disable locator overlay if zooming
 
-			const locator = this.state.selectedOverlaysImagery && this.state.selectedOverlaysImagery.find(l => l.properties.id === LOCATOR_OVERLAY_ID);
 
-			if (locator && data.zoom && locator.properties.max_zoom && data.zoom > locator.properties.max_zoom) {
 
-				const newlist = this.state.selectedOverlaysImagery.filter(l => l.properties.id !== LOCATOR_OVERLAY_ID);
 
-				this.setState({ selectedOverlaysImagery: newlist.length === 0 ? null : newlist });
 
-			}
 
+			// const locator = this.state.selectedOverlaysImagery && this.state.selectedOverlaysImagery.find(l => l.properties.id === LOCATOR_OVERLAY_ID);
 
+			// if (locator && data.zoom && locator.properties.max_zoom && data.zoom > locator.properties.max_zoom) {
 
+			// 	const newlist = this.state.selectedOverlaysImagery.filter(l => l.properties.id !== LOCATOR_OVERLAY_ID);
 
+			// 	this.setState({ selectedOverlaysImagery: newlist.length === 0 ? null : newlist });
 
+			// }
 
 		});
 
 		});
 
 
 
 		/*
 
 		/*
 
@@ -1506,12 +1508,12 @@ class Body extends Component {
 
 
 
 		// Auto-select single floor imagery if only 1 defined
 
 		// Auto-select single floor imagery if only 1 defined
 
 		// NOTE : should be kept as last check
 
 		// NOTE : should be kept as last check
 
-		if (this.state.mode === Body.MODE_FLOOR_IMAGERY && window.imageryManager.getFloorImages().length === 1 && !window.imageryManager.getFloorImages()[0].selected) {
 
-			window.imageryManager._updateSelectedImage();
 
-			if (Object.keys(newState).length === 0) {
 
-				this.forceUpdate();
 
-			}
 
-		}
 
+		// if (this.state.mode === Body.MODE_FLOOR_IMAGERY && window.imageryManager.getFloorImages().length === 1 && !window.imageryManager.getFloorImages()[0].selected) {
 
+		// 	window.imageryManager._updateSelectedImage();
 
+		// 	if (Object.keys(newState).length === 0) {
 
+		// 		this.forceUpdate();
 
+		// 	}
 
+		// }
 
 
 
 		// Finally, update if necessary
 
 		// Finally, update if necessary
 
 		if (Object.keys(newState).length > 0) {
 
 		if (Object.keys(newState).length > 0) {
 
@@ -1530,8 +1532,8 @@ class Body extends Component {
 
 		Mousetrap.unbind("ctrl+z");
 
 		Mousetrap.unbind("ctrl+z");
 
 		Mousetrap.unbind("ctrl+v");
 
 		Mousetrap.unbind("ctrl+v");
 
 		Mousetrap.unbind("ctrl+shift+z");
 
 		Mousetrap.unbind("ctrl+shift+z");
 
-		clearInterval(this._timerImagery);
 
-		clearInterval(this._timerMarker);
 
+		// clearInterval(this._timerImagery);
 
+		// clearInterval(this._timerMarker);
 
 	}
 
 	}
 
 }
 
 }

+ 185 - 102
src/view/Map.js
View File 

@@ -31,10 +31,6 @@ import HistoryTrack from './layers/HistoryTrack';
 
 import POIObject from './layers/POIObject';
 
 import POIObject from './layers/POIObject';
 
 import MapUtil from './utils/MapUtil';
 
 import MapUtil from './utils/MapUtil';
 
 
 
-
 
-const MAP_MAX_ZOOM = 22;
 
-const MAP_MIN_ZOOM = 8;
 
-
 
 /*
 
 /*
 
  * Extend leaflet hash for handling level value
 
  * Extend leaflet hash for handling level value
 
  */
 
  */
 
@@ -115,6 +111,12 @@ class MyMap extends Component {
 
 			loading: false,
 
 			loading: false,
 
 			dataready: false,
 
 			dataready: false,
 
 			initHisTrack: false,
 
 			initHisTrack: false,
 
+
 
+			center: null,
 
+			zoom: null,
 
+			minZoom: null,
 
+			maxZoom: null,
 
+			maxBounds: null,
 
 		};
 
 		};
 
 
 
 		this.mapStyler = new MapStyler();
 
 		this.mapStyler = new MapStyler();
 
@@ -127,7 +129,31 @@ class MyMap extends Component {
 
 	invalidateSize() {
 
 	invalidateSize() {
 
 		if (this.elem && this.elem.leafletElement) {
 
 		if (this.elem && this.elem.leafletElement) {
 
 			this.elem.leafletElement.invalidateSize();
 
 			this.elem.leafletElement.invalidateSize();
 
+
 
 			this.map = this.elem.leafletElement;
 
 			this.map = this.elem.leafletElement;
 
+
 
+			// 设定初始化的值
 
+			this.setState({
 
+				center: this.props.center,
 
+				zoom: this.props.zoom,
 
+				minZoom: this.props.minZoom,
 
+				maxZoom: this.props.maxZoom,
 
+				maxBounds: this.props.maxBounds
 
+			})
 
+
 
+			// // 设置地图中心、缩放
 
+			// if (this.props.center) {
 
+			// 	this.setView(this.props.center, this.props.zoom);
 
+			// } else {
 
+			// 	this.setZoom(this.props.zoom);
 
+			// }
 
+			// // 设置缩放范围
 
+			// this.setZoomRange(this.props.minZoom, this.props.maxZoom);
 
+
 
+			// // 设置视图范围
 
+			// if (this.props.maxBounds.length === 2) {
 
+			// 	this.setMaxBounds(this.props.maxBounds)
 
+			// }
 
 		}
 
 		}
 
 	}
 
 	}
 
 
 
@@ -139,6 +165,117 @@ class MyMap extends Component {
 
 		this.setState({ loading: false, dataready: false });
 
 		this.setState({ loading: false, dataready: false });
 
 	}
 
 	}
 
 
 
+	/**
 
+	 * 修改地图状态
 
+	 */
 
+	setView(center, zoom) {
 
+		let latlng = L.latLng(center)
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setView(latlng, zoom);
 
+			// this.setState({
 
+			// 	center: latlng,
 
+			// 	zoom: zoom
 
+			// })
 
+		} else {
 
+			console.error('setView')
 
+		}
 
+	}
 
+	setCenter(center) {
 
+		let latlng = L.latLng(center)
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setView(latlng, this.state.zoom);
 
+			// this.setState({
 
+			// 	center: latlng
 
+			// })
 
+		} else {
 
+			console.error('setCenter')
 
+		}
 
+	}
 
+	setZoom(zoom) {
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setZoom(zoom);
 
+			// this.setState({
 
+			// 	zoom: zoom
 
+			// })
 
+		} else {
 
+			console.error('setZoom')
 
+		}
 
+	}
 
+	setMinZoom(zoom) {
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setMinZoom(zoom);
 
+			// this.setState({
 
+			// 	minZoom: zoom
 
+			// })
 
+		} else {
 
+			console.error('setMinZoom')
 
+		}
 
+	}
 
+	setMaxZoom(zoom) {
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setMaxZoom(zoom);
 
+			// this.setState({
 
+			// 	maxZoom: zoom
 
+			// })
 
+		} else {
 
+			console.error('setMaxZoom')
 
+		}
 
+	}
 
+	setZoomRange(min, max) {
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setMinZoom(min);
 
+			this.elem.leafletElement.setMaxZoom(max);
 
+			// this.setState({
 
+			// 	minZoom: min,
 
+			// 	maxZoom: max
 
+			// })
 
+		} else {
 
+			console.error('setZoomRange')
 
+		}
 
+	}
 
+	setMaxBounds(corner) {
 
+		let corner1 = L.latLng(corner[0]), corner2 = L.latLng(corner[1]);
 
+		let bounds = L.latLngBounds(corner1, corner2)
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.setMaxBounds(bounds)
 
+			// this.setState({
 
+			// 	maxBounds: bounds
 
+			// })
 
+		} else {
 
+			console.error('setMaxBounds')
 
+		}
 
+	}
 
+
 
+
 
+	/**
 
+	 * @param {Array} [10, 20] [-20, 10]
 
+	 */
 
+	pathTo(offsetPix) {
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.pathTo(offsetPix)
 
+		} else {
 
+			console.error('pathTo')
 
+		}
 
+	}
 
+	/**
 
+	 * @param {Array/Object} center [10, 20] {lat: 10, lng: 10}
 
+	 * @param {Number} zoom 18
 
+	 */
 
+	flyTo(center, zoom) {
 
+		let latlng = L.latLng(center)
 
+		if (this.elem && this.elem.leafletElement) {
 
+			this.elem.leafletElement.flyTo(latlng, zoom)
 
+		} else {
 
+			console.error('flyTo')
 
+		}
 
+	}
 
+
 
+
 
+
 
+	/**
 
+	 * 获取地图状态
 
+	 */
 
+
 
 	/**
 
 	/**
 
 	 * Get the coordinates of map center
 
 	 * Get the coordinates of map center
 
 	 * @return {LatLng} Coordinates of map center (or null if not ready)
 
 	 * @return {LatLng} Coordinates of map center (or null if not ready)
 
@@ -147,6 +284,26 @@ class MyMap extends Component {
 
 		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getCenter() : null;
 
 		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getCenter() : null;
 
 	}
 
 	}
 
 
 
+	getZoom() {
 
+		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getZoom() : null;
 
+	}
 
+
 
+	getMinZoom() {
 
+		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getMinZoom() : null;
 
+
 
+	}
 
+	getMaxZoom() {
 
+		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getMaxZoom() : null;
 
+
 
+	}
 
+	getZoomRange() {
 
+		return (this.elem && this.elem.leafletElement) ? [this.elem.leafletElement.getMinZoom(), this.elem.leafletElement.getMaxZoom()] : [];
 
+	}
 
+
 
+	getContainerSize() {
 
+		return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getSize() : null;
 
+	}
 
+
 
 	/**
 
 	/**
 
 	 * Get the bounding box of currently shown area on map
 
 	 * Get the bounding box of currently shown area on map
 
 	 * @return {LatLngBounds} Bounding box of the map
 
 	 * @return {LatLngBounds} Bounding box of the map
 
@@ -210,96 +367,16 @@ class MyMap extends Component {
 
 	 * Generate layer from given configuration
 
 	 * Generate layer from given configuration
 
 	 * @private
 
 	 * @private
 
 	 */
 
 	 */
 
-	_getLayer(l, opacity) {
 
-		// if(!l || !l.properties || !l.properties.url) {
 
-		// 	return null;
 
-		// }
 
-
 
-		// if(l.properties.type === "tms") {
 
-		// 	// const url = l.properties.url
 
-		// 	// 	.replace(/\{zoom\}/g, "{z}")
 
-		// 	// 	.replace(/\{switch:.+?\}/g, "{s}")
 
-		// 	// 	.replace(/\{-y\}/g, "{y}");
 
-		// 	const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
 
-
 
-		// 	return <TileLayer
 
-		// 		attribution="&copy 高德地图"
 
-		// 		url={url}
 
-		// 		// key={url}
 
-		// 		minZoom={MAP_MIN_ZOOM}//{l.properties.min_zoom}
 
-		// 		maxNativeZoom={18}//{l.properties.max_zoom}
 
-		// 		maxZoom={MAP_MAX_ZOOM}
 
-		// 		opacity={opacity}
 
-		// 		tms={l.properties.url.indexOf("{-y}") > 0}
 
-		// 		key='amap'
 
-		// 	/>;
 
-		// }
 
-		// // else if(l.properties.type === "wms") {
 
-		// // 	let url = l.properties.url;
 
-		// // 	const params = {};
 
-		// // 	const urlParts = l.properties.url.split('?');
 
-
 
-		// // 	if(urlParts.length > 1) {
 
-		// // 		url = urlParts[0];
 
-		// // 		const blacklist = ['srs', 'width', 'height', 'format', 'service', 'request', 'bbox', 'key', 'crs'];
 
-
 
-		// // 		urlParts[1].split('&').forEach(p => {
 
-		// // 			const [k,v] = p.split('=');
 
-		// // 			if(!blacklist.includes(k.toLowerCase())) {
 
-		// // 				params[k.toLowerCase()] = v;
 
-		// // 			}
 
-		// // 			else if(['key'].includes(k.toLowerCase())) {
 
-		// // 				params[k.toUpperCase()] = v;
 
-		// // 			}
 
-		// // 		});
 
-		// // 	}
 
-
 
-		// // 	return <WMSTileLayer
 
-		// // 		attribution={l.properties.attribution ? '<a href="'+l.properties.attribution.url+'" target="_blank">'+l.properties.attribution.text+'</a>' : ''}
 
-		// // 		url={url}
 
-		// // 		key={l.properties.url}
 
-		// // 		opacity={opacity}
 
-		// // 		{...params}
 
-		// // 	/>;
 
-		// // }
 
-		// else if(l.properties.type === "bing" && window.CONFIG.providers && window.CONFIG.providers.bing) {
 
-		// 	// return <BingLayer
 
-		// 	// 	bingkey={window.CONFIG.providers.bing}
 
-		// 	// 	type='Road'//"CanvasLight"
 
-		// 	// 	maxNativeZoom={20}
 
-		// 	// 	// culture='zh-Hans'
 
-		// 	// 	minZoom={MAP_MIN_ZOOM}
 
-		// 	// 	maxZoom={MAP_MAX_ZOOM}
 
-		// 	// />;
 
-		// 	const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
 
-
 
-		// 	return <TileLayer
 
-		// 		attribution="&copy 高德地图"
 
-		// 		url={url}
 
-		// 		// key={url}
 
-		// 		minZoom={MAP_MIN_ZOOM}//{l.properties.min_zoom}
 
-		// 		maxNativeZoom={18}//{l.properties.max_zoom}
 
-		// 		maxZoom={MAP_MAX_ZOOM}
 
-		// 		opacity={opacity}
 
-		// 		tms={l.properties.url.indexOf("{-y}") > 0}
 
-		// 		key='amap'
 
-		// 	/>;
 
-		// }
 
-		// else {
 
-		// 	return null;
 
-		// }
 
+	_getLayer(min, max) {
 
 		const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
 
 		const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
 
 
 
 		return <TileLayer
 
 		return <TileLayer
 
 			attribution="&copy 高德地图"
 
 			attribution="&copy 高德地图"
 
 			url={url}
 
 			url={url}
 
-			// key={url}
 
-			minZoom={MAP_MIN_ZOOM}	//{l.properties.min_zoom}
 
-			maxZoom={MAP_MAX_ZOOM}
 
-			maxNativeZoom={18}	//{l.properties.max_zoom}
 
-			opacity={opacity}
 
-			tms={l.properties.url.indexOf("{-y}") > 0}
 
-			key='amap'
 
+			key={url} // 'amap'
 
+			minZoom={min}
 
+			maxZoom={max}
 
+			maxNativeZoom={18} // 瓦片源即高德地图可用最大缩放数
 
 		/>;
 
 		/>;
 
 	}
 
 	}
 
 
 
@@ -325,7 +402,7 @@ class MyMap extends Component {
 
 	}
 
 	}
 
 
 
 	render() {
 
 	render() {
 
-		const floorImgs = window.imageryManager.getFloorImages();
 
+		// const floorImgs = window.imageryManager.getFloorImages();
 
 		let levelsList = null;
 
 		let levelsList = null;
 
 
 
 		if (this.props.mode === Body.MODE_EXPLORE) {
 
 		if (this.props.mode === Body.MODE_EXPLORE) {
 
@@ -365,8 +442,11 @@ class MyMap extends Component {
 
 				</div>
 
 				</div>
 
 			}
 
 			}
 
 			<Map
 
 			<Map
 
-				minZoom={MAP_MIN_ZOOM}
 
-				maxZoom={MAP_MAX_ZOOM}
 
+				center={L.latLng(this.props.center)}
 
+				zoom={this.props.zoom}
 
+				minZoom={this.props.minZoom}
 
+				maxZoom={this.props.maxZoom}
 
+				maxBounds={this.props.maxBounds}
 
 				className={"app-map" + (this.props.draw ? " leaflet-clickable" : "")}
 
 				className={"app-map" + (this.props.draw ? " leaflet-clickable" : "")}
 
 				ref={elem => this.elem = elem}
 
 				ref={elem => this.elem = elem}
 
 				preferCanvas={false}
 
 				preferCanvas={false}
 
@@ -399,11 +479,13 @@ class MyMap extends Component {
 
 					/>
 
 					/>
 
 				}
 
 				}
 
 
 
-				{this.props.selectedBaseImagery && this._getLayer(this.props.selectedBaseImagery, this.props.baseImageryOpacity)}
 
+				{this._getLayer(this.props.minZoom, this.props.maxZoom)}
 
+
 
+				{/* {this.props.selectedBaseImagery && this._getLayer(this.props.selectedBaseImagery, this.props.baseImageryOpacity)} */}
 
 
 
-				{this.props.selectedOverlaysImagery && this.props.selectedOverlaysImagery.map(ol => this._getLayer(ol, this.props.overlaysImageryOpacity))}
 
+				{/* {this.props.selectedOverlaysImagery && this.props.selectedOverlaysImagery.map(ol => this._getLayer(ol, this.props.overlaysImageryOpacity))} */}
 
 
 
-				{this.props.mode !== Body.MODE_EXPLORE && floorImgs && floorImgs.map(fi => this._getFloorMapLayer(fi))}
 
+				{/* {this.props.mode !== Body.MODE_EXPLORE && floorImgs && floorImgs.map(fi => this._getFloorMapLayer(fi))} */}
 
 
 
 				{/* {!this.state.loading && this.state.dataready && [Body.MODE_BUILDING, Body.MODE_FLOOR_IMAGERY].includes(this.props.mode) &&
 
 				{/* {!this.state.loading && this.state.dataready && [Body.MODE_BUILDING, Body.MODE_FLOOR_IMAGERY].includes(this.props.mode) &&
 
 					<Building
 
 					<Building
 
@@ -466,6 +548,7 @@ class MyMap extends Component {
 
 	 */
 
 	 */
 
 	_followMouse(e) {
 
 	_followMouse(e) {
 
 		this._mouseCoords = e.latlng;
 
 		this._mouseCoords = e.latlng;
 
+		// console.log(this._mouseCoords)
 
 	}
 
 	}
 
 
 
 	componentDidMount() {
 
 	componentDidMount() {
 
@@ -574,18 +657,18 @@ class MyMap extends Component {
 
 			this._mapHash.setLevel(this.props.level);
 
 			this._mapHash.setLevel(this.props.level);
 
 		}
 
 		}
 
 
 
-		const floorImgs = window.imageryManager.getFloorImages();
 
+		// const floorImgs = window.imageryManager.getFloorImages();
 
 
 
 		// Force update of floor imagery after mode change
 
 		// Force update of floor imagery after mode change
 
 		if (fromProps.mode !== this.props.mode) {
 
 		if (fromProps.mode !== this.props.mode) {
 
 			this.invalidateSize();
 
 			this.invalidateSize();
 
 
 
-			floorImgs.forEach(img => {
 
-				// Check if we have a leaflet layer
 
-				if (this.refs["floormap_" + img.id]) {
 
-					this.refs["floormap_" + img.id].forceUpdate();
 
-				}
 
-			});
 
+			// floorImgs.forEach(img => {
 
+			// 	// Check if we have a leaflet layer
 
+			// 	if (this.refs["floormap_" + img.id]) {
 
+			// 		this.refs["floormap_" + img.id].forceUpdate();
 
+			// 	}
 
+			// });
 
 		}
 
 		}
 
 
 
 		// Follow mouse position
 
 		// Follow mouse position