Length buffer around polyline

问题:

I'm not very good at mathematics, so I got a problem. I have a route from one, to another distination. Some time I was trying to apply a colored plot aroud the route in fixed length. But I cant get a nice rounded corners and my lack of math is making me a lot of truble.

Now I got this

And the code

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

I just want to ask for some information directions OR maybe some of you already have made this functionality and have some functions

Working demo here. Somehow i need to get same result of drawing that.

SOLUTIONS

• Buffered polyline using JSTS lib.
• ArcGIS server solution

回答1:

I found this stack in SO Path stroke algorithm (convert to triangles/quads) or other suggestions where there is a similar question, just for C++.

The answer is a algorithm in this PDF ( http://dev.gentoo.org/~dberkholz/tutorials/cairo/siggraph.pdf ) on page 3 (the CONVOLVE algorithm).

If you perhaps could make a working example in JSFiddle, we could be able to programm a solution in there.

-- edit

After some time of analysing the script in the link you provided for the life demo, I found, that the polyline is not calculated in javascript, but is calculated on the server and returned with a AJAX call to some PERL programme.

回答2:

Can't you just draw another polyline on the same path as the first one, with a larger stroke? It doesn't give you exactly the same results, i.e. a polygon with a border color different from its fill color, but the overall effect is very similar.

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

Update: You're adding and subtracting 'z' from both the latitude and longitude of the points along your path. Given that latitude runs from +90 to -90, but longitude runs from +180 to -180, I think you maybe need different values for each.

文章来源: Length buffer around polyline