From 4d092d96d6d872096abaf2f9883d2b578c5c8f72 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Fri, 13 Jan 2017 06:27:31 +1300 Subject: Show accuracy circle on the map --- web/app/Style.js | 2 ++ web/app/view/BaseMap.js | 2 +- web/app/view/Map.js | 10 ++++++ web/app/view/MapController.js | 34 +------------------ web/app/view/MapMarkerController.js | 65 +++++++++++++++++++++++++++++++++++++ 5 files changed, 79 insertions(+), 34 deletions(-) (limited to 'web') diff --git a/web/app/Style.js b/web/app/Style.js index 2c04b83..d7f01f2 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -70,6 +70,8 @@ Ext.define('Traccar.Style', { mapMaxZoom: 19, mapDelay: 500, + mapAccuracyColor: 'rgba(96, 96, 96, 1.0)', + mapGeofenceTextColor: 'rgba(14, 88, 141, 1.0)', mapGeofenceColor: 'rgba(21, 127, 204, 1.0)', mapGeofenceOverlayOpacity: 0.2, diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js index f329cf2..c755b6c 100644 --- a/web/app/view/BaseMap.js +++ b/web/app/view/BaseMap.js @@ -122,7 +122,7 @@ Ext.define('Traccar.view.BaseMap', { this.map.on('click', function (e) { if (this.map.hasFeatureAtPixel(e.pixel, { layerFilter: function (layer) { - return layer.get('name') !== 'geofencesLayer'; + return !layer.get('name'); } })) { this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { diff --git a/web/app/view/Map.js b/web/app/view/Map.js index 7f109fd..33fa8bb 100644 --- a/web/app/view/Map.js +++ b/web/app/view/Map.js @@ -89,6 +89,10 @@ Ext.define('Traccar.view.Map', { return this.markersSource; }, + getAccuracySource: function () { + return this.accuracySource; + }, + getRouteSource: function () { return this.routeSource; }, @@ -126,6 +130,12 @@ Ext.define('Traccar.view.Map', { source: this.routeSource })); + this.accuracySource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + name: 'accuracyLayer', + source: this.accuracySource + })); + this.markersSource = new ol.source.Vector({}); this.map.addLayer(new ol.layer.Vector({ source: this.markersSource diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 66d6809..43d86d9 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -86,44 +86,12 @@ Ext.define('Traccar.view.MapController', { this.fireEvent('togglestate', state); }, - getGeofenceStyle: function (label, color) { - var fillColor, strokeColor; - if (color) { - fillColor = ol.color.asArray(color); - strokeColor = color; - } else { - fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); - strokeColor = Traccar.Style.mapGeofenceColor; - } - fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; - return new ol.style.Style({ - fill: new ol.style.Fill({ - color: fillColor - }), - stroke: new ol.style.Stroke({ - color: strokeColor, - width: Traccar.Style.mapGeofenceWidth - }), - text: new ol.style.Text({ - text: label, - fill: new ol.style.Fill({ - color: Traccar.Style.mapGeofenceTextColor - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapTextStrokeColor, - width: Traccar.Style.mapTextStrokeWidth - }), - font : Traccar.Style.mapTextFont - }) - }); - }, - showGeofences: function () { if (this.lookupReference('showGeofencesButton').pressed) { Ext.getStore('Geofences').each(function (geofence) { var feature = new ol.Feature(Traccar.GeofenceConverter .wktToGeometry(this.getView().getMapView(), geofence.get('area'))); - feature.setStyle(this.getGeofenceStyle(geofence.get('name'), + feature.setStyle(this.getAreaStyle(geofence.get('name'), geofence.get('attributes') ? geofence.get('attributes').color : null)); this.getView().getGeofencesSource().addFeature(feature); return true; diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js index b014700..80a16a3 100644 --- a/web/app/view/MapMarkerController.js +++ b/web/app/view/MapMarkerController.js @@ -62,10 +62,46 @@ Ext.define('Traccar.view.MapMarkerController', { init: function () { this.latestMarkers = {}; this.reportMarkers = {}; + this.accuracyCircles = {}; this.liveRoutes = {}; this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10); }, + getAreaStyle: function (label, color) { + var fillColor, strokeColor, styleConfig; + if (color) { + fillColor = ol.color.asArray(color); + strokeColor = color; + } else { + fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); + strokeColor = Traccar.Style.mapGeofenceColor; + } + fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; + styleConfig = { + fill: new ol.style.Fill({ + color: fillColor + }), + stroke: new ol.style.Stroke({ + color: strokeColor, + width: Traccar.Style.mapGeofenceWidth + }) + }; + if (label) { + styleConfig.text = new ol.style.Text({ + text: label, + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceTextColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapTextStrokeColor, + width: Traccar.Style.mapTextStrokeWidth + }), + font: Traccar.Style.mapTextFont + }); + } + return new ol.style.Style(styleConfig); + }, + getDeviceColor: function (device) { switch (device.get('status')) { case 'online': @@ -129,12 +165,41 @@ Ext.define('Traccar.view.MapMarkerController', { device = Ext.getStore('Devices').findRecord('id', position.get('deviceId'), 0, false, false, true); if (device) { + this.updateAccuracy(position); this.updateLatestMarker(position, device); this.updateLiveRoute(position); } } }, + updateAccuracy: function (position) { + var center, feature, mapView, projection, pointResolution; + mapView = this.getView().getMapView(); + feature = this.accuracyCircles[position.get('deviceId')]; + + if (position.get('accuracy')) { + projection = mapView.getProjection(); + center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); + pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center); + radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution; + + if (feature) { + feature.getGeometry().setCenter(center); + feature.getGeometry().setRadius(radius); + } else { + feature = new ol.Feature(new ol.geom.Circle(center, radius)); + feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor)); + this.getView().getAccuracySource().addFeature(feature); + this.accuracyCircles[position.get('deviceId')] = feature; + } + } else { + if (feature) { + this.getView().getAccuracySource().removeFeature(feature); + } + delete this.accuracyCircles[position.get('deviceId')]; + } + }, + updateLatestMarker: function (position, device) { var geometry, deviceId, marker, style; geometry = new ol.geom.Point(ol.proj.fromLonLat([ -- cgit v1.2.3