diff options
| -rw-r--r-- | web/app/Resources.js | 6 | ||||
| -rw-r--r-- | web/app/view/map/MapController.js | 57 |
2 files changed, 40 insertions, 23 deletions
diff --git a/web/app/Resources.js b/web/app/Resources.js index bb939c603..19e21b07b 100644 --- a/web/app/Resources.js +++ b/web/app/Resources.js @@ -68,7 +68,11 @@ var styles = { map_center: [ -0.1275, 51.507222 ], map_zoom: 6, - map_max_zoom: 16 + map_max_zoom: 16, + map_report_route: 'blue', + map_report_marker: 'blue', + map_route_width: 5, + map_marker_radius: 50 }; Ext.define('Traccar.Resources', { diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js index cfc669d4d..4d0a9845e 100644 --- a/web/app/view/map/MapController.js +++ b/web/app/view/map/MapController.js @@ -31,9 +31,12 @@ Ext.define('Traccar.view.map.MapController', { getLineStyle: function(color) { return new ol.style.Style({ + fill: new ol.style.Fill({ + color: color + }), stroke: new ol.style.Stroke({ color: color, - width: 2 + width: styles.map_route_width }) }); }, @@ -58,35 +61,45 @@ Ext.define('Traccar.view.map.MapController', { reportShow: function() { var vectorSource = this.getView().vectorSource; - var data = Ext.getStore('Positions').getData().splice(); - data.sort(function(l, r) { - if (l < r) return -1; - if (r < l) return 1; - return 0; - }); - + var data = Ext.getStore('Positions').getData().clone(); + data.sort('fixTime'); + + var index; var positions = []; + for (index = 0; index < data.getCount(); index++) { + positions.push(ol.proj.fromLonLat([ + data.getAt(index).data.longitude, + data.getAt(index).data.latitude + ])); + } - //for (let p of data) - - this.iconFeature = new ol.Feature({ - //geometry: new ol.geom.Point(ol.proj.fromLonLat([-1.257778, 51.751944])) - geometry: new ol.geom.LineString([ - ol.proj.fromLonLat([-1.257778, 52.751944]), - ol.proj.fromLonLat([-3.257778, 51.751944]) - ]) + this.reportRoute = new ol.Feature({ + geometry: new ol.geom.LineString(positions) }); + + /*this.reportStart = new ol.Feature({ + geometry: new ol.geom.Circle(positions[0], styles.map_marker_radius) + }); + + this.reportFinish = new ol.Feature({ + geometry: new ol.geom.Circle(positions[positions.length - 1], styles.map_marker_radius) + });*/ - this.iconFeature.setStyle(this.getLineStyle('black')); + this.reportRoute.setStyle(this.getLineStyle(styles.map_report_route)); + //this.reportStart.setStyle(this.getLineStyle(styles.map_report_marker)); + //this.reportFinish.setStyle(this.getLineStyle(styles.map_report_marker)); - vectorSource.addFeature(this.iconFeature); + vectorSource.addFeature(this.reportRoute); + //vectorSource.addFeature(this.reportStart); + //vectorSource.addFeature(this.reportFinish); }, reportClear: function() { - //this.getView().vectorSource.clear(); - - this.iconFeature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat([-5.257778, 51.751944]))); - this.iconFeature.setStyle(this.getMarkerStyle('red')); + var vectorSource = this.getView().vectorSource; + + vectorSource.removeFeature(this.reportRoute); + //vectorSource.removeFeature(this.reportStart); + //vectorSource.addFeature(this.reportFinish); } }); |