Skip to content
Snippets Groups Projects
Commit 7697c312 authored by Oleksandr Husak's avatar Oleksandr Husak
Browse files

display root and other positions on the map

parent 8be5d0d2
No related branches found
No related tags found
No related merge requests found
...@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs'; ...@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs';
import * as L from "leaflet"; import * as L from "leaflet";
import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { environment } from 'src/environments/environment'; import { environment, MarkerColorMap } from 'src/environments/environment';
import {RelativePos, WGS84} from 'src/app/model/base-model'; import {Position, PositionUpdate, RelativePos, WGS84} from 'src/app/model/base-model';
@Component({ @Component({
selector: 'app-map', selector: 'app-map',
...@@ -18,23 +19,24 @@ export class MapComponent implements OnInit { ...@@ -18,23 +19,24 @@ export class MapComponent implements OnInit {
private subsOrigin: Subscription; private subsOrigin: Subscription;
private map!: L.Map; private map!: L.Map;
private root!: Position;
private origin!: WGS84; agentsInfo: { [key: string]: {} } = {};
markOverlays: { [key: string]: L.LayerGroup<any> } = {};
agentsInfo = new Map();
markOverlays = new Map();
posOverlays: { [key: string]: L.LayerGroup<any> } = {}; posOverlays: { [key: string]: L.LayerGroup<any> } = {};
constructor(private _mqttService: MqttService) { constructor(private _mqttService: MqttService) {
this.origin = {"latitude": 51.02545, "longitude": 13.72295} this.root = {"refSystemId": "ROOT", "point": {"latitude": 51.02545, "longitude": 13.72295}}
this.subsPosition = this._mqttService.observe('testtopic/5699').subscribe((message: IMqttMessage) => { this.subsPosition = this._mqttService.observe('ipos/client/root').subscribe((message: IMqttMessage) => {
let pos: RelativePos = JSON.parse(message.payload.toString()) this.root = JSON.parse(message.payload.toString())
this.updatePosition('default', pos) console.log("New root: ", this.root)
this.registerPoint("ROOT", {"position": this.root})
}); });
this.subsOrigin = this._mqttService.observe('testtopic/5699/origin').subscribe((message: IMqttMessage) => { this.subsOrigin = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
this.origin = JSON.parse(message.payload.toString()) let upd: PositionUpdate = JSON.parse(message.payload.toString())
upd.object.forEach(obj => this.registerPoint(obj.id, obj));
}); });
} }
...@@ -42,37 +44,67 @@ export class MapComponent implements OnInit { ...@@ -42,37 +44,67 @@ export class MapComponent implements OnInit {
// --- Controllers // --- Controllers
updatePosition(key: string, pos: RelativePos) { ref2root(pos: RelativePos) {
// estimated position of an agent // convert a relative position to WFG84 format
let source = <WGS84>this.root.point
let glob_pos = this.convert2wgs(pos) let origin = L.latLng([source.latitude, source.longitude])
let point = L.Projection.Mercator.project(origin)
let newPoint = L.point([point.x + pos.x, point.y + pos.y])
let newLatLng = L.Projection.Mercator.unproject(newPoint)
return newLatLng
}
// let point = L.point(pos.x, pos.y);
// let glob_pos = (this.map).layerPointToLatLng(point)
// --- Leyers registerPoint(key: string, desc: { [key: string]: any }) {
if (key in this.posOverlays) { // --- Leyers for markers
this.posOverlays[key].clearLayers(); if (key in this.markOverlays) {
this.markOverlays[key].clearLayers();
} else { } else {
this.posOverlays[key] = L.layerGroup().addTo(<L.Map>this.map) this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
} }
// --- Info // --- Info
this.agentsInfo.set(key, {"glob_pos": glob_pos}) let pos = desc["position"]
this.agentsInfo[key] = desc
this.addMarker(key, pos)
}
L.circle(glob_pos, 6, { color: '#d32f2f' } addMarker(key: string, pos: Position) {
).addTo(this.posOverlays[key]); let point = pos.point
if ('x' in point) {
var globPos = this.ref2root(point)
} else {
var globPos = L.latLng([point.latitude, point.longitude]);
} }
convert2wgs(pos: RelativePos) { // --- Marker
let origin = L.latLng([this.origin.latitude, this.origin.longitude]); if (key in MarkerColorMap) {
let point = this.map.latLngToContainerPoint(origin); var markerConf = MarkerColorMap[key]
let newPoint = L.point([point.x + pos.x, point.y + pos.y]); } else {
let newLatLng = this.map.containerPointToLatLng(newPoint); var markerConf = MarkerColorMap['Default']
return newLatLng
} }
let marker = L.marker(globPos, {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: `assets/marker-icon-${markerConf.marker}.png`,
iconRetinaUrl: `assets/marker-icon-2x-${markerConf.marker}.png`,
shadowUrl: 'assets/marker-shadow.png',
className: 'true-position-marker'
})
}).bindPopup(key).openPopup();
marker.addTo(this.markOverlays[key])
// --- Accuracy
if (pos?.accuracy) {
L.circle(globPos, pos.accuracy, { color: markerConf.circle}
).addTo(this.markOverlays[key]);
}
}
// @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/ // @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
// --- Layers: Define base layers so we can reference them multiple times // --- Layers: Define base layers so we can reference them multiple times
streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
...@@ -117,13 +149,18 @@ export class MapComponent implements OnInit { ...@@ -117,13 +149,18 @@ export class MapComponent implements OnInit {
let legend = new L.Control({ position: "bottomleft" }); let legend = new L.Control({ position: "bottomleft" });
legend.onAdd = function () { legend.onAdd = function () {
var div = L.DomUtil.create("div", "legend"); var div = L.DomUtil.create("div", "legend");
div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Agents </span><br>'; div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Employee </span><br>';
div.innerHTML += '<i class="est-pos"></i> <span> Estimated position </span><br>'; div.innerHTML += '<i class="est-pos"></i> <span> Estimated position </span><br>';
return div; return div;
}; };
legend.addTo(this.map); // legend.addTo(this.map);
//-- check root
if (this.root) {
this.registerPoint("ROOT", {"position": this.root})
}
} }
......
export interface PositionUpdate {
object: Object[]
type: NotificationType
}
export interface Object {
id: string
sensorId: string
type: ObjectType
sensorType: SensorType
position: Position
orientation?: Orientation
lastPosUpdate: string
}
export interface Position {
refSystemId: string
point: WGS84 | RelativePos
accuracy?: number
}
export interface WGS84 { export interface WGS84 {
latitude: number latitude: number
longitude: number longitude: number
altitude?: number
} }
export interface RelativePos { export interface RelativePos {
x: number x: number
y: number y: number
z?: number
}
interface Orientation {
x: number
y: number
z: number
w: number
} }
enum NotificationType {
EntryNotification,
Unknown
}
enum ObjectType {
HUMAN,
BOX,
ROBOT
}
enum SensorType {
UWB,
Bluetooth,
WiFi
}
import { IMqttServiceOptions } from 'ngx-mqtt';
export const environment = { export const environment = {
production: true, production: true,
APIEndpoint: 'http://webserver:7071'
mapbox: {
accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
accessToken2: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlYm13ZTJtZ2gyb25wbGhqdGhmZzkifQ.atRzBqwKjY9wEUlue2YLzQ'
},
indoorequal: {
APIkey: 'l70N1y3m02lRDrlIqOzYyB'
},
}; };
export const MQTTconfig: IMqttServiceOptions = {
hostname: 'broker.hivemq.com',
port: 8000,
path: '/mqtt'
};
export const MarkerColorMap: { [key: string]: MarkerColor } = {
"ROOT": {"marker": "red", "circle": "#d32f2f"},
"Employee1": {"marker": "green", "circle": "#008632"},
"Employee2": {"marker": "blue", "circle": "#0076EE"},
"Employee3": {"marker": "violet", "circle": "#9700ee"},
"Employee4": {"marker": "yellow", "circle": "#eee600"},
"Default": {"marker": "grey", "circle": "#606060"},
}
interface MarkerColor {
marker: string
circle: string
}
\ No newline at end of file
...@@ -6,7 +6,6 @@ import { IMqttServiceOptions } from 'ngx-mqtt'; ...@@ -6,7 +6,6 @@ import { IMqttServiceOptions } from 'ngx-mqtt';
export const environment = { export const environment = {
production: false, production: false,
APIEndpoint: 'http://localhost:7071',
mapbox: { mapbox: {
accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ', accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
...@@ -25,6 +24,20 @@ export const MQTTconfig: IMqttServiceOptions = { ...@@ -25,6 +24,20 @@ export const MQTTconfig: IMqttServiceOptions = {
path: '/mqtt' path: '/mqtt'
}; };
export const MarkerColorMap: { [key: string]: MarkerColor } = {
"ROOT": {"marker": "red", "circle": "#d32f2f"},
"Employee1": {"marker": "green", "circle": "#008632"},
"Employee2": {"marker": "blue", "circle": "#0076EE"},
"Employee3": {"marker": "violet", "circle": "#9700ee"},
"Employee4": {"marker": "yellow", "circle": "#eee600"},
"Default": {"marker": "grey", "circle": "#606060"},
}
interface MarkerColor {
marker: string
circle: string
}
/* /*
* For easier debugging in development mode, you can import the following file * For easier debugging in development mode, you can import the following file
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment