(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
16. 10. 2013. | #1 |
profesionalac
Professional
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
|
Iscrtavanje SVG na gMapi
Unapred se izvinjavam sto sam ovo pitanje vec postavio samo sa drugim kodom, ali zelim da bolje objasnim situaciju i postavim bolje pitanje
Pronasao kod-algoritam koji moze da iscrta polygon oko linije. U mom slucaju linija mora da bude google driving direction. Kod koji pravi offset poligon na osnovu linije: http://jsbin.com/oVIcowo/1/edit Ovde kao sto vidite pravi se poligon na osnovu niza tacaka: Kôd: Kôd:
function draw() { var polygons = [[{"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; reverse_copy(polygons); polygons = scaleup(polygons, scale); var cpr = new ClipperLib.Clipper(); var delta = 25; var joinType = ClipperLib.JoinType.jtRound; var miterLimit = 2; var AutoFix = true; var svg, offsetted_polygon, cont = document.getElementById('svgcontainer'); offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix); //console.log(JSON.stringify(offsetted_polygon)); // Draw red offset polygon svg = '<svg style="margin-top:10px;margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="540" height="340">'; svg += '<path stroke="red" fill="red" stroke-width="2" stroke-opacity="0.6" fill-opacity="0.2" d="' + polys2path(offsetted_polygon, scale) + '"/>'; //Draw blue polyline svg += '<path stroke="blue" stroke-width="3" d="' + polys2path(polygons, scale) + '"/>'; svg += '</svg>'; cont.innerHTML += svg; } // helper function to scale up polygon coordinates function scaleup(poly, scale) { var i, j; if (!scale) scale = 1; for(i = 0; i < poly.length; i++) { for(j = 0; j < poly[i].length; j++) { poly[i][j].X *= scale; poly[i][j].Y *= scale; } } return poly; } // converts polygons to SVG path string function polys2path (poly, scale) { var path = "", i, j; if (!scale) scale = 1; for(i = 0; i < poly.length; i++) { for(j = 0; j < poly[i].length; j++){ if (!j) path += "M"; else path += "L"; path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale); } path += "Z"; } return path; } function reverse_copy(poly) { // Make reverse copy of polygons = convert polyline to a 'flat' polygon ... var k, klen = poly.length, len, j; for (k = 0; k < klen; k++) { len = poly[k].length; poly[k].length = len * 2 - 2; for (j = 1; j <= len - 2; j++) { poly[k][len - 1 + j] = { X: poly[k][len - 1 - j].X, Y: poly[k][len - 1 - j].Y } } } } Kôd:
response.routes[0].overview_path; Kôd: Kôd:
directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); function draw() { var polygons = response.routes[0].overview_path; //OVDE SAM JEDNOSTAVNO DODAO OSTATAK KODA I PODESIO DA SE ISCRTAVA SVG NA ID MAP-CANVAS Medjutim opet nemogu da iscrtam poligon oko rute iako u gore pomenutom primeru sve radi savrseno. Kako da primenim ovo na google mape? Kako da iscrtam polygon oko rute na ID MAP-CANVAS? U konzoli nema gresaka. |
|
|