Create complex polygon with javascript

问题

I want to create a polygon by route direction like here: http://i.imgur.com/olGmuN6.png so I write this:

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

but in some cases is good in some cases not, so my code produce this:

   BAD case:

GOOD:

So how I can solve this problem to get nice polygon by route direction ??? Does someody have idea?

How I can implement this into my code: http://i.imm.io/1gMu5.png

Is there some other way than this to create what I need...

回答1:

If I understand right, you want to bolden a polyline (or make an offset polygon around polyline).

For offsetting you can use Javascript Clipper Library. If you have the following polyline (route):

you can make an offset polygon below it using Clipper:

Here is the essential part of the code (in JSBIN):

var paths = [[{"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}]]; 

var scale = 100;
ClipperLib.JS.ScaleUpPaths(paths, scale);

var solution = new ClipperLib.Paths();
var co = new ClipperLib.ClipperOffset();
co.AddPaths(paths, ClipperLib.JoinType.jtRound, ClipperLib.EndType.etOpenRound);
co.Execute(solution, 25 * scale);

EDIT: This is a general solution to problem named "Offsetting polyline". I don't know the secrets of Google Maps or any other map software, so the exact solution to your problem is in your hands.

来源：https://stackoverflow.com/questions/19080976/create-complex-polygon-with-javascript

标签

javascript

jquery

google-maps

polygon