|
|
@ -21,6 +21,7 @@ const color = require('color'); |
|
|
|
const mapboxToken = `pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
|
|
|
|
h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw`;
|
|
|
|
|
|
|
|
const simulation = require('../tam/simulation'); |
|
|
|
const network = require('../tam/network.json'); |
|
|
|
|
|
|
|
const getRouteColors = routes => |
|
|
@ -39,7 +40,7 @@ const getRouteColors = routes => |
|
|
|
return ['#FFFFFF']; |
|
|
|
}; |
|
|
|
|
|
|
|
const makeDataSources = async () => |
|
|
|
const makeDataSources = () => |
|
|
|
{ |
|
|
|
const segmentsSource = new VectorSource(); |
|
|
|
const stopsSource = new VectorSource(); |
|
|
@ -101,7 +102,7 @@ const stopsStyle = feature => new Style({ |
|
|
|
}), |
|
|
|
}); |
|
|
|
|
|
|
|
const createMap = async (target) => |
|
|
|
const createMap = target => |
|
|
|
{ |
|
|
|
// Map background
|
|
|
|
const backgroundSource = new XYZSource({ |
|
|
@ -116,8 +117,8 @@ const createMap = async (target) => |
|
|
|
source: backgroundSource, |
|
|
|
}); |
|
|
|
|
|
|
|
// Data overlay
|
|
|
|
const {segmentsSource, stopsSource} = await makeDataSources(); |
|
|
|
// Static data overlay
|
|
|
|
const {segmentsSource, stopsSource} = makeDataSources(); |
|
|
|
|
|
|
|
const segmentsBorderLayer = new VectorLayer({ |
|
|
|
source: segmentsSource, |
|
|
@ -144,6 +145,63 @@ const createMap = async (target) => |
|
|
|
updateWhileAnimating: true, |
|
|
|
}); |
|
|
|
|
|
|
|
// Dynamic data overlay
|
|
|
|
const coursesSource = new VectorSource(); |
|
|
|
|
|
|
|
const onFrame = courses => |
|
|
|
{ |
|
|
|
// Remove stale courses
|
|
|
|
for (let feature of coursesSource.getFeatures()) |
|
|
|
{ |
|
|
|
if (!(feature.getId() in courses)) |
|
|
|
{ |
|
|
|
coursesSource.removeFeature(feature); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// Add new courses or update existing courses
|
|
|
|
const newFeatures = []; |
|
|
|
|
|
|
|
for (let [courseId, course] of Object.entries(courses)) |
|
|
|
{ |
|
|
|
if ('position' in course) |
|
|
|
{ |
|
|
|
const feature = coursesSource.getFeatureById(courseId); |
|
|
|
const coords = proj.fromLonLat([ |
|
|
|
course.position.lon, |
|
|
|
course.position.lat |
|
|
|
]); |
|
|
|
|
|
|
|
if (feature === null) |
|
|
|
{ |
|
|
|
const feature = new Feature({ |
|
|
|
colors: ['#FF0000'], |
|
|
|
geometry: new Point(coords) |
|
|
|
}); |
|
|
|
|
|
|
|
feature.setId(courseId); |
|
|
|
newFeatures.push(feature); |
|
|
|
} |
|
|
|
else |
|
|
|
{ |
|
|
|
feature.getGeometry().setCoordinates(coords); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
coursesSource.addFeatures(newFeatures); |
|
|
|
}; |
|
|
|
|
|
|
|
simulation.run(onFrame); |
|
|
|
|
|
|
|
const coursesLayer = new VectorLayer({ |
|
|
|
source: coursesSource, |
|
|
|
style: stopsStyle, |
|
|
|
|
|
|
|
updateWhileInteracting: true, |
|
|
|
updateWhileAnimating: true, |
|
|
|
}); |
|
|
|
|
|
|
|
// Setup map
|
|
|
|
const map = new Map({ |
|
|
|
target, |
|
|
@ -152,6 +210,7 @@ const createMap = async (target) => |
|
|
|
segmentsBorderLayer, |
|
|
|
segmentsInnerLayer, |
|
|
|
stopsLayer, |
|
|
|
coursesLayer, |
|
|
|
], |
|
|
|
view: new View({ |
|
|
|
center: proj.fromLonLat([3.88, 43.605]), |
|
|
|