aboutsummaryrefslogtreecommitdiff
path: root/web/app/view/map
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view/map')
-rw-r--r--web/app/view/map/BaseMap.js40
-rw-r--r--web/app/view/map/GeofenceMap.js5
-rw-r--r--web/app/view/map/MapController.js3
-rw-r--r--web/app/view/map/MapMarkerController.js62
4 files changed, 75 insertions, 35 deletions
diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
index 07e391f..6c6522b 100644
--- a/web/app/view/map/BaseMap.js
+++ b/web/app/view/map/BaseMap.js
@@ -30,7 +30,7 @@ Ext.define('Traccar.view.map.BaseMap', {
},
initMap: function () {
- var server, layer, type, bingKey, lat, lon, zoom, maxZoom, target, poiLayer;
+ var server, layer, type, bingKey, lat, lon, zoom, maxZoom, target, poiLayer, self = this;
server = Traccar.app.getServer();
@@ -41,11 +41,18 @@ Ext.define('Traccar.view.map.BaseMap', {
case 'custom':
layer = new ol.layer.Tile({
source: new ol.source.XYZ({
- url: server.get('mapUrl'),
+ url: Ext.String.htmlDecode(server.get('mapUrl')),
attributions: ''
})
});
break;
+ case 'customArcgis':
+ layer = new ol.layer.Tile({
+ source: new ol.source.TileArcGISRest({
+ url: Ext.String.htmlDecode(server.get('mapUrl'))
+ })
+ });
+ break;
case 'bingRoad':
layer = new ol.layer.Tile({
source: new ol.source.BingMaps({
@@ -96,7 +103,7 @@ Ext.define('Traccar.view.map.BaseMap', {
if (y < 0) {
y = 'M' + -y;
}
- return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
+ return 'https://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({
@@ -108,7 +115,7 @@ Ext.define('Traccar.view.map.BaseMap', {
1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5
]
}),
- attributions: '&copy; <a href="http://map.baidu.com/">Baidu</a>'
+ attributions: '&copy; <a href="https://map.baidu.com/">Baidu</a>'
})
});
break;
@@ -130,16 +137,16 @@ Ext.define('Traccar.view.map.BaseMap', {
})
});
break;
- case 'osm':
+ case 'wikimedia':
layer = new ol.layer.Tile({
- source: new ol.source.OSM({})
+ source: new ol.source.OSM({
+ url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
+ })
});
break;
default:
layer = new ol.layer.Tile({
- source: new ol.source.OSM({
- url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
- })
+ source: new ol.source.OSM({})
});
break;
}
@@ -207,19 +214,19 @@ Ext.define('Traccar.view.map.BaseMap', {
});
this.map.on('click', function (e) {
- var i, features = this.map.getFeaturesAtPixel(e.pixel, {
+ var i, features = self.map.getFeaturesAtPixel(e.pixel, {
layerFilter: function (layer) {
return !layer.get('name');
}
});
if (features) {
for (i = 0; i < features.length; i++) {
- this.fireEvent('selectfeature', features[i]);
+ self.fireEvent('selectfeature', features[i]);
}
} else {
- this.fireEvent('deselectfeature');
+ self.fireEvent('deselectfeature');
}
- }, this);
+ });
},
listeners: {
@@ -232,7 +239,12 @@ Ext.define('Traccar.view.map.BaseMap', {
}
}
}, function () {
+ var projection;
proj4.defs('BD-MC', '+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs');
proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
- ol.proj.get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
+ ol.proj.proj4.register(proj4);
+ projection = ol.proj.get('EPSG:3395');
+ if (projection) {
+ projection.setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
+ }
});
diff --git a/web/app/view/map/GeofenceMap.js b/web/app/view/map/GeofenceMap.js
index 6b06ae9..8cef574 100644
--- a/web/app/view/map/GeofenceMap.js
+++ b/web/app/view/map/GeofenceMap.js
@@ -105,13 +105,14 @@ Ext.define('Traccar.view.map.GeofenceMap', {
},
addInteraction: function (type) {
+ var self = this;
this.draw = new ol.interaction.Draw({
features: this.features,
type: type
});
this.draw.on('drawstart', function () {
- this.features.clear();
- }, this);
+ self.features.clear();
+ });
this.map.addInteraction(this.draw);
},
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 38b2340..7ba0ee3 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -83,7 +83,8 @@ Ext.define('Traccar.view.map.MapController', {
var feature = new ol.Feature(
Traccar.GeofenceConverter.wktToGeometry(this.getView().getMapView(), geofence.get('area')));
feature.setStyle(this.getAreaStyle(
- geofence.get('name'), geofence.get('attributes') ? geofence.get('attributes').color : null));
+ Ext.String.htmlDecode(geofence.get('name')),
+ geofence.get('attributes') ? geofence.get('attributes').color : null));
this.getView().getGeofencesSource().addFeature(feature);
return true;
}, this);
diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
index bf6b0d4..785fcc6 100644
--- a/web/app/view/map/MapMarkerController.js
+++ b/web/app/view/map/MapMarkerController.js
@@ -130,7 +130,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
},
updateDevice: function (store, data) {
- var i, device, deviceId, marker, style;
+ var i, device, deviceId, deviceName, marker, style;
if (!Ext.isArray(data)) {
data = [data];
@@ -148,8 +148,9 @@ Ext.define('Traccar.view.map.MapMarkerController', {
this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category'));
marker.changed();
}
- if (style.getText().getText() !== device.get('name')) {
- style.getText().setText(device.get('name'));
+ deviceName = Ext.String.htmlDecode(device.get('name'));
+ if (style.getText().getText() !== deviceName) {
+ style.getText().setText(deviceName);
marker.changed();
}
}
@@ -187,6 +188,39 @@ Ext.define('Traccar.view.map.MapMarkerController', {
}
},
+ animateMarker: function (marker, geometry, course) {
+ var start, end, duration, timeout, line, updatePosition, self;
+
+ start = marker.getGeometry().getCoordinates();
+ end = geometry.getCoordinates();
+ line = new ol.geom.LineString([start, end]);
+ duration = Traccar.Style.mapAnimateMarkerDuration;
+ timeout = Traccar.Style.mapAnimateMarkerTimeout;
+ self = this;
+
+ 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 (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;
@@ -209,15 +243,13 @@ Ext.define('Traccar.view.map.MapMarkerController', {
},
updateAccuracy: function (position, device) {
- var center, radius, feature, mapView, projection, pointResolution;
- mapView = this.getView().getMapView();
+ var center, radius, feature;
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;
+ radius = Ext.getStore('DistanceUnits').convertValue(
+ position.get('accuracy'), Traccar.app.getAttributePreference('distanceUnit'), true);
if (feature) {
feature.getGeometry().setCenter(center);
@@ -248,11 +280,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
deviceId = position.get('deviceId');
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
- style = marker.getStyle();
- if (style.getImage().angle !== position.get('course')) {
- this.rotateMarker(style, position.get('course'));
- }
- marker.setGeometry(geometry);
+ this.animateMarker(marker, geometry, position.get('course'));
} else {
marker = new ol.Feature(geometry);
marker.set('record', device);
@@ -260,7 +288,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
style = this.getLatestMarker(this.getDeviceColor(device),
position.get('course'),
device.get('category'));
- style.getText().setText(device.get('name'));
+ style.getText().setText(Ext.String.htmlDecode(device.get('name')));
marker.setStyle(style);
marker.setId(device.get('id'));
this.latestMarkers[deviceId] = marker;
@@ -457,9 +485,6 @@ Ext.define('Traccar.view.map.MapMarkerController', {
if (this.selectedMarker) {
if (this.selectedMarker.get('event')) {
this.getView().getMarkersSource().removeFeature(this.selectedMarker);
- if (!marker || !marker.get('event')) {
- this.fireEvent('deselectevent');
- }
} else if (!Ext.getStore('ReportRoute').showMarkers &&
this.selectedMarker.get('record') instanceof Traccar.model.Position) {
this.getView().getMarkersSource().removeFeature(this.selectedMarker);
@@ -496,12 +521,13 @@ Ext.define('Traccar.view.map.MapMarkerController', {
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;
- this.fireEvent('deselectfeature');
if (position) {
marker = this.addReportMarker(position);
marker.set('event', true);
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-12 21:42:43 +0000