javascript - 用 javascript 创建复杂的多边形

Question

我想通过路由方向创建一个多边形，如下所示：http: //i.imgur.com/olGmuN6.png所以我写了这个：

directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
        var r = [];
        var z = 0.5;
        var bla = result.routes[0].overview_path;
        for(var i=0 in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(var x=0 in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

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

        prva.setMap(map);

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

        druga.setMap(map);

    } else {
      alert("Directions query failed: " + status);
    }
  });

但在某些情况下是好的，在某些情况下不是，所以我的代码产生了这个：

   BAD case:

好的：

那么我如何解决这个问题以通过路线方向获得漂亮的多边形？？？有人有想法吗？

我如何在我的代码中实现这一点：http: //i.imm.io/1gMu5.png

还有其他方法可以创建我需要的...

Answer 1

如果我理解正确，您想加粗一条折线（或在折线周围制作一个偏移多边形）。

对于偏移，您可以使用Javascript Clipper Library。如果您有以下折线（路线）：

您可以使用 Clipper 在其下方制作一个偏移多边形：

这是代码的基本部分（在JSBIN中）：

var 路径 = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X ":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y": 165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X": 292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245} ,{"X":417,"Y":248}]];

变量比例= 100；
ClipperLib.JS.ScaleUpPaths（路径，比例）；

var solution = new ClipperLib.Paths();
var co = new ClipperLib.ClipperOffset();
co.AddPaths（路径，ClipperLib.JoinType.jtRound，ClipperLib.EndType.etOpenRound）；
co.Execute(solution, 25 * scale);

编辑：这是一个名为“偏移折线”的问题的通用解决方案。我不知道谷歌地图或任何其他地图软件的秘密，所以你的问题的确切解决方案掌握在你手中。