From 13cdf25f6afbd8f77f851bc002021ddc08727eb1 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 20 Dec 2016 15:35:39 +0500 Subject: - Migrate to openlayers 3.20.0 - use style.setImage() - style fixes --- web/app/DeviceImages.js | 6 ------ web/app/GeofenceConverter.js | 2 +- web/app/controller/Root.js | 8 ++++---- web/app/view/BaseMap.js | 2 +- web/app/view/MapMarkerController.js | 32 ++++++++++++++++++-------------- web/load.js | 2 +- 6 files changed, 25 insertions(+), 27 deletions(-) diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index b31f3ed..e58c4f6 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -95,11 +95,5 @@ Ext.define('Traccar.DeviceImages', { image.category = category; return image; - }, - - rotateImageIcon: function (image, angle) { - var svg = this.getImageSvg(image.fill, image.zoom, angle, image.category); - image.getImage().src = this.formatSrc(svg); - image.angle = angle; } }); diff --git a/web/app/GeofenceConverter.js b/web/app/GeofenceConverter.js index 9e3c132..0abefbc 100644 --- a/web/app/GeofenceConverter.js +++ b/web/app/GeofenceConverter.js @@ -43,7 +43,7 @@ Ext.define('Traccar.GeofenceConverter', { projection = mapView.getProjection(); center = ol.proj.transform([Number(coordinates[1]), Number(coordinates[0])], 'EPSG:4326', projection); resolutionAtEquator = mapView.getResolution(); - pointResolution = projection.getPointResolution(resolutionAtEquator, center); + pointResolution = ol.proj.getPointResolution(projection, resolutionAtEquator, center); resolutionFactor = resolutionAtEquator / pointResolution; radius = (Number(coordinates[2]) / ol.proj.METERS_PER_UNIT.m) * resolutionFactor; geometry = new ol.geom.Circle(center, radius); diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js index 0cc2a14..404fb7c 100644 --- a/web/app/controller/Root.js +++ b/web/app/controller/Root.js @@ -134,7 +134,7 @@ Ext.define('Traccar.controller.Root', { Ext.Ajax.request({ url: 'api/devices', - success: function(response) { + success: function (response) { self.updateDevices(Ext.decode(response.responseText)); } }); @@ -144,12 +144,12 @@ Ext.define('Traccar.controller.Root', { headers: { Accept: 'application/json' }, - success: function(response) { + success: function (response) { self.updatePositions(Ext.decode(response.responseText)); } }); - setTimeout(function() { + setTimeout(function () { self.asyncUpdate(false); }, Traccar.Style.reconnectTimeout); }; @@ -186,7 +186,7 @@ Ext.define('Traccar.controller.Root', { }, updatePositions: function (array) { - var i, store, data, entity; + var i, store, entity; store = Ext.getStore('LatestPositions'); for (i = 0; i < array.length; i++) { entity = store.findRecord('deviceId', array[i].deviceId, 0, false, false, true); diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js index 2e981f0..f0d51d5 100644 --- a/web/app/view/BaseMap.js +++ b/web/app/view/BaseMap.js @@ -122,7 +122,7 @@ Ext.define('Traccar.view.BaseMap', { this.map.on('click', function (e) { this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { this.fireEvent('selectfeature', feature); - }, this); + }.bind(this)); }, this); }, diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js index 5fa9f4c..b978aaf 100644 --- a/web/app/view/MapMarkerController.js +++ b/web/app/view/MapMarkerController.js @@ -92,7 +92,8 @@ Ext.define('Traccar.view.MapMarkerController', { style = marker.getStyle(); if (style.getImage().fill !== this.getDeviceColor(device) || style.getImage().category !== device.get('category')) { - marker.setStyle(this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category'))); + this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category')); + marker.changed(); } if (style.getText().getText() !== device.get('name')) { style.getText().setText(device.get('name')); @@ -144,7 +145,7 @@ Ext.define('Traccar.view.MapMarkerController', { marker = this.latestMarkers[deviceId]; style = marker.getStyle(); if (style.getImage().angle !== position.get('course')) { - Traccar.DeviceImages.rotateImageIcon(style.getImage(), position.get('course')); + this.rotateMarker(style, position.get('course')); } marker.setGeometry(geometry); } else { @@ -327,10 +328,15 @@ Ext.define('Traccar.view.MapMarkerController', { style.getImage().category); text = style.getText(); text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); - return new ol.style.Style({ - image: image, - text: text - }); + style.setText(text); + style.setImage(image); + }, + + rotateMarker: function (style, angle) { + style.setImage(Traccar.DeviceImages.getImageIcon(style.getImage().fill, + style.getImage().zoom, + angle, + style.getImage().category)); }, updateDeviceMarker: function (style, color, category) { @@ -341,21 +347,19 @@ Ext.define('Traccar.view.MapMarkerController', { category); text = style.getText(); text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); - return new ol.style.Style({ - image: image, - text: text - }); + style.setText(text); + style.setImage(image); }, selectMarker: function (marker, center) { if (this.selectedMarker) { - this.selectedMarker.setStyle( - this.resizeMarker(this.selectedMarker.getStyle(), false)); + this.resizeMarker(this.selectedMarker.getStyle(), false); + this.selectedMarker.changed(); } if (marker) { - marker.setStyle( - this.resizeMarker(marker.getStyle(), true)); + this.resizeMarker(marker.getStyle(), true); + marker.changed(); if (center) { this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); } diff --git a/web/load.js b/web/load.js index 0fe7ce5..c329295 100644 --- a/web/load.js +++ b/web/load.js @@ -111,7 +111,7 @@ extjsVersion = '6.2.0'; fontAwesomeVersion = '4.7.0'; - olVersion = '3.19.1'; + olVersion = '3.20.0'; if (debugMode) { addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js'); -- cgit v1.2.3