Improve icon for courses

This commit is contained in:
Mattéo Delabre 2020-07-23 23:09:05 +02:00
parent 1f8a78e399
commit 1b837272ae
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
1 changed files with 67 additions and 15 deletions

View File

@ -16,7 +16,7 @@ const LineString = require('ol/geom/LineString').default;
const proj = require('ol/proj'); const proj = require('ol/proj');
const {Style, Fill, Stroke, Circle} = require('ol/style'); const {Style, Fill, Stroke, Circle, Icon} = require('ol/style');
const color = require('color'); const color = require('color');
const mapboxToken = `pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\ const mapboxToken = `pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
@ -76,6 +76,13 @@ const makeBorderColor = mainColor =>
return hsl.hex(); return hsl.hex();
}; };
const makeCourseColor = mainColor =>
{
const hsl = color(mainColor).hsl();
hsl.color = Math.max(0, hsl.color[2] += 10);
return hsl.hex();
};
const segmentBorderStyle = feature => new Style({ const segmentBorderStyle = feature => new Style({
stroke: new Stroke({ stroke: new Stroke({
color: makeBorderColor(feature.get('colors')[0]), color: makeBorderColor(feature.get('colors')[0]),
@ -103,18 +110,56 @@ const stopStyle = feature => new Style({
}), }),
}); });
const courseStyle = new Style({ const courseStyles = {};
image: new Circle({
fill: new Fill({ const getCourseStyle = color =>
color: '#FF0000', {
if (!(color in courseStyles))
{
const icon = document.createElement('canvas');
const iconSize = 35;
const shapeSize = 15;
icon.width = iconSize;
icon.height = iconSize * 0.6;
const cx = icon.width / 2;
const cy = icon.height / 2;
const iconCtx = icon.getContext('2d');
for (let [color, size] of [
[makeBorderColor(color), 13],
[color, 10],
[makeCourseColor(color), 7]
])
{
iconCtx.fillStyle = color;
iconCtx.strokeStyle = color;
iconCtx.lineWidth = size;
iconCtx.lineJoin = 'round';
iconCtx.miterLimit = 200000;
iconCtx.beginPath();
iconCtx.moveTo(cx - 0.5 * shapeSize, cy - 0.3 * shapeSize);
iconCtx.lineTo(cx + 0.5 * shapeSize, cy);
iconCtx.lineTo(cx - 0.5 * shapeSize, cy + 0.3 * shapeSize);
iconCtx.closePath();
iconCtx.stroke();
iconCtx.fill();
}
courseStyles[color] = new Style({
image: new Icon({
img: icon,
imgSize: [icon.width, icon.height],
}), }),
stroke: new Stroke({ });
color: makeBorderColor('#FF0000'), }
width: 1.5,
}), return courseStyles[color];
radius: 6, };
}),
});
const createMap = target => const createMap = target =>
{ {
@ -162,7 +207,7 @@ const createMap = target =>
// Setup map // Setup map
const view = new View({ const view = new View({
center: proj.fromLonLat([3.88, 43.605]), center: proj.fromLonLat([3.88, 43.605]),
zoom: 13, zoom: 14,
maxZoom: 22, maxZoom: 22,
constrainResolution: true, constrainResolution: true,
}); });
@ -199,10 +244,17 @@ const createMap = target =>
= stopsLayer.renderer_.inversePixelTransform; = stopsLayer.renderer_.inversePixelTransform;
const ctx = getVectorContext(ev); const ctx = getVectorContext(ev);
ctx.setStyle(courseStyle); let rotation = 0;
for (let course of Object.values(simulInstance.courses)) for (let course of Object.values(simulInstance.courses))
{ {
const color = network.lines[course.line].color;
const style = getCourseStyle(color);
style.getImage().setRotation(rotation * Math.PI / 16);
rotation += 1;
ctx.setStyle(style);
const point = new Point(course.position); const point = new Point(course.position);
ctx.drawGeometry(point); ctx.drawGeometry(point);
} }