aboutsummaryrefslogtreecommitdiff
path: root/web/app
diff options
context:
space:
mode:
Diffstat (limited to 'web/app')
-rw-r--r--web/app/Style.js2
-rw-r--r--web/app/view/BaseMap.js2
-rw-r--r--web/app/view/Map.js10
-rw-r--r--web/app/view/MapController.js34
-rw-r--r--web/app/view/MapMarkerController.js65
5 files changed, 79 insertions, 34 deletions
diff --git a/web/app/Style.js b/web/app/Style.js
index 2c04b83b..d7f01f29 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -70,6 +70,8 @@ Ext.define('Traccar.Style', {
mapMaxZoom: 19,
mapDelay: 500,
+ mapAccuracyColor: 'rgba(96, 96, 96, 1.0)',
+
mapGeofenceTextColor: 'rgba(14, 88, 141, 1.0)',
mapGeofenceColor: 'rgba(21, 127, 204, 1.0)',
mapGeofenceOverlayOpacity: 0.2,
diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js
index f329cf28..c755b6c9 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) {
if (this.map.hasFeatureAtPixel(e.pixel, {
layerFilter: function (layer) {
- return layer.get('name') !== 'geofencesLayer';
+ return !layer.get('name');
}
})) {
this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index b6f04446..88bdf8b4 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -89,6 +89,10 @@ Ext.define('Traccar.view.Map', {
return this.markersSource;
},
+ getAccuracySource: function () {
+ return this.accuracySource;
+ },
+
getRouteSource: function () {
return this.routeSource;
},
@@ -126,6 +130,12 @@ Ext.define('Traccar.view.Map', {
source: this.routeSource
}));
+ this.accuracySource = new ol.source.Vector({});
+ this.map.addLayer(new ol.layer.Vector({
+ name: 'accuracyLayer',
+ source: this.accuracySource
+ }));
+
this.markersSource = new ol.source.Vector({});
this.map.addLayer(new ol.layer.Vector({
source: this.markersSource
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index a9edee95..95296f14 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -86,45 +86,13 @@ Ext.define('Traccar.view.MapController', {
this.fireEvent('togglestate', state);
},
- getGeofenceStyle: function (label, color) {
- var fillColor, strokeColor;
- 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;
- return new ol.style.Style({
- fill: new ol.style.Fill({
- color: fillColor
- }),
- stroke: new ol.style.Stroke({
- color: strokeColor,
- width: Traccar.Style.mapGeofenceWidth
- }),
- text: new ol.style.Text({
- text: label,
- 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
- })
- });
- },
-
updateGeofences: function () {
this.getView().getGeofencesSource().clear();
if (this.lookupReference('showGeofencesButton').pressed) {
Ext.getStore('Geofences').each(function (geofence) {
var feature = new ol.Feature(Traccar.GeofenceConverter
.wktToGeometry(this.getView().getMapView(), geofence.get('area')));
- feature.setStyle(this.getGeofenceStyle(geofence.get('name'),
+ feature.setStyle(this.getAreaStyle(geofence.get('name'),
geofence.get('attributes') ? geofence.get('attributes').color : null));
this.getView().getGeofencesSource().addFeature(feature);
return true;
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index b0147002..80a16a30 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -62,10 +62,46 @@ Ext.define('Traccar.view.MapMarkerController', {
init: function () {
this.latestMarkers = {};
this.reportMarkers = {};
+ this.accuracyCircles = {};
this.liveRoutes = {};
this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
},
+ 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,
+ 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':
@@ -129,12 +165,41 @@ Ext.define('Traccar.view.MapMarkerController', {
device = Ext.getStore('Devices').findRecord('id', position.get('deviceId'), 0, false, false, true);
if (device) {
+ this.updateAccuracy(position);
this.updateLatestMarker(position, device);
this.updateLiveRoute(position);
}
}
},
+ updateAccuracy: function (position) {
+ var center, feature, mapView, projection, pointResolution;
+ mapView = this.getView().getMapView();
+ feature = this.accuracyCircles[position.get('deviceId')];
+
+ if (position.get('accuracy')) {
+ projection = mapView.getProjection();
+ center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]);
+ pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center);
+ radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution;
+
+ 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));
+ this.getView().getAccuracySource().addFeature(feature);
+ this.accuracyCircles[position.get('deviceId')] = feature;
+ }
+ } else {
+ if (feature) {
+ 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([
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 19:37:51 +0000