소스 검색

更新LocationCard和marker的自定义图标设置以及自定义信息展示内容

HuangKai 3 달 전
부모
커밋
6ca23deca9
5개의 변경된 파일46개의 추가작업 그리고 85개의 파일을 삭제
  1. 1 1
      src/view/App.js
  2. 16 76
      src/view/Body.js
  3. 17 3
      src/view/common/LocationCard.js
  4. 8 4
      src/view/common/MoveableMarker.js
  5. 4 1
      src/view/layers/MoveableObject.js

+ 1 - 1
src/view/App.js

@@ -65,7 +65,7 @@ export default class App {
 	 * @private
 	 */
 	_initView() {
-		ReactDOM.render(<Body uuid={this.uuid} />, document.getElementById(this.el));
+		ReactDOM.render(<Body uuid={this.id} />, document.getElementById(this.el));
 		document.title = window.EDITOR_NAME;
 
 		// Disabling context menu

+ 16 - 76
src/view/Body.js

@@ -92,8 +92,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.markers = []
+		// this._readers = []
+		// this.markers = []
 	}
 
 	/**
@@ -322,80 +322,20 @@ 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){
+	// 	let removeMarkers = [];
+	// 	//判断时间,10秒未更新移除
+	// 	this.markers.forEach(marker => {
+	// 		if(){
+	// 			removeMarkers
+	// 		}
+	// 	});
+	// 	this.markers.filter()
+	// 	if(){
+
+	// 	}
 	// }
 
-	_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);
-		// 		}
-		// 	});
-		// });
-		data.forEach(item => {
-			const marker = {
-				lat: item.lat, 
-				lng: item.lng, 
-				reader_id: item.reader_id, 
-				locTime: item.locTime, 
-				card: item.card, 
-				reader_name: item.reader_name
-			};
-			this.markers.push(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){
@@ -496,8 +436,8 @@ class Body extends Component {
 		this._checkUserLoggedIn();
 
 		PubSub.subscribe("body.data.update", (msg, data) => {			
-			this._refreshMarkers(data);
-			PubSub.publish('body.data.got', this.markers);
+			// this._refreshMarkers(data);
+			PubSub.publish('body.data.got', data);
 		})
 
 		// Hide login dialog when user logs in if previously shown

+ 17 - 3
src/view/common/LocationCard.js

@@ -1,10 +1,24 @@
+/** * 定位卡
+ * 
+*/
+
 export default class LocationCard{
-    constructor(lat, lng, reader_id, locTime, card, reader_name){
+/** * 定位卡
+    * @param {Number} lat - 定位卡纬度 
+    * @param {Number} lng - 定位卡经度 
+    * @param {Number} reader_id - 基站ID
+    * @param {String} locTime - 定位时间 
+    * @param {Number} card_id - 定位卡ID 
+    * @param {JSX} info - jsx详细信息 
+    * @param {String} src - 标记图标路径
+   */
+    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;
-        this.reader_name = reader_name;
+        this.card = card_id;
+        this.src = src;
+        this.info = info;
     }
 }

+ 8 - 4
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
+                {this.props.data.info &&
+                    <Tooltip
                     // position=()
                 >
-                    <span>{`卡号:${this.props.data.card} 与基站距离:${this.props.data.distance}米`}</span><br/>
+                    {/* <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>
+                    <span>{`定位时间:${this.props.data.locTime}`}</span> */}
+                    {this.props.data.info}
                 </Tooltip>
+                }
                 {/* <Popup>
                     <span>{}</span>
                     <button onClick={() => {console.log(`marker-${this.props.data.id}`)}}>点击</button>

+ 4 - 1
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});