diff options
| -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 47c49a96..371e05a1 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 630497a2..9c61fa61 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); |