Stacked Lines (or Multilines?) between two Points on Map

Question

I hope that I am in the right place with my concern.

I recently made myself some thoughts on how my company software could evolve to get better and noticed on a website a map-based software, which had some kind of "stacked lines" between to points on the map. I know that it is possible to create a single line between two points, but IMHO the "stacked lines" are a good option for a map as well. Is it possible to create such an "multi line" example between two points with openlayers?

Here are two examples of what I mean:

My Question is not about getting a 100% answer! So i dont see the "offtopic" reason in here... it is more a question if anyone has tried to get something like this before or if it is possible to create such LineStrings from OL3 with the framework itself!

Answer 1

OpenLayers does not support this out-of-the box, but it provides the tools to build these "stacked-lines" yourself.

I gave it a quick try, you can find a demo here: http://jsfiddle.net/a06ufx8z/2/

  new ol.style.Style({
    geometry: function(feature) {
        var line = feature.getGeometry();
        var coords = [];
        line.forEachSegment(function(from, to) {
            // for each segment calculate a parallel segment with a
            // distance of 4 pixels
            var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
            var dist = 4 * resolution;
            var newFrom = [
                Math.sin(angle) * dist + from[0],
                -Math.cos(angle) * dist + from[1]
            ];
            var newTo = [
                Math.sin(angle) * dist + to[0],
                -Math.cos(angle) * dist + to[1]
            ];
            coords.push(newFrom);
            coords.push(newTo);
        });

        return new ol.geom.LineString(coords);
    },
    stroke: ...
})

The idea is to calculate a parallel line for each segment of your line-string with a fixed distance. I "borrowed" the math to calculate the parallel line from this answer.

This demo has a small problem which you can see at point 2 and 3. You can avoid this by calculating the intersection between two consecutive segments.

Answer 2

Already got it working by myself, a but more complicated than the first answer though:

My server renders a JSON as response. In this response it is included between which two points which lines should be shown (also with color and weight). so i go through each object in this array... the single objects are orderd by "weight" descending, so that the thickest line would be added first to the array, all other lines afterwards. This method will show the thickest line on the "Bottom", the 2nd thickest line over the first etc etc. That's how i made it possible to show several lines between two points (like shown in the example).