diff options
Diffstat (limited to 'web/app/view/map')
-rw-r--r-- | web/app/view/map/BaseMap.js | 225 | ||||
-rw-r--r-- | web/app/view/map/MapMarkerController.js | 39 |
2 files changed, 141 insertions, 123 deletions
diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js index c4297f68..c1873161 100644 --- a/web/app/view/map/BaseMap.js +++ b/web/app/view/map/BaseMap.js @@ -37,116 +37,125 @@ Ext.define('Traccar.view.map.BaseMap', { type = Traccar.app.getPreference('map', null); bingKey = server.get('bingKey'); - if (type === 'custom') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - url: server.get('mapUrl'), - attributions: [ - new ol.Attribution({ - html: '' - }) - ] - }) - }); - } else if (type === 'bingRoad') { - layer = new ol.layer.Tile({ - source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Road' - }) - }); - } else if (type === 'bingAerial') { - layer = new ol.layer.Tile({ - source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Aerial' - }) - }); - } else if (type === 'bingHybrid') { - layer = new ol.layer.Tile({ - source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'AerialWithLabels' - }) - }); - } else if (type === 'carto') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', - attributions: [ - new ol.Attribution({ - html: [ - '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ' + - 'contributors, © <a href="https://carto.com/attributions">CARTO</a>' + switch (type) { + case 'custom': + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: server.get('mapUrl'), + attributions: [ + new ol.Attribution({ + html: '' + }) + ] + }) + }); + break; + case 'bingRoad': + layer = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: bingKey, + imagerySet: 'Road' + }) + }); + break; + case 'bingAerial': + layer = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: bingKey, + imagerySet: 'Aerial' + }) + }); + break; + case 'bingHybrid': + layer = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: bingKey, + imagerySet: 'AerialWithLabels' + }) + }); + break; + case 'carto': + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', + attributions: [ + new ol.Attribution({ + html: [ + '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ' + + 'contributors, © <a href="https://carto.com/attributions">CARTO</a>' + ] + }) + ] + }) + }); + break; + case 'baidu': + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + projection: 'BD-MC', + tileUrlFunction: function (tileCoord) { + var urlsLength = 5, z = tileCoord[0], x = tileCoord[1], y = tileCoord[2], hash, index; + + hash = (x << z) + y; + index = hash % urlsLength; + index = index < 0 ? index + urlsLength : index; + + if (x < 0) { + x = 'M' + (-x); + } + if (y < 0) { + y = 'M' + (-y); + } + return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl' + .replace('{}', index).replace('{x}', x).replace('{y}', y).replace('{z}', z); + }, + tileGrid: new ol.tilegrid.TileGrid({ + extent: ol.proj.transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-MC'), + origin: [0, 0], + minZoom: 3, + resolutions: [ + 262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, + 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5 ] - }) - ] - }) - }); - } else if (type === 'baidu') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - projection: 'BD-MC', - tileUrlFunction: function (tileCoord) { - var urlsLength = 5, z = tileCoord[0], x = tileCoord[1], y = tileCoord[2], hash, index; - - hash = (x << z) + y; - index = hash % urlsLength; - index = index < 0 ? index + urlsLength : index; - - if (x < 0) { - x = 'M' + (-x); - } - if (y < 0) { - y = 'M' + (-y); - } - return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl' - .replace('{}', index).replace('{x}', x).replace('{y}', y).replace('{z}', z); - }, - tileGrid: new ol.tilegrid.TileGrid({ - extent: ol.proj.transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-MC'), - origin: [0, 0], - minZoom: 3, - resolutions: [ - 262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, - 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5 + }), + attributions: [ + new ol.Attribution({ + html: '© <a href="http://map.baidu.com/">Baidu</a>' + }) ] - }), - attributions: [ - new ol.Attribution({ - html: '© <a href="http://map.baidu.com/">Baidu</a>' - }) - ] - }) - }); - } else if (type === 'yandexMap') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - url: 'https://vec0{1-4}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}', - projection: 'EPSG:3395', - attributions: [ - new ol.Attribution({ - html: '© <a href="https://yandex.com/maps/">Yandex</a>' - }) - ] - }) - }); - } else if (type === 'yandexSat') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - url: 'https://sat0{1-4}.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}', - projection: 'EPSG:3395', - attributions: [ - new ol.Attribution({ - html: '© <a href="https://yandex.com/maps/">Yandex</a>' - }) - ] - }) - }); - } else { - layer = new ol.layer.Tile({ - source: new ol.source.OSM({}) - }); + }) + }); + break; + case 'yandexMap': + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: 'https://vec0{1-4}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}', + projection: 'EPSG:3395', + attributions: [ + new ol.Attribution({ + html: '© <a href="https://yandex.com/maps/">Yandex</a>' + }) + ] + }) + }); + break; + case 'yandexSat': + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: 'https://sat0{1-4}.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}', + projection: 'EPSG:3395', + attributions: [ + new ol.Attribution({ + html: '© <a href="https://yandex.com/maps/">Yandex</a>' + }) + ] + }) + }); + break; + default: + layer = new ol.layer.Tile({ + source: new ol.source.OSM({}) + }); } lat = Traccar.app.getPreference('latitude', Traccar.Style.mapDefaultLat); diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js index 24742ff9..09dd83dc 100644 --- a/web/app/view/map/MapMarkerController.js +++ b/web/app/view/map/MapMarkerController.js @@ -156,27 +156,30 @@ Ext.define('Traccar.view.map.MapMarkerController', { }, removeDevice: function (store, data) { - var i, deviceId; + var i, deviceId, markersSource; if (!Ext.isArray(data)) { data = [data]; } + + markersSource = this.getView().getMarkersSource(); + for (i = 0; i < data.length; i++) { deviceId = data[i].get('id'); if (this.latestMarkers[deviceId]) { - if (this.getView().getMarkersSource().getFeatureById(this.latestMarkers[deviceId].getId())) { - this.getView().getMarkersSource().removeFeature(this.latestMarkers[deviceId]); + if (markersSource.getFeatureById(this.latestMarkers[deviceId].getId())) { + markersSource.removeFeature(this.latestMarkers[deviceId]); } delete this.latestMarkers[deviceId]; } if (this.accuracyCircles[deviceId]) { - if (this.getView().getAccuracySource().getFeatureById(this.accuracyCircles[deviceId].getId())) { - this.getView().getAccuracySource().removeFeature(this.accuracyCircles[deviceId]); + if (markersSource.getFeatureById(this.accuracyCircles[deviceId].getId())) { + markersSource.removeFeature(this.accuracyCircles[deviceId]); } delete this.accuracyCircles[deviceId]; } if (this.liveRoutes[deviceId]) { - if (this.getView().getLiveRouteSource().getFeatureById(this.liveRoutes[deviceId].getId())) { - this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId]); + if (markersSource.getFeatureById(this.liveRoutes[deviceId].getId())) { + markersSource.removeFeature(this.liveRoutes[deviceId]); } delete this.liveRoutes[deviceId]; } @@ -184,15 +187,17 @@ Ext.define('Traccar.view.map.MapMarkerController', { }, updateLatest: function (store, data) { - var i, position, device; + var i, position, device, deviceStore; if (!Ext.isArray(data)) { data = [data]; } + deviceStore = Ext.getStore('Devices'); + for (i = 0; i < data.length; i++) { position = data[i]; - device = Ext.getStore('Devices').getById(position.get('deviceId')); + device = deviceStore.getById(position.get('deviceId')); if (device) { this.updateAccuracy(position, device); @@ -303,9 +308,10 @@ Ext.define('Traccar.view.map.MapMarkerController', { }, loadReport: function (store, data) { - var i, position, point; + var i, position, point, routeSource; if (data) { this.addReportMarkers(store, data); + routeSource = this.getView().getRouteSource(); this.reportRoute = []; for (i = 0; i < data.length; i++) { @@ -319,7 +325,7 @@ Ext.define('Traccar.view.map.MapMarkerController', { geometry: new ol.geom.LineString([]) })); this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId'))); - this.getView().getRouteSource().addFeature(this.reportRoute[this.reportRoute.length - 1]); + routeSource.addFeature(this.reportRoute[this.reportRoute.length - 1]); } this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); } @@ -352,19 +358,22 @@ Ext.define('Traccar.view.map.MapMarkerController', { }, clearReport: function () { - var key, i; + var key, i, reportSource, markersSource; + + reportSource = this.getView().getRouteSource(); if (this.reportRoute) { for (i = 0; i < this.reportRoute.length; i++) { - this.getView().getRouteSource().removeFeature(this.reportRoute[i]); + reportSource.removeFeature(this.reportRoute[i]); } this.reportRoute = null; } if (this.reportMarkers) { + markersSource = this.getView().getMarkersSource(); for (key in this.reportMarkers) { if (this.reportMarkers.hasOwnProperty(key)) { - this.getView().getMarkersSource().removeFeature(this.reportMarkers[key]); + markersSource.removeFeature(this.reportMarkers[key]); } } this.reportMarkers = {}; @@ -405,7 +414,7 @@ Ext.define('Traccar.view.map.MapMarkerController', { width: Traccar.Style.mapTextStrokeWidth }), offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, - font : Traccar.Style.mapTextFont + font: Traccar.Style.mapTextFont }) }); }, |