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 {Style, Fill, Stroke, Circle} = require('ol/style');
const {Style, Fill, Stroke, Circle, Icon} = require('ol/style');
const color = require('color');
const mapboxToken = `pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
@ -76,6 +76,13 @@ const makeBorderColor = mainColor =>
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({
stroke: new Stroke({
color: makeBorderColor(feature.get('colors')[0]),
@ -103,18 +110,56 @@ const stopStyle = feature => new Style({
}),
});
const courseStyle = new Style({
image: new Circle({
fill: new Fill({
color: '#FF0000',
const courseStyles = {};
const getCourseStyle = color =>
{
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,
}),
radius: 6,
}),
});
});
}
return courseStyles[color];
};
const createMap = target =>
{
@ -162,7 +207,7 @@ const createMap = target =>
// Setup map
const view = new View({
center: proj.fromLonLat([3.88, 43.605]),
zoom: 13,
zoom: 14,
maxZoom: 22,
constrainResolution: true,
});
@ -199,10 +244,17 @@ const createMap = target =>
= stopsLayer.renderer_.inversePixelTransform;
const ctx = getVectorContext(ev);
ctx.setStyle(courseStyle);
let rotation = 0;
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);
ctx.drawGeometry(point);
}