用javascript创建复杂的多边形 [英] Create complex polygon with javascript
问题描述
我想按照这里的路线方向创建多边形:
有没有其他办法可以创建我需要的东西。如果我理解正确的话,你想增加一条折线(或者在折线周围做一个偏移多边形)。
p>为了抵消,您可以使用中):
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(路径,ClipperLib.JoinType.jtRound,ClipperLib.EndType.etOpenRound);
co.Execute(解决方案,25 * scale);
编辑:这是一个名为偏移折线问题的通用解决方案。我不知道谷歌地图或任何其他地图软件的秘密,所以你的问题的确切解决方案在你手中。
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...
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.
这篇关于用javascript创建复杂的多边形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!