增加POI标识显示

src/view/Map.js

@@ -28,6 +28,7 @@ import MapStyler from '../model/mapcss/MapStyler';
 import LevelSelector from './common/LevelSelector';
 import NorthPointer from './common/NorthPointer';
 import HistoryTrack from './layers/HistoryTrack';
+import POIObject from './layers/POIObject';
 import MapUtil from './utils/MapUtil';
 
 
@@ -435,7 +436,7 @@ class MyMap extends Component {
 					/>
 				}
 
-				{!this.state.loading && this.state.dataready && this.props.mode === Body.MODE_EXPLORE &&
+				{!this.state.loading && this.state.dataready &&
 					<MoveableObject
 						styler={this.mapStyler}
 						level={this.props.level}
@@ -443,6 +444,14 @@ class MyMap extends Component {
 					/>
 				}
 
+				{!this.state.loading && this.state.dataready &&
+					<POIObject
+						styler={this.mapStyler}
+						level={this.props.level}
+						floor={this.props.floor}
+					/>
+				}
+
 				{this.state.initHisTrack &&
 					<HistoryTrack
 						map={this.elem}

src/view/common/POI.js

@@ -0,0 +1,41 @@
+/** * POI点
+ * 
+*/
+import PubSub from "pubsub-js";
+import MapUtil from "../utils/MapUtil";
+import App from "../App";
+
+export default class POI{
+/** * POI点
+    * @param {Number} id - POI id
+    * @param {Number} x - POI x坐标
+    * @param {Number} y - POI y坐标 
+    * @param {String} name - POI 名称
+    * @param {Array<String>} info - jsx详细信息 
+    * @param {String} src - 标记图标路径
+   */
+    constructor(id, x, y, name, info, src){
+        let latlng = MapUtil.distancePointToLatLng(App.origin, x, y);
+        this.lat = latlng.lat;
+        this.lng = latlng.lng;
+        this.src = src ? src : "img/move.png";
+        this.info = info;
+        this.name = name;
+        this.id = id;
+    }
+
+    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);
+    // }
+
+    remove(){
+        PubSub.publish('map.poi.remove', this);
+    }
+}

src/view/common/POIMarker.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Marker, Popup, Tooltip, withLeaflet } from "react-leaflet";
+import { DivIcon, 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]
+                })}
+                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) }
+                    </Popup>
+                }
+            </Marker>;
+                <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>
+        </>
+    }
+}
+
+export default withLeaflet(POIMarker);

src/view/layers/POIObject.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PubSub from 'pubsub-js';
+import {  withLeaflet, LayerGroup } from 'react-leaflet';
+import POIMarker from '../common/POIMarker';
+
+/**
+ * MoveableObject layer allows to show 
+ */
+class POIObjectLayer extends Component {
+	state = {
+		markers: [],
+	}
+
+	componentDidMount(){
+		PubSub.subscribe('map.poi.add', (msg, data) => {
+			let element = <POIMarker 
+					data={data} 
+					key={data.id}
+					ref={this.marker}
+				></POIMarker>
+			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.remove', (msg, data) => {
+			let markers = this.state.markers.filter(m => m.key != data.id);
+			this.setState({markers: markers});
+		});
+	}
+
+	componentWillUnmount(){
+		PubSub.unsubscribe('map.poi.add');
+		PubSub.unsubscribe('map.poi.move');
+		PubSub.unsubscribe('map.poi.remove');
+	}
+
+	render() {
+		return (
+			<LayerGroup key="poi">
+				{ this.state.markers }
+			</LayerGroup>
+		);
+	}
+}
+export default withLeaflet(POIObjectLayer);