地图上两点之间的堆积线(或多线?)

时间:2015-11-09 13:36:26

标签: openlayers-3

我希望我关心的地方是对的。

我最近对自己的公司软件如何发展变得更好并且在网站上注意到基于地图的软件有了一些想法,这些软件具有某种"堆叠线"在地图上的点之间。我知道可以在两点之间创建一条线,但是恕我直言的是#34;堆叠线"对于地图来说也是一个不错的选择。是否有可能创造出这样一条多线" openlayers两点之间的例子?

以下是我的意思的两个例子:

Picture for Example one

Picture for Example two

我的问题不是要获得100%的回答!所以我没有看到" offtopic"在这里的原因...如果有人试图在之前尝试获得类似的东西,如果有可能从框架本身的OL3创建这样的LineStrings,那就更有问题了!

2 个答案:

答案 0 :(得分:5)

OpenLayers不支持这种开箱即用的功能,但它提供了构建这些"堆叠线的工具。自己。

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

我们的想法是为固定距离的线串的每个段计算一条平行线。我借了"从这个answer计算平行线的数学。

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

答案 1 :(得分:2)

已经让它自己工作,但比第一个答案更复杂:

我的服务器将JSON呈现为响应。在这个响应中,它包括在哪两个点之间应该显示哪一行(也有颜色和重量)。所以我浏览了这个数组中的每个对象...单个对象是由#34; weight"降序,这样最粗的线将首先添加到阵列中,之后的所有其他线。这个方法将显示"底部"上的最粗线,第一个等上面的第二个最粗线等。这样我怎样才能在两点之间显示几条线(如图所示)例子)。