diff options
author | Abyss777 <abyss@fox5.ru> | 2016-11-14 17:41:45 +0500 |
---|---|---|
committer | Abyss777 <abyss@fox5.ru> | 2016-11-14 17:41:45 +0500 |
commit | fcd47ae26b362891514d58a02377d7fbf696b961 (patch) | |
tree | e5c6bff81c7a600341ed677a94f1a0fe729725b4 /web | |
parent | cac80442ee6ce9ed72007733346f17fa410d1674 (diff) | |
download | trackermap-web-fcd47ae26b362891514d58a02377d7fbf696b961.tar.gz trackermap-web-fcd47ae26b362891514d58a02377d7fbf696b961.tar.bz2 trackermap-web-fcd47ae26b362891514d58a02377d7fbf696b961.zip |
Remove marker style recreation on marker rotate and color change
Diffstat (limited to 'web')
-rw-r--r-- | web/app/DeviceImages.js | 21 | ||||
-rw-r--r-- | web/app/view/MapController.js | 29 |
2 files changed, 23 insertions, 27 deletions
diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index 96f00980..d976a2b3 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -62,6 +62,11 @@ Ext.define('Traccar.DeviceImages', { return svg; }, + formatSrc: function (svg) { + return 'data:image/svg+xml;charset=utf-8,' + + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement)); + }, + getImageIcon: function (color, zoom, angle, category) { var image, svg, width, height; @@ -71,14 +76,26 @@ Ext.define('Traccar.DeviceImages', { image = new ol.style.Icon({ imgSize: [width, height], - src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement)) + src: this.formatSrc(svg) }); - image.load(); image.fill = color; image.zoom = zoom; image.angle = angle; image.category = category; return image; + }, + + rotateImageIcon: function (image, angle) { + var svg = Traccar.DeviceImages.getImageSvg(image.fill, image.zoom, angle, image.category); + image.getImage().src = this.formatSrc(svg); + image.angle = angle; + }, + + changeImageColor: function (image, color, category) { + var svg = Traccar.DeviceImages.getImageSvg(color, image.zoom, image.angle, category); + image.getImage().src = this.formatSrc(svg); + image.fill = color; + image.category = category; } }); diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index c29c4900..13d3c8bd 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -86,17 +86,6 @@ Ext.define('Traccar.view.MapController', { } }, - changeMarkerColor: function (style, color, category) { - var newStyle = new ol.style.Style({ - image: Traccar.DeviceImages.getImageIcon(color, - style.getImage().zoom, - style.getImage().angle, - category), - text: style.getText() - }); - return newStyle; - }, - updateDevice: function (store, data) { var i, device, deviceId, marker, style; @@ -113,8 +102,9 @@ Ext.define('Traccar.view.MapController', { style = marker.getStyle(); if (style.getImage().fill !== this.getDeviceColor(device) || style.getImage().category !== device.get('category')) { - marker.setStyle( - this.changeMarkerColor(style, this.getDeviceColor(device), device.get('category'))); + Traccar.DeviceImages.changeImageColor(style.getImage(), + this.getDeviceColor(device), device.get('category')); + marker.changed(); } } } @@ -157,7 +147,7 @@ Ext.define('Traccar.view.MapController', { marker = this.latestMarkers[deviceId]; style = marker.getStyle(); if (style.getImage().angle !== position.get('course')) { - marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course'))); + Traccar.DeviceImages.rotateImageIcon(style.getImage(), position.get('course')); } marker.setGeometry(geometry); } else { @@ -329,17 +319,6 @@ Ext.define('Traccar.view.MapController', { }); }, - rotateMarker: function (style, angle) { - var newStyle = new ol.style.Style({ - image: Traccar.DeviceImages.getImageIcon(style.getImage().fill, - style.getImage().zoom, - angle, - style.getImage().category), - text: style.getText() - }); - return newStyle; - }, - selectMarker: function (marker, center) { if (this.selectedMarker) { this.selectedMarker.setStyle( |