diff options
Diffstat (limited to 'legacy/web/app/view/map/MapMarkerController.js')
| -rw-r--r-- | legacy/web/app/view/map/MapMarkerController.js | 687 |
1 files changed, 687 insertions, 0 deletions
diff --git a/legacy/web/app/view/map/MapMarkerController.js b/legacy/web/app/view/map/MapMarkerController.js new file mode 100644 index 00000000..2fef4870 --- /dev/null +++ b/legacy/web/app/view/map/MapMarkerController.js @@ -0,0 +1,687 @@ +/* + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) + * Copyright 2016 - 2017 Andrey Kunitsyn (andrey@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + +Ext.define('Traccar.view.map.MapMarkerController', { + extend: 'Ext.app.ViewController', + alias: 'controller.mapMarker', + + requires: [ + 'Traccar.model.Position', + 'Traccar.model.Device', + 'Traccar.DeviceImages' + ], + + config: { + listen: { + controller: { + '*': { + selectdevice: 'selectDevice', + selectreport: 'selectReport', + selectevent: 'selectEvent' + }, + 'devices': { + deselectfeature: 'deselectDevice' + } + }, + store: { + '#Devices': { + add: 'updateDevice', + update: 'updateDevice', + remove: 'removeDevice' + }, + '#VisibleDevices': { + add: 'updateVisibleDevices', + update: 'updateVisibleDevices', + remove: 'updateVisibleDevices', + refresh: 'filterDevices' + }, + '#LatestPositions': { + add: 'updateLatest', + update: 'updateLatest' + }, + '#ReportRoute': { + add: 'addReportMarkers', + load: 'loadReport', + clear: 'clearReport' + }, + '#Events': { + remove: 'clearEvent', + clear: 'clearEvent' + } + }, + component: { + '#': { + mapready: 'initGeolocation', + selectfeature: 'selectFeature', + deselectfeature: 'deselectFeature' + } + } + } + }, + + init: function () { + this.latestMarkers = {}; + this.reportMarkers = {}; + this.accuracyCircles = {}; + this.liveRoutes = {}; + this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10); + this.selectZoom = Traccar.app.getAttributePreference('web.selectZoom', 0); + }, + + initGeolocation: function () { + var geolocation, accuracyFeature, positionFeature; + + geolocation = new ol.Geolocation({ + trackingOptions: { + enableHighAccuracy: true + }, + projection: this.getView().getMapView().getProjection() + }); + + geolocation.on('error', function (error) { + Traccar.app.showError(error.message); + }); + + accuracyFeature = new ol.Feature(); + geolocation.on('change:accuracyGeometry', function () { + accuracyFeature.setGeometry(geolocation.getAccuracyGeometry()); + }); + + positionFeature = new ol.Feature(); + positionFeature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: '#3399CC' + }), + stroke: new ol.style.Stroke({ + color: '#fff', + width: 2 + }) + }) + })); + + geolocation.on('change:position', function () { + var coordinates = geolocation.getPosition(); + positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null); + }); + + this.getView().getAccuracySource().addFeature(accuracyFeature); + this.getView().getMarkersSource().addFeature(positionFeature); + + this.geolocation = geolocation; + }, + + showCurrentLocation: function (view) { + this.geolocation.setTracking(view.pressed); + }, + + getAreaStyle: function (label, color) { + var fillColor, strokeColor, styleConfig; + if (color) { + fillColor = ol.color.asArray(color); + strokeColor = color; + } else { + fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); + strokeColor = Traccar.Style.mapGeofenceColor; + } + fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; + styleConfig = { + fill: new ol.style.Fill({ + color: fillColor + }), + stroke: new ol.style.Stroke({ + color: strokeColor, + width: Traccar.Style.mapGeofenceWidth + }) + }; + if (label) { + styleConfig.text = new ol.style.Text({ + text: label, + overflow: true, + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceTextColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapTextStrokeColor, + width: Traccar.Style.mapTextStrokeWidth + }), + font: Traccar.Style.mapTextFont + }); + } + return new ol.style.Style(styleConfig); + }, + + getDeviceColor: function (device) { + switch (device.get('status')) { + case 'online': + return Traccar.Style.mapColorOnline; + case 'offline': + return Traccar.Style.mapColorOffline; + default: + return Traccar.Style.mapColorUnknown; + } + }, + + updateDevice: function (store, data) { + var i, device, deviceId, deviceName, marker, style; + + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + device = data[i]; + deviceId = device.get('id'); + + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + style = marker.getStyle(); + if (style.getImage().fill !== this.getDeviceColor(device) || + style.getImage().category !== device.get('category')) { + this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category')); + marker.changed(); + } + deviceName = Ext.String.htmlDecode(device.get('name')); + if (style.getText().getText() !== deviceName) { + style.getText().setText(deviceName); + marker.changed(); + } + } + } + }, + + removeDevice: function (store, data) { + 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 (markersSource.getFeatureById(this.latestMarkers[deviceId].getId())) { + markersSource.removeFeature(this.latestMarkers[deviceId]); + } + delete this.latestMarkers[deviceId]; + } + if (this.accuracyCircles[deviceId]) { + if (markersSource.getFeatureById(this.accuracyCircles[deviceId].getId())) { + markersSource.removeFeature(this.accuracyCircles[deviceId]); + } + delete this.accuracyCircles[deviceId]; + } + if (this.liveRoutes[deviceId]) { + if (markersSource.getFeatureById(this.liveRoutes[deviceId].getId())) { + markersSource.removeFeature(this.liveRoutes[deviceId]); + } + delete this.liveRoutes[deviceId]; + } + } + }, + + animateMarker: function (marker, geometry, course) { + var start, end, duration, timeout, line, updatePosition, self, follow; + + start = marker.getGeometry().getCoordinates(); + end = geometry.getCoordinates(); + line = new ol.geom.LineString([start, end]); + duration = Traccar.Style.mapAnimateMarkerDuration; + timeout = Traccar.Style.mapAnimateMarkerTimeout; + self = this; + follow = this.lookupReference('deviceFollowButton').pressed; + + 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 (marker === self.selectedMarker && follow) { + self.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); + } + 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; + + if (!Ext.isArray(data)) { + data = [data]; + } + + deviceStore = Ext.getStore('Devices'); + + for (i = 0; i < data.length; i++) { + position = data[i]; + device = deviceStore.getById(position.get('deviceId')); + + if (device) { + this.updateAccuracy(position, device); + this.updateLatestMarker(position, device); + this.updateLiveRoute(position, device); + } + } + }, + + updateAccuracy: function (position, device) { + var center, radius, feature; + feature = this.accuracyCircles[position.get('deviceId')]; + + if (position.get('accuracy')) { + center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); + radius = Ext.getStore('DistanceUnits').convertValue( + position.get('accuracy'), Traccar.app.getAttributePreference('distanceUnit'), true); + + if (feature) { + feature.getGeometry().setCenter(center); + feature.getGeometry().setRadius(radius); + } else { + feature = new ol.Feature(new ol.geom.Circle(center, radius)); + feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor)); + feature.setId(position.get('deviceId')); + this.accuracyCircles[position.get('deviceId')] = feature; + if (this.isDeviceVisible(device)) { + this.getView().getAccuracySource().addFeature(feature); + } + } + } else { + if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) { + this.getView().getAccuracySource().removeFeature(feature); + } + delete this.accuracyCircles[position.get('deviceId')]; + } + }, + + updateLatestMarker: function (position, device) { + var geometry, deviceId, marker, style; + geometry = new ol.geom.Point(ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ])); + deviceId = position.get('deviceId'); + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + this.animateMarker(marker, geometry, position.get('course')); + } else { + marker = new ol.Feature(geometry); + marker.set('record', device); + + style = this.getLatestMarker(this.getDeviceColor(device), + position.get('course'), + device.get('category')); + style.getText().setText(Ext.String.htmlDecode(device.get('name'))); + marker.setStyle(style); + marker.setId(device.get('id')); + this.latestMarkers[deviceId] = marker; + if (this.isDeviceVisible(device)) { + this.getView().getMarkersSource().addFeature(marker); + } + if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) { + this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); + } + } + }, + + updateLiveRoute: function (position, device) { + var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates; + deviceId = position.get('deviceId'); + if (deviceId in this.liveRoutes) { + liveCoordinates = this.liveRoutes[deviceId].getGeometry().getCoordinates(); + lastLiveCoordinates = liveCoordinates[liveCoordinates.length - 1]; + newCoordinates = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); + if (lastLiveCoordinates[0] === newCoordinates[0] && + lastLiveCoordinates[1] === newCoordinates[1]) { + return; + } + if (liveCoordinates.length >= this.liveRouteLength) { + liveCoordinates.shift(); + } + liveCoordinates.push(newCoordinates); + this.liveRoutes[deviceId].getGeometry().setCoordinates(liveCoordinates); + } else { + liveLine = new ol.Feature({ + geometry: new ol.geom.LineString([ + ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]) + ]) + }); + liveLine.setStyle(this.getRouteStyle(deviceId)); + liveLine.setId(deviceId); + this.liveRoutes[deviceId] = liveLine; + if (this.isDeviceVisible(device)) { + this.getView().getMarkersSource().addFeature(liveLine); + } + } + }, + + loadReport: function (store, data) { + var i, position, point, routeSource; + if (data) { + this.addReportMarkers(store, data); + routeSource = this.getView().getRouteSource(); + + this.reportRoute = []; + for (i = 0; i < data.length; i++) { + position = data[i]; + point = ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]); + if (i === 0 || data[i].get('deviceId') !== data[i - 1].get('deviceId')) { + this.reportRoute.push(new ol.Feature({ + geometry: new ol.geom.LineString([]) + })); + this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId'))); + routeSource.addFeature(this.reportRoute[this.reportRoute.length - 1]); + } + this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); + } + } + }, + + addReportMarker: function (position) { + var geometry, marker, style, point = ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]); + geometry = new ol.geom.Point(point); + marker = new ol.Feature(geometry); + marker.set('record', position); + style = this.getReportMarker(position.get('deviceId'), position.get('course')); + marker.setStyle(style); + this.getView().getMarkersSource().addFeature(marker); + return marker; + }, + + addReportMarkers: function (store, data) { + var i; + this.clearReport(); + for (i = 0; i < data.length; i++) { + if (store.showMarkers) { + this.reportMarkers[data[i].get('id')] = this.addReportMarker(data[i]); + } + } + this.zoomToAllPositions(data); + }, + + clearReport: function () { + var key, i, reportSource, markersSource; + + reportSource = this.getView().getRouteSource(); + + if (this.reportRoute) { + for (i = 0; i < this.reportRoute.length; 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)) { + markersSource.removeFeature(this.reportMarkers[key]); + } + } + this.reportMarkers = {}; + } + + if (this.selectedMarker && !this.selectedMarker.get('event') && + this.selectedMarker.get('record') instanceof Traccar.model.Position) { + this.selectedMarker = null; + } + }, + + clearEvent: function () { + if (this.selectedMarker && this.selectedMarker.get('event')) { + this.selectMarker(null, false); + } + }, + + getRouteStyle: function (deviceId) { + return new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: Traccar.app.getReportColor(deviceId), + width: Traccar.Style.mapRouteWidth + }) + }); + }, + + getMarkerStyle: function (zoom, color, angle, category) { + var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category); + return new ol.style.Style({ + image: image, + text: new ol.style.Text({ + textBaseline: 'bottom', + fill: new ol.style.Fill({ + color: Traccar.Style.mapTextColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapTextStrokeColor, + width: Traccar.Style.mapTextStrokeWidth + }), + offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, + font: Traccar.Style.mapTextFont + }) + }); + }, + + getLatestMarker: function (color, angle, category) { + return this.getMarkerStyle(false, color, angle, category); + }, + + getReportMarker: function (deviceId, angle) { + return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow'); + }, + + resizeMarker: function (style, zoom) { + var image, text; + image = Traccar.DeviceImages.getImageIcon( + style.getImage().fill, zoom, style.getImage().angle, style.getImage().category); + text = style.getText(); + text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + 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) { + var image, text; + image = Traccar.DeviceImages.getImageIcon( + color, style.getImage().zoom, style.getImage().angle, category); + text = style.getText(); + text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + style.setText(text); + style.setImage(image); + }, + + selectMarker: function (marker, center) { + if (this.selectedMarker) { + if (this.selectedMarker.get('event')) { + this.getView().getMarkersSource().removeFeature(this.selectedMarker); + } else if (!Ext.getStore('ReportRoute').showMarkers && + this.selectedMarker.get('record') instanceof Traccar.model.Position) { + this.getView().getMarkersSource().removeFeature(this.selectedMarker); + delete this.reportMarkers[this.selectedMarker.get('record').get('id')]; + } else { + this.resizeMarker(this.selectedMarker.getStyle(), false); + this.selectedMarker.getStyle().setZIndex(0); + this.selectedMarker.changed(); + } + } + + if (marker) { + this.resizeMarker(marker.getStyle(), true); + marker.getStyle().setZIndex(1); + marker.changed(); + if (center) { + this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); + if (this.selectZoom !== 0 && this.selectZoom > this.getView().getMapView().getZoom()) { + this.getView().getMapView().setZoom(this.selectZoom); + } + } + } + + this.selectedMarker = marker; + }, + + selectDevice: function (device, center) { + this.selectMarker(this.latestMarkers[device.get('id')], center); + }, + + selectReport: function (position, center) { + if (position instanceof Traccar.model.Position) { + if (!Ext.getStore('ReportRoute').showMarkers) { + this.reportMarkers[position.get('id')] = this.addReportMarker(position); + } + this.selectMarker(this.reportMarkers[position.get('id')], center); + } else if (this.selectedMarker) { + this.selectMarker(null, false); + } + }, + + selectEvent: function (position) { + var marker; + if (position) { + marker = this.addReportMarker(position); + marker.set('event', true); + this.selectMarker(marker, true); + } else if (this.selectedMarker && this.selectedMarker.get('event')) { + this.selectMarker(null, false); + } + }, + + selectFeature: function (feature) { + var record = feature.get('record'); + if (record) { + if (record instanceof Traccar.model.Device) { + this.fireEvent('selectdevice', record, false); + } else { + this.fireEvent('selectreport', record, false); + } + } + }, + + deselectFeature: function () { + this.deselectDevice(); + this.fireEvent('deselectfeature'); + }, + + deselectDevice: function () { + this.selectMarker(null, false); + }, + + zoomToAllPositions: function (data) { + var i, point, minx, miny, maxx, maxy; + for (i = 0; i < data.length; i++) { + point = ol.proj.fromLonLat([ + data[i].get('longitude'), + data[i].get('latitude') + ]); + if (i === 0) { + minx = maxx = point[0]; + miny = maxy = point[1]; + } else { + minx = Math.min(point[0], minx); + miny = Math.min(point[1], miny); + maxx = Math.max(point[0], maxx); + maxy = Math.max(point[1], maxy); + } + } + if (minx !== maxx || miny !== maxy) { + this.getView().getMapView().fit([minx, miny, maxx, maxy]); + } else if (point) { + this.getView().getMapView().fit(new ol.geom.Point(point)); + } + }, + + updateVisibleDevices: function (store, data) { + var i, device; + + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + device = data[i]; + if (device.get('id') in this.latestMarkers) { + this.updateDeviceVisibility(device); + } + } + }, + + isDeviceVisible: function (device) { + return Ext.getStore('VisibleDevices').contains(device); + }, + + updateDeviceVisibility: function (device) { + var deviceId, accuracy, liveLine, marker; + deviceId = device.get('id'); + marker = this.latestMarkers[deviceId]; + accuracy = this.accuracyCircles[deviceId]; + liveLine = this.liveRoutes[deviceId]; + if (this.isDeviceVisible(device)) { + if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) { + this.getView().getMarkersSource().addFeature(marker); + } + if (accuracy && !this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { + this.getView().getAccuracySource().addFeature(accuracy); + } + if (liveLine && !this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { + this.getView().getLiveRouteSource().addFeature(liveLine); + } + } else { + if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) { + this.getView().getMarkersSource().removeFeature(marker); + } + if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { + this.getView().getAccuracySource().removeFeature(accuracy); + } + if (liveLine && this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { + this.getView().getLiveRouteSource().removeFeature(liveLine); + } + } + }, + + filterDevices: function () { + Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false); + } +}); |