地图上两点之间的堆叠线（或多线？）

Question

希望我来对地方了。

我最近对我公司的软件如何改进变得更好有了一些想法，并在网站上注意到一个基于地图的软件，它在地图上的点之间有某种 "stacked lines"。我知道可以在两点之间创建一条线，但恕我直言，"stacked lines" 也是地图的不错选择。是否可以使用 openlayers 在两点之间创建这样的 "multi line" 示例？

这里有两个例子可以说明我的意思：

我的问题不是要获得 100% 的答案！所以我在这里看不到 "offtopic" 的原因...如果有人在或之前尝试过这样的事情，是否有可能创建这样的 LineStrings 更像是一个问题来自 OL3 和框架本身！

Answer 1

OpenLayers 不支持这种开箱即用的功能，但它提供了自己构建这些 "stacked-lines" 的工具。

我试了一下，你可以在这里找到演示：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: ...
})

我们的想法是为您的线串的每个线段计算一条固定距离的平行线。我 "borrowed" 从这个 answer.

计算平行线的数学

这个演示有一个小问题，您可以在第 2 点和第 3 点看到。您可以通过计算两个连续线段之间的交集来避免此问题。

Answer 2

我自己已经搞定了，但比第一个答案更复杂：

我的服务器呈现 JSON 作为响应。在这个响应中，它包括在哪两点之间应该显示哪些线（也有颜色和重量）。所以我遍历这个数组中的每个对象...单个对象按 "weight" 降序排列，这样最粗的行将首先添加到数组中，然后是所有其他行。此方法将在 "Bottom" 上显示最粗的线，在第一条线上显示第二条最粗的线，等等。这就是我如何能够在两点之间显示多条线（如示例所示）。

地图上两点之间的堆叠线（或多线？）

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

openlayers-3