diff options
author | Abyss777 <abyss@fox5.ru> | 2016-08-25 16:18:12 +0500 |
---|---|---|
committer | Abyss777 <abyss@fox5.ru> | 2016-08-25 16:25:26 +0500 |
commit | 3cb5cca4b8db07fa477b23c711916307ff7db427 (patch) | |
tree | 94b7a4936a2f1ef860f60b636b7296cea74c1cd2 /web/app/view/MapController.js | |
parent | 0a98a11fce24cde2904cadcfee3a0c9ac0044fe7 (diff) | |
download | traccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.tar.gz traccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.tar.bz2 traccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.zip |
- Enabled multiple devices for reports
- Used different colors for routes of different devices
Diffstat (limited to 'web/app/view/MapController.js')
-rw-r--r-- | web/app/view/MapController.js | 42 |
1 files changed, 27 insertions, 15 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index ab7461cf0..57278ce07 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -148,13 +148,15 @@ Ext.define('Traccar.view.MapController', { this.clearReport(store); if (data.length > 0) { - this.reportRoute = new ol.Feature({ - geometry: new ol.geom.LineString([]) - }); - this.reportRoute.setStyle(this.getRouteStyle()); - this.getView().getRouteSource().addFeature(this.reportRoute); - + this.reportRoute = []; for (i = 0; i < data.length; i++) { + if (i === 0 || data[i].get('deviceId') !== data[i - 1].get('deviceId')) { + this.reportRoute.push(new ol.Feature({ + geometry: new ol.geom.LineString([]) + })); + this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId'))); + this.getView().getRouteSource().addFeature(this.reportRoute[this.reportRoute.length - 1]); + } position = data[i]; point = ol.proj.fromLonLat([ @@ -168,25 +170,27 @@ Ext.define('Traccar.view.MapController', { this.reportMarkers[position.get('id')] = marker; this.getView().getReportSource().addFeature(marker); - style = this.getReportMarker(); + style = this.getReportMarker(position.get('deviceId')); style.getImage().setRotation(position.get('course') * Math.PI / 180); /*style.getText().setText( Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/ marker.setStyle(style); - this.reportRoute.getGeometry().appendCoordinate(point); + this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); } - this.getView().getMapView().fit(this.reportRoute.getGeometry(), this.getView().getMap().getSize()); + this.getView().getMapView().fit(this.reportRoute[0].getGeometry(), this.getView().getMap().getSize()); } }, clearReport: function (store) { - var key; + var key, i; if (this.reportRoute) { - this.getView().getRouteSource().removeFeature(this.reportRoute); + for (i = 0; i < this.reportRoute.length; i++) { + this.getView().getRouteSource().removeFeature(this.reportRoute[i]); + } this.reportRoute = null; } @@ -200,10 +204,14 @@ Ext.define('Traccar.view.MapController', { } }, - getRouteStyle: function () { + getRouteStyle: function (deviceId) { + var index = 0; + if (deviceId !== undefined) { + index = deviceId % Traccar.Style.mapRouteColor.length; + } return new ol.style.Style({ stroke: new ol.style.Stroke({ - color: Traccar.Style.mapRouteColor, + color: Traccar.Style.mapRouteColor[index], width: Traccar.Style.mapRouteWidth }) }); @@ -241,9 +249,13 @@ Ext.define('Traccar.view.MapController', { Traccar.Style.mapRadiusNormal, color); }, - getReportMarker: function () { + getReportMarker: function (deviceId) { + var index = 0; + if (deviceId !== undefined) { + index = deviceId % Traccar.Style.mapRouteColor.length; + } return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport); + Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport[index]); }, resizeMarker: function (style, radius) { |