折线周围的长度缓冲区

时间:2011-10-07 09:53:52

标签: javascript jquery google-maps maps

我不擅长数学,所以我遇到了问题。我有一条路线从一个到另一个分散。有一段时间我试图在固定长度的路线上应用彩色地块。但我不能得到一个圆润的角落,而我缺乏数学让我变得非常残缺。

现在我明白了 enter image description here

代码

        var r = [];
        var bla = result.routes[0].overview_path;
        for(i in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(x in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

        var kelias = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#00000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        kelias.setMap(MAP);

        fonas = new google.maps.Polygon({
            paths: r,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });

        fonas.setMap(MAP);

我只想询问一些信息指示或者你们中的一些人已经有了这个功能并且有一些功能

工作demo here。不知怎的,我需要得到相同的结果。

2 个答案:

答案 0 :(得分:4)

我在SO Path stroke algorithm (convert to triangles/quads) or other suggestions中找到了这个堆栈,其中存在类似的问题,仅适用于C ++。

答案是第3页this PDF中的算法(CONVOLVE算法)。

如果您可以在JSFiddle中制作一个有效的示例,我们就可以在那里编写解决方案。

- 编辑

在分析了您为life demo提供的链接中的脚本一段时间之后,我发现,折线不是用javascript计算的,而是在服务器上计算并通过AJAX调用返回给某些PERL程序

答案 1 :(得分:3)

难道你不能在与第一条相同的路径上绘制另一条折线,行程更大吗?它没有给出完全相同的结果,即边框颜色与填充颜色不同的多边形,但整体效果非常相似。

// first, black line
var kelias = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#000000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

// second, translucent red line
var kelias2 = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 40,
            map: MAP
        });

更新:您要沿着路径上的点的纬度和经度添加和减去“z”。鉴于纬度从+90到-90,但经度从+180到-180,我想你可能需要不同的值。