117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
/**
|
|
* This file defines the map in satellite style for the full replay page.
|
|
*
|
|
* @authors Timo Volkmann, Frank Herkommer.
|
|
*/
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
|
|
let map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/satellite-v9',
|
|
zoom: 0
|
|
});
|
|
|
|
/**
|
|
* Set up the map with its data sources and its different layers.
|
|
*/
|
|
map.on('load', function () {
|
|
|
|
map.addSource('routeTCP', { 'type': 'geojson', 'data': null })
|
|
map.addSource('routeSERIAL', { 'type': 'geojson', 'data': null })
|
|
|
|
map.addLayer({
|
|
'id': 'routeTCP',
|
|
'type': 'line',
|
|
'source': 'routeTCP',
|
|
'layout': {
|
|
'visibility': 'visible'
|
|
},
|
|
'paint': {
|
|
'line-color': 'rgba(30, 139, 195, 1)',
|
|
'line-opacity': 1,
|
|
'line-width': 5
|
|
}
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'routeSERIAL',
|
|
'type': 'line',
|
|
'source': 'routeSERIAL',
|
|
'layout': {
|
|
'visibility': 'visible'
|
|
},
|
|
'paint': {
|
|
'line-color': 'rgba(214, 69, 65, 1)',
|
|
'line-opacity': 1,
|
|
'line-width': 5
|
|
}
|
|
});
|
|
|
|
|
|
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 16 });
|
|
map.setPitch(30);
|
|
|
|
let stateLegendEl = document.getElementById('state-legend');
|
|
stateLegendEl.style.display = 'block';
|
|
})
|
|
|
|
/**
|
|
* Function to add all collected coordinates sent in by the Smartphone to the map.
|
|
* @param sensordataList List of all received messages of the tcp source and their sensor data
|
|
*/
|
|
function updateMapTCPbulk(sensordataList) {
|
|
console.log("add TCP data to map")
|
|
let geoJsonTCP = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: []
|
|
}
|
|
}]
|
|
}
|
|
sensordataList.forEach(sensordata => {
|
|
if (sensordata.Position[0] === 0 && sensordata.Position[1] === 0 && sensordata.Position[2] === 0) {
|
|
return;
|
|
}
|
|
let lat = sensordata.Position[0]
|
|
let lon = sensordata.Position[1]
|
|
geoJsonTCP.features[0].geometry.coordinates.push([lon, lat]);
|
|
|
|
})
|
|
map.getSource('routeTCP').setData(geoJsonTCP);
|
|
map.panTo(geoJsonTCP.features[0].geometry.coordinates[geoJsonTCP.features[0].geometry.coordinates.length-1]);
|
|
}
|
|
|
|
/**
|
|
* Function to add all collected coordinates sent in by the Ublox to the map.
|
|
* @param sensordataList List of all received messages of the serial source and their sensor data
|
|
*/
|
|
function updateMapSERIALbulk(sensordataList) {
|
|
console.log("add SERIAL data to map")
|
|
let geoJsonSerial = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: []
|
|
}
|
|
}]
|
|
}
|
|
sensordataList.forEach(sensordata => {
|
|
if (sensordata.Position[0] === 0 && sensordata.Position[1] === 0 && sensordata.Position[2] === 0) {
|
|
return;
|
|
}
|
|
let lat = sensordata.Position[0]
|
|
let lon = sensordata.Position[1]
|
|
geoJsonSerial.features[0].geometry.coordinates.push([lon, lat]);
|
|
|
|
})
|
|
map.getSource('routeSERIAL').setData(geoJsonSerial);
|
|
map.panTo(geoJsonSerial.features[0].geometry.coordinates[geoJsonSerial.features[0].geometry.coordinates.length-1]);
|
|
}
|