diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2015-11-07 21:41:51 +1300 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2015-11-07 21:41:51 +1300 |
commit | 7d82aeb8f296a8862e9d64eda029c3184bae089b (patch) | |
tree | 90e71661c5befbc47d1e2cd04f0cc0664dfa86e1 /web/app/view/MapController.js | |
parent | 477375744b788f4ae63cf6cd3812a80b2065a487 (diff) | |
download | traccar-server-7d82aeb8f296a8862e9d64eda029c3184bae089b.tar.gz traccar-server-7d82aeb8f296a8862e9d64eda029c3184bae089b.tar.bz2 traccar-server-7d82aeb8f296a8862e9d64eda029c3184bae089b.zip |
Start map controller refactoring
Diffstat (limited to 'web/app/view/MapController.js')
-rw-r--r-- | web/app/view/MapController.js | 129 |
1 files changed, 72 insertions, 57 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 7921de89f..59415ff73 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -27,65 +27,51 @@ Ext.define('Traccar.view.MapController', { selectDevice: 'selectDevice', selectReport: 'selectReport' } + }, + store: { + '#LatestPositions': { + add: 'update', + update: 'update' + } } } }, init: function () { - this.liveData = {}; - this.update(true); + this.latestMarkers = {}; + this.reportMarkers = {}; }, - update: function (first) { - Ext.Ajax.request({ - scope: this, - url: '/api/async', - params: { - first: first - }, - success: function (response) { - var data = Ext.decode(response.responseText).data; - - var i; - for (i = 0; i < data.length; i++) { - - var store = Ext.getStore('LatestPositions'); - var deviceStore = Ext.getStore('Devices'); - - var found = store.findRecord('deviceId', data[i].deviceId, 0, false, false, true); - if (found) { - found.set(data[i]); - } else { - store.add(Ext.create('Traccar.model.Position', data[i])); - } - - var geometry = new ol.geom.Point(ol.proj.fromLonLat([ - data[i].longitude, - data[i].latitude - ])); - - if (data[i].deviceId in this.liveData) { - this.liveData[data[i].deviceId].setGeometry(geometry); - } else { - var name = deviceStore.findRecord('id', data[i].deviceId, 0, false, false, true).get('name'); - - var style = this.getMarkerStyle(Traccar.Style.mapLiveRadius, Traccar.Style.mapLiveColor, data[i].course, name); - var marker = new ol.Feature({ - geometry: geometry, - originalStyle: style - }); - marker.setStyle(style); - this.getView().vectorSource.addFeature(marker); - this.liveData[data[i].deviceId] = marker; - } - } - - this.update(false); - }, - failure: function () { - // TODO: error + update: function (store, data) { + var i, position, geometry, deviceId, name, marker, style; + if (!Ext.isArray(data)) { + data = [data]; + } + for (i = 0; i < data.length; i++) { + position = data[i]; + deviceId = position.get('deviceId'); + + geometry = new ol.geom.Point(ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ])); + + style = this.getLatestMarker(); + style.getImage().setRotation(position.get('course')); + style.getText().setText( + Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true).get('name')); + + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + marker.setGeometry(geometry); + } else { + marker = new ol.Feature(geometry); + this.latestMarkers[deviceId] = marker; + this.getView().getVectorSource().addFeature(marker); } - }); + + marker.setStyle(style); + } }, getLineStyle: function () { @@ -97,6 +83,35 @@ Ext.define('Traccar.view.MapController', { }); }, + getLatestMarker: function () { + return new ol.style.Style({ + image: new ol.style.Arrow({ + radius: Traccar.Style.mapLiveRadius, + fill: new ol.style.Fill({ + color: Traccar.Style.mapLiveColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapStrokeColor, + width: Traccar.Style.mapMarkerStroke + })//, + //rotation: rotation * Math.PI / 180 + }), + text: new ol.style.Text({ + textBaseline: 'bottom', + //text: text, + fill: new ol.style.Fill({ + color: '#000' + }), + stroke: new ol.style.Stroke({ + color: '#FFF', + width: 2 + }), + offsetY: -12, + font : 'bold 12px sans-serif' + }) + }); + }, + getMarkerStyle: function (radius, color, rotation, text) { return new ol.style.Style({ image: new ol.style.Arrow({ @@ -129,7 +144,7 @@ Ext.define('Traccar.view.MapController', { reportShow: function () { this.reportClear(); - var vectorSource = this.getView().vectorSource; + var vectorSource = this.getView().getVectorSource(); var data = Ext.getStore('Positions').getData(); @@ -167,7 +182,7 @@ Ext.define('Traccar.view.MapController', { }, reportClear: function () { - var vectorSource = this.getView().vectorSource; + var vectorSource = this.getView().getVectorSource(); if (this.reportRoute !== undefined) { vectorSource.removeFeature(this.reportRoute); @@ -195,17 +210,17 @@ Ext.define('Traccar.view.MapController', { var pan = ol.animation.pan({ duration: Traccar.Style.mapDelay, - source: this.getView().mapView.getCenter() + source: this.getView().getMapView().getCenter() }); - this.getView().map.beforeRender(pan); - this.getView().mapView.setCenter(feature.getGeometry().getCoordinates()); + this.getView().getMap().beforeRender(pan); + this.getView().getMapView().setCenter(feature.getGeometry().getCoordinates()); } this.currentFeature = feature; }, selectDevice: function (device) { - this.selectPosition(this.liveData[device.get('id')]); + //this.selectPosition(this.liveData[device.get('id')]); }, selectReport: function (position) { |