diff options
| -rw-r--r-- | web/app/Style.js | 1 | ||||
| -rw-r--r-- | web/app/view/Map.js | 9 | ||||
| -rw-r--r-- | web/app/view/MapController.js | 73 |
3 files changed, 82 insertions, 1 deletions
diff --git a/web/app/Style.js b/web/app/Style.js index d067e041..a8e16f9f 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -68,6 +68,7 @@ Ext.define('Traccar.Style', { mapMaxZoom: 19, mapDelay: 500, + mapGeofenceTextColor: 'rgba(14, 88, 141, 1.0)', mapGeofenceColor: 'rgba(21, 127, 204, 1.0)', mapGeofenceOverlay: 'rgba(21, 127, 204, 0.2)', mapGeofenceWidth: 5, diff --git a/web/app/view/Map.js b/web/app/view/Map.js index d0ec433b..2cbd1714 100644 --- a/web/app/view/Map.js +++ b/web/app/view/Map.js @@ -39,9 +39,18 @@ Ext.define('Traccar.view.Map', { return this.reportSource; }, + getGeofencesSource: function () { + return this.geofencesSource; + }, + initMap: function () { this.callParent(); + this.geofencesSource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + source: this.geofencesSource + })); + this.latestSource = new ol.source.Vector({}); this.map.addLayer(new ol.layer.Vector({ source: this.latestSource diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 59fd285e..b14d3269 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -21,7 +21,8 @@ Ext.define('Traccar.view.MapController', { requires: [ 'Traccar.model.Position', - 'Traccar.model.Device' + 'Traccar.model.Device', + 'Traccar.GeofenceConverter' ], config: { @@ -45,6 +46,12 @@ Ext.define('Traccar.view.MapController', { '#ReportRoute': { load: 'loadReport', clear: 'clearReport' + }, + '#Geofences': { + load: 'showGeofences', + add: 'updateGeofences', + update: 'updateGeofences', + remove: 'updateGeofences' } }, component: { @@ -58,6 +65,20 @@ Ext.define('Traccar.view.MapController', { init: function () { this.latestMarkers = {}; this.reportMarkers = {}; + this.getView().header = { + xtype: 'header', + title: Strings.mapTitle, + items: [{ + xtype: 'button', + handler: 'showGeofences', + reference: 'showGeofencesButton', + glyph: 'xf21d@FontAwesome', + enableToggle: true, + pressed: true, + tooltip: Strings.sharedGeofences, + tooltipType: 'title' + }] + }; }, getDeviceColor: function (device) { @@ -321,5 +342,55 @@ Ext.define('Traccar.view.MapController', { center = ol.proj.transform(this.getView().getMapView().getCenter(), projection, 'EPSG:4326'); zoom = this.getView().getMapView().getZoom(); this.fireEvent('mapstate', center[1], center[0], zoom); + }, + + getGeofenceStyle: function (label) { + return new ol.style.Style({ + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceOverlay + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapGeofenceColor, + width: Traccar.Style.mapGeofenceWidth + }), + image: new ol.style.Circle({ + radius: Traccar.Style.mapGeofenceRadius, + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceColor + }) + }), + text: new ol.style.Text({ + text: label, + textBaseline: 'bottom', + 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'))); + this.getView().getGeofencesSource().addFeature(feature); + return true; + }, this); + } else { + this.getView().getGeofencesSource().clear(); + } + }, + + updateGeofences: function () { + if (this.lookupReference('showGeofencesButton').pressed) { + this.getView().getGeofencesSource().clear(); + this.showGeofences(); + } } }); |