diff options
author | jcardus <joaquim.cardeira@gmail.com> | 2019-07-17 06:32:42 +0200 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2019-07-16 21:32:42 -0700 |
commit | 34fd688c0c9bde351824de56bec83ad4583daf7a (patch) | |
tree | cdf35b65d09b7c45fbf4796122186c4f8f953c21 /web | |
parent | 37e28a7569d38f5aa2b1a18cf188b969347717b0 (diff) | |
download | etbsa-traccar-web-34fd688c0c9bde351824de56bec83ad4583daf7a.tar.gz etbsa-traccar-web-34fd688c0c9bde351824de56bec83ad4583daf7a.tar.bz2 etbsa-traccar-web-34fd688c0c9bde351824de56bec83ad4583daf7a.zip |
Animate marker on updateLatest (#748)
Diffstat (limited to 'web')
-rw-r--r-- | web/app/Style.js | 3 | ||||
-rw-r--r-- | web/app/view/map/MapMarkerController.js | 39 |
2 files changed, 37 insertions, 5 deletions
diff --git a/web/app/Style.js b/web/app/Style.js index 47c49a9..371e05a 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -81,6 +81,9 @@ Ext.define('Traccar.Style', { mapGeofenceWidth: 5, mapGeofenceRadius: 9, + mapAnimateMarkerDuration: 2000, + mapAnimateMarkerTimeout: 40, + coordinatePrecision: 6, numberPrecision: 2, diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js index 630497a..9c61fa6 100644 --- a/web/app/view/map/MapMarkerController.js +++ b/web/app/view/map/MapMarkerController.js @@ -188,6 +188,39 @@ Ext.define('Traccar.view.map.MapMarkerController', { } }, + animateMarker: function (marker, geometry, course) { + var start, end, duration, timeout, line, updatePosition, self; + + start = marker.getGeometry().getCoordinates(); + end = geometry.getCoordinates(); + line = new ol.geom.LineString([start, end]); + duration = Traccar.Style.mapAnimateMarkerDuration; + timeout = Traccar.Style.mapAnimateMarkerTimeout; + self = this; + + updatePosition = function (position, marker) { + var coordinate, style; + coordinate = marker.get('line').getCoordinateAt(position / (duration / timeout)); + style = marker.getStyle(); + marker.setGeometry(new ol.geom.Point(coordinate)); + if (position < duration / timeout) { + setTimeout(updatePosition, timeout, position + 1, marker); + } else { + if (style.getImage().angle !== marker.get('nextCourse')) { + self.rotateMarker(style, marker.get('nextCourse')); + } + marker.set('animating', false); + } + }; + + marker.set('line', line); + marker.set('nextCourse', course); + if (!marker.get('animating')) { + marker.set('animating', true); + updatePosition(1, marker); + } + }, + updateLatest: function (store, data) { var i, position, device, deviceStore; @@ -249,11 +282,7 @@ Ext.define('Traccar.view.map.MapMarkerController', { deviceId = position.get('deviceId'); if (deviceId in this.latestMarkers) { marker = this.latestMarkers[deviceId]; - style = marker.getStyle(); - if (style.getImage().angle !== position.get('course')) { - this.rotateMarker(style, position.get('course')); - } - marker.setGeometry(geometry); + this.animateMarker(marker, geometry, position.get('course')); } else { marker = new ol.Feature(geometry); marker.set('record', device); |