增加自动保存，修改缩放层级清除数据

public/config.json

@@ -1,7 +1,7 @@
 {
 	"editor_name": "编辑器",
 	"hash": "GIT_HASH",
-	"data_min_zoom": 18,
+	"data_min_zoom": 10,
 	"map_initial_zoom": 18,
 	"map_initial_latlng": [39.8729, 116.5141],
 	"providers": {

src/ctrl/VectorDataManager.js

@@ -1215,7 +1215,7 @@ class VectorDataManager extends HistorizedManager {
 	setGeoJsonData(data){
 		this._cacheOsmGeojson = data;
 		this._nextId = this._cacheOsmGeojson.features.length + 1;
-		this._do(new Action(Action.IMPORT, null, arguments));
+		// this._do(new Action(Action.IMPORT, null, arguments));
 	}
 
 	/**

src/index.js

@@ -20,6 +20,7 @@ import PresetsManager from './ctrl/PresetsManager';
 import PubSub from 'pubsub-js';
 import request from 'request-promise-native';
 import VectorDataManager from './ctrl/VectorDataManager';
+// import LocationCard from './view/common/LocationCard';
 
 /**
  * App is the application starter.
@@ -181,6 +182,14 @@ class App {
 				map_id: window.editor_user.edit_map,
 			});
 		});
+		
+		PubSub.subscribe('body.data.autosave', (msg, data) => {
+			window.editor_user_auth.updateMapDataDontGet({
+				map_data: data,
+				user_id: window.editor_user.id,
+				map_id: window.editor_user.edit_map,
+			});
+		});
 
 		PubSub.subscribe('editor.map.create', (msg, data) => {
 			window.editor_user_auth.cteateMapData(data.id, data.name);
@@ -236,7 +245,7 @@ class App {
 				PubSub.publish("app.user.ready", { username: window.editor_user.name });
 				console.log("Logged in as", window.editor_user.name);
 
-				localStorage.setItem("editor_token", res.user_token);
+				localStorage.setItem("user_token", res.user_token);
 			}
 			catch(e) {
 				console.error(e);
@@ -317,9 +326,45 @@ request(window.EDITOR_URL + "/config.json")
 	window.EDITOR_NAME = window.CONFIG.editor_name;
 
 	// Create app
-	new App();
+	new App();	
 })
 .catch(e => {
 	console.error(e);
 	alert("Can't load configuration file, please report this issue.");
 });
+// let datas = []
+// setTimeout(() => {
+// 	let sock = new WebSocket("ws://127.0.0.1:9002");
+// 	sock.onmessage = (msg) => {
+// 		// console.log(msg.data);
+// 		manageData(msg.data);
+// 	}
+// }, 1000);
+
+// function manageData(data){
+// 	let dat = JSON.parse(data).data;
+// 	// datas.forEach(d => {
+// 	// 	if(d[3]){
+// 	// 		console.log(d[1],new Date( d[3]), datas.length);
+// 	// 	}
+// 	// });
+
+// 	let card = new LocationCard(39.96348, 116.36831 + dat[2] * 0.00001141, dat[0], dat[3], dat[1],  
+// 		<span>{dat[2]}</span>
+// 	); 
+// 	if(datas.length === 0){
+// 		datas.push(card);
+// 	}
+// 	if(!datas.some(t => t.card === dat[1])){
+// 		datas.push(card);
+// 	} else {
+// 		datas = datas.map(t => {
+// 			if(t.card === dat[1]) {
+// 				return card;
+// 			} else {
+// 				return t;
+// 			}
+// 		});
+// 	}
+// 	PubSub.publish('body.data.got', datas);
+// }

src/model/AccountAuth.js

@@ -40,46 +40,53 @@ class AccountAuth {
             }
         );
 
-        let token = localStorage.getItem("editor_token");
-        var sql = `SELECT 
-                        user_id,
-                        user_name,
-                        user_account
-                    FROM 
-                        medba.dat_user 
-                    WHERE 
-                        user_token = '${token}'`;
-        var msg = {
-            cmd: "query", // server端要进行判断的
-            data: {
-              name: "name", // 这个无所谓怎么写，有就行
-              sql: sql,
-            },
-          };
-        this._socket.emit("REPT", msg, (datas) => {
-            if(datas.data.length > 0){
-                let user_id = datas.data[0].user_id;
-                this.authed = true;
-                this.getMapData(user_id);
-                window.editor_user = {
-					id: user_id,
-					account: datas.data[0].user_account,
-					token: token,
-					name: datas.data[0].user_name,
-					auth: window.editor_user_auth,
-					edit_map: 0,
-					maps: []
-				};
+        setTimeout(() => {
+            let token = localStorage.getItem("user_token");
+            if(token){
+                var sql = `SELECT 
+                            user_id,
+                            user_name,
+                            user_account
+                        FROM 
+                            medba.dat_user 
+                        WHERE 
+                            user_token = '${token}'`;
+                var msg = {
+                    cmd: "query", // server端要进行判断的
+                    data: {
+                    name: "name", // 这个无所谓怎么写，有就行
+                    sql: sql,
+                    },
+                };
+                this._socket.emit("REPT", msg, (datas) => {
+                    if(datas.data.length > 0){
+                        let user_id = datas.data[0].user_id;
+                        this.authed = true;
+                        this.getMapData(user_id);
+                        window.editor_user = {
+                            id: user_id,
+                            account: datas.data[0].user_account,
+                            token: token,
+                            name: datas.data[0].user_name,
+                            auth: window.editor_user_auth,
+                            edit_map: 0,
+                            maps: []
+                        };
 
-				/**
-				 * Event when user has been successfully logged in
-				 * @event app.user.ready
-				 * @memberof App
-				 */
-				PubSub.publish("app.user.ready", { username: window.editor_user.name });
-				console.log("Logged in as", window.editor_user.name);
+                        /**
+                         * Event when user has been successfully logged in
+                         * @event app.user.ready
+                         * @memberof App
+                         */
+                        PubSub.publish("app.user.ready", { username: window.editor_user.name });
+                        console.log("Logged in as", window.editor_user.name);
+                        this.authed = true;
+                    }
+                });
+            }else {
+                console.log("no token");
             }
-        });
+        }, 100);
     }
     
     onError(e) {
@@ -263,6 +270,27 @@ class AccountAuth {
         }, 1000);
     }
 
+    updateMapDataDontGet(data){
+        var sql = `UPDATE medba.dat_map 
+            SET 
+                map_data  = '${data.map_data}',
+                update_time = NOW() 
+            WHERE 
+                user_id = ${data.user_id} AND 
+                map_id = ${data.map_id}`;
+        var msg = {
+            cmd: "update", // server端要进行判断的
+            data: {
+                op: "UPDATE", // INSERT, UPDATE, DELETE
+                name: "dat_map",
+                sql: sql,
+            },
+        };
+        // console.log('updateMapData', msg); 
+        this._socket.emit("META", msg);
+        console.log("autosave");
+    }
+
     deleteMapData(map_id){
         var sql = `DELETE FROM medba.dat_map 
                     WHERE  

src/view/Body.js

@@ -33,7 +33,7 @@ import RightPanel from './RightPanel';
 import Row from 'react-bootstrap/Row';
 import Toolbar from './Toolbar';
 import DataReciever from '../model/DataReciever';
-import { LatLng } from 'leaflet';
+// import { LatLng } from 'leaflet';
 
 const LOCATOR_OVERLAY_ID = "mapbox_locator_overlay";
 
@@ -91,8 +91,8 @@ class Body extends Component {
 		};
 
 		this._usedImageryNames = new Set();
-		this._dataReciever = new DataReciever('127.0.0.1', '16820', this._updateData);//'10.126.140.18''localhost'
-		this._readers = []
+		// this._dataReciever = new DataReciever('127.0.0.1', '16820', this._updateData);//'10.126.140.18''localhost'
+		// this._readers = []
 	}
 
 	/**
@@ -314,75 +314,75 @@ class Body extends Component {
 		});
 	}
 
-	markers = [];
-	d1 = 10;
-	d2 = 7.0644;
-	_updateMarker() {
-		// this.markers.forEach(marker => {
-		// 	marker.lng += 0.000001;
-		// });
-		// console.log('got');
-		this.d1 += 0.1;
-		this.d2 -= 0.1;
-		PubSub.publish('body.data.got', this.markers);
-		this._refreshMarkers([
-			['1001', this.d1, this.d2, (new Date(Date.now())).toUTCString(), 1010],
-			['1001', this.d1 + 3, this.d2 - 3, (new Date(Date.now())).toUTCString(), 1011],
-		]);
-	}
-
-	_refreshMarkers(data){
-		this.markers.length = 0;
-		// console.log('refresh', data);
-		this._readers.forEach(reader => {
-			data.forEach(item => {
-				if(reader.properties.tags.id === item[0]){
-					const p1 = new LatLng(reader.properties.tags.lat_1, reader.properties.tags.lng_1);
-					const p2 = new LatLng(reader.properties.tags.lat_2, reader.properties.tags.lng_2);
-					const p3 = new LatLng(reader.geometry.coordinates[1], reader.geometry.coordinates[0]);
-
-					const distance = p1.distanceTo(p2)
-					const d1 = item[1];
-					const d2 = item[2];
-					const dlat = reader.properties.tags.lat_2 - reader.properties.tags.lat_1;
-					const dlng = reader.properties.tags.lng_2 - reader.properties.tags.lng_1;
-
-					const r1 = d1 / distance;
-					const r2 = d2 / distance;
+	// markers = [];
+	// d1 = 10;
+	// d2 = 7.0644;
+	// _updateMarker() {
+	// 	// this.markers.forEach(marker => {
+	// 	// 	marker.lng += 0.000001;
+	// 	// });
+	// 	// console.log('got');
+	// 	this.d1 += 0.1;
+	// 	this.d2 -= 0.1;
+	// 	PubSub.publish('body.data.got', this.markers);
+	// 	this._refreshMarkers([
+	// 		['1001', this.d1, this.d2, (new Date(Date.now())).toUTCString(), 1010],
+	// 		['1001', this.d1 + 3, this.d2 - 3, (new Date(Date.now())).toUTCString(), 1011],
+	// 	]);
+	// }
+
+	// _refreshMarkers(data){
+	// 	this.markers.length = 0;
+	// 	// console.log('refresh', data);
+	// 	this._readers.forEach(reader => {
+	// 		data.forEach(item => {
+	// 			if(reader.properties.tags.id === item[0]){
+	// 				const p1 = new LatLng(reader.properties.tags.lat_1, reader.properties.tags.lng_1);
+	// 				const p2 = new LatLng(reader.properties.tags.lat_2, reader.properties.tags.lng_2);
+	// 				const p3 = new LatLng(reader.geometry.coordinates[1], reader.geometry.coordinates[0]);
+
+	// 				const distance = p1.distanceTo(p2)
+	// 				const d1 = item[1];
+	// 				const d2 = item[2];
+	// 				const dlat = reader.properties.tags.lat_2 - reader.properties.tags.lat_1;
+	// 				const dlng = reader.properties.tags.lng_2 - reader.properties.tags.lng_1;
+
+	// 				const r1 = d1 / distance;
+	// 				const r2 = d2 / distance;
 					
-					let lat;
-					let lng;
-
-					if(d1 + d2 === distance || d1 < d2) {
-						lat = reader.properties.tags.lat_1 + r1 * dlat;
-						lng = reader.properties.tags.lng_1 + r1 * dlng;
-					} else {
-						lat = reader.properties.tags.lat_2 - r2 * dlat;
-						lng = reader.properties.tags.lng_2 - r2 * dlng;
-					}
-
-					const marker = {
-						lat: lat, 
-						lng: lng, 
-						reader_id: item[0], 
-						locTime: item[3], 
-						card: item[4], 
-						distance: p3.distanceTo(new LatLng(lat, lng)).toFixed(2),
-						reader_name: reader.properties.tags.name
-					};
-					this.markers.push(marker);
-					// console.log(marker);
-				}
-			});
-		});
-	}
+	// 				let lat;
+	// 				let lng;
+
+	// 				if(d1 + d2 === distance || d1 < d2) {
+	// 					lat = reader.properties.tags.lat_1 + r1 * dlat;
+	// 					lng = reader.properties.tags.lng_1 + r1 * dlng;
+	// 				} else {
+	// 					lat = reader.properties.tags.lat_2 - r2 * dlat;
+	// 					lng = reader.properties.tags.lng_2 - r2 * dlng;
+	// 				}
+
+	// 				const marker = {
+	// 					lat: lat, 
+	// 					lng: lng, 
+	// 					reader_id: item[0], 
+	// 					locTime: item[3], 
+	// 					card: item[4], 
+	// 					distance: p3.distanceTo(new LatLng(lat, lng)).toFixed(2),
+	// 					reader_name: reader.properties.tags.name
+	// 				};
+	// 				this.markers.push(marker);
+	// 				// console.log(marker);
+	// 			}
+	// 		});
+	// 	});
+	// }
 
 	// {"cmd":"tof_data", "version":"1.0.0.0", "data":[["1002",1.1,2.2,1001,3.1,1.1,1,"2022-06-13 16:50:00.023"]]}
 
-	_updateData(data){
-		console.log('body', data);
-		PubSub.publish('body.data.update', data)
-	}
+	// _updateData(data){
+	// 	console.log('body', data);
+	// 	PubSub.publish('body.data.update', data)
+	// }
 
 	/**
 	 * Append last used preset into stack
@@ -472,8 +472,8 @@ class Body extends Component {
 
 	componentDidMount() {
 		this._timerImagery = setInterval(() => this._updateImagery(), 1000);
-		this._timerMarker = setInterval(() => this._updateMarker(), 1000);
-		setTimeout(() => {this._readers = window.vectorDataManager.getAllReaders()}, 1000);
+		// this._timerMarker = setInterval(() => this._updateMarker(), 1000);
+		// setTimeout(() => {this._readers = window.vectorDataManager.getAllReaders()}, 1000);
 		this._checkUserLoggedIn();
 
 		PubSub.subscribe("body.data.update", (msg, data) => {			
@@ -1086,6 +1086,16 @@ class Body extends Component {
 			else {
 				setTimeout(() => PubSub.publish("body.draw.done", data), 100);
 			}
+			PubSub.publish("body.data.changed");
+		});
+
+		PubSub.subscribe("body.data.changed", () => {
+			setTimeout(async () => {
+				const diff = await window.vectorDataManager.computeDiff();
+				let data = JSON.stringify(diff);
+				PubSub.publish('body.data.autosave', data);
+				localStorage.setItem("mapData", data);
+			}, 100);
 		});
 
 		/**
@@ -1209,6 +1219,7 @@ class Body extends Component {
 			else {
 				console.log("Missing information for editing this feature", data.feature);
 			}
+			PubSub.publish("body.data.changed");
 		});
 
 		/**
@@ -1259,6 +1270,7 @@ class Body extends Component {
 			else if((this.state.mode === Body.MODE_BUILDING && this.state.building) || (this.state.mode === Body.MODE_LEVELS && this.state.floor)) {
 				this.setState({ showDialogConfirmDeletion: true });
 			}
+			PubSub.publish("body.data.changed");
 		});
 
 		/**
@@ -1575,6 +1587,8 @@ class Body extends Component {
 					this.forceUpdate();
 				}
 			);
+
+			PubSub.publish("body.data.changed");
 		});
 
 		/**
@@ -1601,6 +1615,8 @@ class Body extends Component {
 					this.forceUpdate();
 				}
 			);
+
+			PubSub.publish("body.data.changed");
 		});
 
 		/**

src/view/Header.js

@@ -77,7 +77,6 @@ class Header extends Component {
 
 						<Dropdown.Menu>
 							<Dropdown.Item
-								active={this.props.mode === Body.MODE_BUILDING}
 								onClick={() => PubSub.publish("body.right_panel.change", { tab: "create" })}
 							>
 								新地图{/* {I18n.t("Edit buildings")} */}

src/view/common/LocationCard.js

@@ -0,0 +1,11 @@
+export default class LocationCard{
+    constructor(lat, lng, reader_id, locTime, card_id, info, src = "img/move.png"){
+        this.lat = lat;
+        this.lng = lng;
+        this.reader_id = reader_id;
+        this.locTime = locTime;
+        this.card = card_id;
+        this.src = src;
+        this.info = info;
+    }
+}

src/view/common/MapManageList.js

@@ -73,6 +73,10 @@ class MapManageList extends Component {
         this.refreshData();
     }
 
+    componentWillUnmount(){
+        PubSub.unsubscribe('body.map.got');
+    }
+
 	refreshData(){
         let its = []
 		for (let i = 0; i < window.editor_user.maps.length; i++) {

src/view/common/MoveableMarker.js

@@ -6,18 +6,22 @@ class MoveableMarker extends Component{
     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 + "img/move.png",
+                iconUrl: window.EDITOR_URL + this.props.data.src,
                 iconSize: [20,20],
                 iconAnchor: [10,10]
             })} name={`${this.props.data.reader_name}-${this.props.data.reader_id}`} key={this.props.key}>
-                <Tooltip
-                    // position=()
-                >
-                    <span>{`卡号：${this.props.data.card} 与基站距离：${this.props.data.distance}米`}</span><br/>
-                    <span>{`经度：${this.props.data.lng} 纬度：${this.props.data.lat}`}</span><br/>
-                    <span>{`定位基站：${this.props.data.reader_name}-${this.props.data.reader_id}`}</span><br/>
-                    <span>{`定位时间：${this.props.data.locTime}`}</span>
-                </Tooltip>
+                {this.props.data.info &&
+                    <Tooltip
+                        // position=()
+                    >
+                        {/* <span>{`卡号：${this.props.data.card} 与基站距离：${this.props.data.distance}米`}</span><br/>
+                        <span>{`经度：${this.props.data.lng} 纬度：${this.props.data.lat}`}</span><br/>
+                        <span>{`定位基站：${this.props.data.reader_name}-${this.props.data.reader_id}`}</span><br/>
+                        <span>{`定位时间：${this.props.data.locTime}`}</span> */}
+                        {this.props.data.info}
+                    </Tooltip>
+                }
                 {/* <Popup>
                     <span>{}</span>
                     <button onClick={() => {console.log(`marker-${this.props.data.id}`)}}>点击</button>

src/view/layers/MoveableObject.js

@@ -15,7 +15,10 @@ class MoveableObjectLayer extends Component {
 		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}></MoveableMarker>
+				let element = <MoveableMarker 
+					data={data[i]} 
+					key={data[i].card}
+				></MoveableMarker>
 				els.push(element)
 			}
 			this.setState({markers: els});