Better blending of adjacent lines on map
This commit is contained in:
parent
a5aa58d2ee
commit
37a9a1bd72
GPG Key ID:
AE3FBD02DC583ABB
140
front/map.js
140
front/map.js
|
|
@ -1,5 +1,6 @@
|
|||
require('ol/ol.css');
|
||||
|
||||
const axios = require('axios');
|
||||
const {Map, View} = require('ol');
|
||||
|
||||
const TileLayer = require('ol/layer/Tile').default;
|
||||
|
|
@ -17,47 +18,77 @@ const proj = require('ol/proj');
|
|||
const {Style, Fill, Stroke, Circle} = require('ol/style');
|
||||
const color = require('color');
|
||||
|
||||
const mapboxToken = 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM2\
|
||||
9tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw';
|
||||
const mapboxToken = `pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
|
||||
h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw`;
|
||||
|
||||
const server = window.origin;
|
||||
|
||||
const fetchDataSources = async () =>
|
||||
{
|
||||
const dataSource = new VectorSource();
|
||||
const segmentsSource = new VectorSource();
|
||||
const stopsSource = new VectorSource();
|
||||
|
||||
const res = await fetch(`${server}/network`);
|
||||
const network = await res.json();
|
||||
const network = (await axios.get(`${server}/network`)).data;
|
||||
|
||||
const stopPoints = Object.entries(network.stops)
|
||||
.map(([stopId, stop]) =>
|
||||
new Feature({
|
||||
type: 'stop',
|
||||
color: network.lines[stop.lines[0]].color,
|
||||
geometry: new Point(proj.fromLonLat([stop.lon, stop.lat])),
|
||||
})
|
||||
);
|
||||
|
||||
dataSource.addFeatures(stopPoints);
|
||||
|
||||
const segmentLines = Object.values(network.lines)
|
||||
.flatMap(({color, routes}) =>
|
||||
segmentsSource.addFeatures(
|
||||
Object.values(network.lines).flatMap(({color, routes}) =>
|
||||
routes.map(({segments}) =>
|
||||
new Feature({
|
||||
type: 'segment',
|
||||
color,
|
||||
geometry: new LineString(segments.flat().map(
|
||||
({lat, lon}) => proj.fromLonLat([lon, lat])
|
||||
)),
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
dataSource.addFeatures(segmentLines);
|
||||
stopsSource.addFeatures(
|
||||
Object.entries(network.stops).map(([stopId, stop]) =>
|
||||
new Feature({
|
||||
color: network.lines[stop.lines[0]].color,
|
||||
geometry: new Point(proj.fromLonLat([stop.lon, stop.lat])),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
return dataSource;
|
||||
return {segmentsSource, stopsSource};
|
||||
};
|
||||
|
||||
const makeBorderColor = mainColor =>
|
||||
{
|
||||
const hsl = color(mainColor).hsl();
|
||||
hsl.color = Math.max(0, hsl.color[2] -= 20);
|
||||
return hsl.hex();
|
||||
};
|
||||
|
||||
const segmentsBorderStyle = feature => new Style({
|
||||
stroke: new Stroke({
|
||||
color: makeBorderColor(feature.get('color')),
|
||||
width: 8,
|
||||
}),
|
||||
});
|
||||
|
||||
const segmentsInnerStyle = feature => new Style({
|
||||
stroke: new Stroke({
|
||||
color: feature.get('color'),
|
||||
width: 6,
|
||||
}),
|
||||
});
|
||||
|
||||
const stopsStyle = feature => new Style({
|
||||
image: new Circle({
|
||||
fill: new Fill({
|
||||
color: feature.get('color'),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: makeBorderColor(feature.get('color')),
|
||||
width: 1.5,
|
||||
}),
|
||||
radius: 6,
|
||||
}),
|
||||
});
|
||||
|
||||
const createMap = async (target) =>
|
||||
{
|
||||
// Map background
|
||||
|
|
@ -74,54 +105,31 @@ const createMap = async (target) =>
|
|||
});
|
||||
|
||||
// Data overlay
|
||||
const dataSource = await fetchDataSources();
|
||||
const {segmentsSource, stopsSource} = await fetchDataSources();
|
||||
|
||||
const makeBorderColor = mainColor =>
|
||||
{
|
||||
const hsl = color(mainColor).hsl();
|
||||
hsl.color = Math.max(0, hsl.color[2] -= 20);
|
||||
return hsl.hex();
|
||||
};
|
||||
const segmentsBorderLayer = new VectorLayer({
|
||||
source: segmentsSource,
|
||||
style: segmentsBorderStyle,
|
||||
|
||||
const dataLayer = new VectorLayer({
|
||||
source: dataSource,
|
||||
updateWhileInteracting: true,
|
||||
updateWhileAnimating: true,
|
||||
style: feature =>
|
||||
{
|
||||
if (feature.get('type') === 'stop')
|
||||
{
|
||||
return new Style({
|
||||
image: new Circle({
|
||||
fill: new Fill({
|
||||
color: feature.get('color'),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: makeBorderColor(feature.get('color')),
|
||||
width: 2,
|
||||
}),
|
||||
radius: 6,
|
||||
}),
|
||||
});
|
||||
}
|
||||
else if (feature.get('type') === 'segment')
|
||||
{
|
||||
return [
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: makeBorderColor(feature.get('color')),
|
||||
width: 8,
|
||||
}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: feature.get('color'),
|
||||
width: 6,
|
||||
}),
|
||||
}),
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
const segmentsInnerLayer = new VectorLayer({
|
||||
source: segmentsSource,
|
||||
style: segmentsInnerStyle,
|
||||
|
||||
updateWhileInteracting: true,
|
||||
updateWhileAnimating: true,
|
||||
});
|
||||
|
||||
const stopsLayer = new VectorLayer({
|
||||
source: stopsSource,
|
||||
style: stopsStyle,
|
||||
|
||||
minZoom: 13,
|
||||
updateWhileInteracting: true,
|
||||
updateWhileAnimating: true,
|
||||
});
|
||||
|
||||
// Setup map
|
||||
|
|
@ -129,7 +137,9 @@ const createMap = async (target) =>
|
|||
target,
|
||||
layers: [
|
||||
backgroundLayer,
|
||||
dataLayer,
|
||||
segmentsBorderLayer,
|
||||
segmentsInnerLayer,
|
||||
stopsLayer,
|
||||
],
|
||||
view: new View({
|
||||
center: proj.fromLonLat([3.88, 43.605]),
|
||||
|
|
|
|||
Loading…
Reference in New Issue