折线周围的长度缓冲区

Question

我不太擅长数学，所以遇到了问题。我有一个从一个地方到另一个目的地的路线。有时我尝试在固定长度内应用彩色绘图，但我无法得到漂亮的圆角，我的数学知识不足给我带来了很多麻烦。

现在我有这个： 还有代码：

        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);

我只想要询问一些信息或者方向，或许你们中的一些人已经制作了这个功能并且有一些函数。

在这里工作演示。不知何故，我需要获得相同的绘图结果。

解决方案：

• 使用JSTS库缓冲折线。
• ArcGIS服务器解决方案

- Ernestas Stankevičius

---

关于您发布的链接（工作演示）的一些说明。他们在服务器上计算折线，然后用ajax获取它们并进行绘制。 - yunzen

Answer 1

我在SO中发现了一个类似的问题，涉及C++，链接如下：Path stroke algorithm (convert to triangles/quads) or other suggestions。

答案是在这个PDF的第3页中（CONVOLVE算法）。

如果您能在JSFiddle中提供一个可行的示例，我们可以在那里编写解决方案。

-- 编辑

在分析您提供的实时演示链接中的脚本一段时间后，我发现折线不是在JavaScript中计算的，而是在服务器上计算的，并通过AJAX调用返回到某个PERL程序。

- yunzen

Answer 2

你可以在同一路径上再画一条具有更大描边的折线吗？这样做不会得到完全相同的结果，即描边颜色与填充颜色不同的多边形，但整体效果非常相似。

// 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，我认为您可能需要不同的值。

- duncan

---

实际上不是这样的。因为我将使用相同的公式来获取该图中的记录。我正在寻找更优化的方法。 - Ernestas Stankevičius

Z只是可视化，不是实际值。 - Ernestas Stankevičius

这似乎是一种高效的解决方案，而无需计算轮廓。如果我想要的颜色允许，我会选择这个。 - yunzen

但线条权重有限制。 - Ernestas Stankevičius

strokeWeight的限制为33。 - user3631341