DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Iscrtavanje SVG na gMapi (http://www.devprotalk.com/showthread.php?t=11704)

mslavko 16. 10. 2013. 23:10
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
      }
    }
  }
}
Ja sam u mom primeru jednostavno zameio varijablu polygon sa tackama na ruti koje dobijam od googla sa
Kôd:
response.routes[0].overview_path;
pa sam ondak napisao ovako:

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
a ostali deo koda dodao : http://jsbin.com/uTATePe/9/edit

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.

Br@nkoR 17. 10. 2013. 11:06
Citat:
Originalno napisao mslavko (Napišite 111171)
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
a ostali deo koda dodao : http://jsbin.com/uTATePe/9/edit

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.
Kod mene kada pokušam vraća grešku:
Kôd:
Uncaught ReferenceError: draw is not defined
https://developer.mozilla.org/en/doc...function_scope
http://ryanmorr.com/understanding-sc...in-javascript/



Citat:
Originalno napisao mslavko (Napišite 111171)
Ja sam u mom primeru jednostavno zameio varijablu polygon sa tackama na ruti koje dobijam od googla sa
Kôd:
response.routes[0].overview_path;
A šta vraća response.routes[0].overview_path, odnosno koji format, a koji format zahtevju ove funkcije/metode?


Ukoliko sam dobro razumeo ovu biblioteku, ona vraća koordinate poligona, pa zašto ne koristiš:
https://developers.google.com/maps/d...hapes#polygons
?

Imaš i npr. JSTS biblioteku, https://coderwall.com/p/zb_zdw

mslavko 17. 10. 2013. 16:07
re
 
Ovaj kod ovde: https://coderwall.com/p/zb_zdw radi to sto meni treba ali ne bas savrseno tj. ja sam isti takav kod napisao medjutim postoje odredjeni pravci, distance, gde ne radi bas najbolje pa sam resio da integrisem algoritam koji sam nasao jer je on perfektno resenje.

Takodje ovaj kod:
Kôd:
response.routes[0].overview_path;
vraca niz tacaka (lat,lng) sa kojim se konstruise driving direction tj linija izmedju dve tacke

Ovaj algoritam zahteva da se kao ulazni parametar postave ove tacke linija a kao izlazni se dobijaju tacke sa kojima se konstruise poligon.


Sve ovo samo moram da prikazem na mapi pa sam sada uradio ovako:

http://jsbin.com/uTATePe/21 - DEMO
KOD:
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;
  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('map-canvas');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  console.log(JSON.stringify(offsetted_polygon));
  svg = polys2path(offsetted_polygon, scale);

//Sada kada sam dobio tacke za poligon SVG pokusavam da nacrtam na mapi
        crtamPoligon= new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  crtamPoligon.setMap(map);
       
}
// 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
      }
    }
  }
}
U konzoli u mom browseru (chrome) nema nikakvih gresaka, a opet ne radi

A tacke koje dobijam od google directions-a prikaz u konzoli izgleda ovako:
Citat:
console.log(tacke)
[N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N…]
[0 … 99]
0: N
lb: 41.87811000000001
mb: -87.62979000000001
__proto__: N
1: N
2: N
3: N
4: N
5: N
6: N
7: N
8: N
9: N
10: N
11: N
12: N
13: N
14: N
15: N
16: N
17: N
18: N
19: N
20: N
21: N
22: N
23: N
24: N
25: N
26: N
27: N
28: N
29: N
30: N
31: N
32: N
33: N
34: N
35: N
36: N
37: N
38: N
39: N
40: N
41: N
42: N
43: N
44: N
45: N
46: N
47: N
48: N
49: N
50: N
51: N
52: N
53: N
54: N
55: N
56: N
57: N
58: N
59: N
60: N
61: N
62: N
63: N
64: N
65: N
66: N
67: N
68: N
69: N
70: N
71: N
72: N
73: N
74: N
75: N
76: N
77: N
78: N
79: N
80: N
81: N
82: N
83: N
84: N
85: N
86: N
87: N
88: N
89: N
90: N
91: N
92: N
93: N
94: N
95: N
96: N
97: N
98: N
99: N
[100 … 199]
[200 … 208]
length: 209
__proto__: Array[0]

Hvala na savetima

mslavko 18. 10. 2013. 00:35
kod
 
Probao sam i ovako (objasnjenje stoji u kodu):

Kôd:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
      var poligon;
      var tacke;
      var primer;
      var rezultat;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      //tacke = response.routes[0].overview_path;
      //primer = [[{"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}]];
      //ovde transformisem tacke iz directons-a u format citljiv JSclliper biblioteci
      var overviewPath = response.routes[0].overview_path,
    overviewPathGeo = [];
for(var i = 0; i < overviewPath.length; i++) {
    overviewPathGeo.push(
        [overviewPath[i].lng(), overviewPath[i].lat()]
    );
}
      //kreiram varijablu koja ce vratiti tacke za crtanje poligona
      var svg=draw(overviewPathGeo);
      //kod za crtanje poligona
    poligon = new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
      //crtam poligon
  poligon.setMap(map);

       
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
      //funcija sa argumentom u - ustavri su tacke koje daje directions servis
function draw(u) {
  var polygons = u;
  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('map-canvas');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  console.log(JSON.stringify(offsetted_polygon));
 
  svg = polys2path(offsetted_polygon, scale);
        rezultat = polys2path(offsetted_polygon, scale);
  return 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
      }
    }
  }
}

    </script>
CEO KOD I DEMO: http://jsbin.com/uTATePe/32/edit

Br@nkoR 18. 10. 2013. 11:32
Grešku koju sam napisao u prethodnoj poruci javljala se prilikom promene vrednosti prvog select menija, jer se na onchange događaj select elementa poziva funkcija draw, sada je kod izmenjen i javlja se druga greška.

Pitanje u vezi podataka koje prosleđuješ funkcijama sam postavio jer sam video problem, i dalje imaš taj problem, ti pomoću response.routes[0].overview_path dobijaš:
https://developers.google.com/maps/d...irectionsRoute
Citat:
An array of LatLngs representing the entire course of this route. The path is simplified in order to make it suitable in contexts where a small number of vertices is required (such as Static Maps API URLs).
dakle nešto kao:
Kôd:
[
  new google.maps.LatLng(12.34, 56.789),
  new google.maps.LatLng(87.65, 123.45)
]
a potrebno ti je:
Kôd:
[
  [
    {
      X: 12.34
      Y: 56.789
    },
    {
      X: 87.65,
      Y: 123.45
    }
  ]
]
a ti, u tvom kodu, prosleđuješ:
Kôd:
[
  [56.789, 12.34],
  [123.45, 87.65]
]
Zatim sledeći problem:
http://sourceforge.net/p/jsclipper/w...on-coordinates
Citat:
B3. Scale up polygon coordinates
Because Clipper library uses integer coordinates, we have to scale up coordinates to maintain precision. The scale value should be large enough, but for performance reasons not too high. If coordinates have a precision of 2 decimals, the sufficient scale coefficient is 100.
...

Zatim, pogledaj u dokumentaciji za kreiranje poligona, za PolygonOptions objekat paths osobinu:
https://developers.google.com/maps/d...PolygonOptions
Citat:
The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into MVCArrays. Inserting or removing LatLngs from the MVCArray will automatically update the polygon on the map.
A koju vrednost ti prosleđuješ, odnosno šta dobijaš od funkcije polys2path.


Citat:
Originalno napisao mslavko (Napišite 111173)
Ovaj kod ovde: https://coderwall.com/p/zb_zdw radi to sto meni treba ali ne bas savrseno tj. ja sam isti takav kod napisao medjutim postoje odredjeni pravci, distance, gde ne radi bas najbolje
Može li primer, ne koristim, ali me interesuje slučaj gde ne radi, hvala.

mslavko 18. 10. 2013. 12:08
Branko hvala na odgovorima

a ovaj primer koji si ti dao jednostavno ne pravi dobr odstojanje kada se pravac prostire sever-jug, tj. taj prosor suzi a dok je u pravcu istok-zapad sve kako treba sto se i vidi sa slike


A ovde sam ja pokusao da napravim upravo to sto si mi pokazao i imao sam taj isti problem:


KOD:http://jsbin.com/uTATePe/6/edit

Citat:
B3. Scale up polygon coordinates
Because Clipper library uses integer coordinates, we have to scale up coordinates to maintain precision. The scale value should be large enough, but for performance reasons not too high. If coordinates have a precision of 2 decimals, the sufficient scale coefficient is 100.
...
Ovo moze da bude problem koji sam prevideo jer ja moram da koristim koordinate radi tacnosti iscrtavanja poligona uz rutu...

Takodje funcija polys2path bi trebalo da vraca tacke sa kojima moze da se kreira poligon a ulazni parametar su tacke linija tj. driving directions

Sad sam u totalnom zaplecku...

Br@nkoR 18. 10. 2013. 12:37
Citat:
Originalno napisao mslavko (Napišite 111176)
Ovo moze da bude problem koji sam prevideo jer ja moram da koristim koordinate radi tacnosti iscrtavanja poligona uz rutu...
Postavi samo neku veću vrednost za scale promenljivu npr. 10000 100000, radi veće preciznosti, prevideo sam da biblioteka ne radi zaokruživanje vrednosti pa sam mislio da drugačije treba uraditi.

mslavko 18. 10. 2013. 18:44
re
 
Malo sam vec dosadan ali moram ovo da resim na ovaj ili onaj nacin

Pokusao sam da pretvorim tacke koje dobijam od google directionsa u format koji odgovara biblioteci JSclipper pa sam tako napisao:

Kôd:
tacke = response.routes[0].overview_path;
      console.log(tacke);
newTacke = [[tacke.map(function(w) { return {X:w[1], Y:w[0]}; })]];
      console.log(newTacke);
Medjutim sa ovim kodom console.log(newTacke) kaze da su X i Y undefined, pa samim tim ovo moram nekako da sredim...

sa druge strane pokusao sam sa ovim kodom da nacrtam poligon jer sam funkciji draw() kao ulazni parametar dao var primer koji sadrzi cele brojeve
Kôd:
primer = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":70,"Y":99},{"X":11,"Y":14},{"X":18,"Y":25}]];
i dobijam kao rezultat funcije:
Kôd:
console.log(draw(primer));
izlazne tacke koje su ustvari tacke poligona ali nemogu da ga nacrtam na mapi ovim kodom:

Kôd:
  var svg=draw(primer);
      //kod za crtanje poligona
    poligon = new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
      //crtam poligon
  poligon.setMap(map);
Opet je ovde verovatno problem celih brojeva koji nemogu da se prikazu na mapi tj. nisu brojevi u okviru koordinata...
Koliko sam shvatio dobijam koordinate od googla pa ih prilagodjavam biblioteci da moze da se izvrsi pa kad dobijem rezultat opet moram da priagodim google mapi da bi mogao da se iscrta poligon;)

Sa druge strane ovde imam pitanje u vezi requesta, koliko ce isctravanje poligona biti moguce na dnevnoj bazi ... koliki je limit?

Da li mogu sa google map_overlay da jednostavno postavim ovo podrucje kao SVG elemenat na mapi i time izbegnem koriscenje crtanje poligona uz pomoc google api-ja vec da koristim map_overlay?

Br@nkoR 18. 10. 2013. 22:35
Nešto kao:
Kôd:
var tacke = response.routes[0].overview_path,
    newTacke = [[]];
for(var i = 0, len = overviewPath.length; i < len; i++) {
    newTacke[0].push({
      X: tacke[i].lat(),
      Y: tacke[i].lng()
    });
}

/* ili */
var tacke = response.routes[0].overview_path,
    newTacke = [tacke.map(function(w) {
    return {
        X: w.lat(),
        Y: w.lng()
    };
})];
Citat:
Originalno napisao mslavko (Napišite 111178)
Koliko sam shvatio dobijam koordinate od googla pa ih prilagodjavam biblioteci da moze da se izvrsi pa kad dobijem rezultat opet moram da priagodim google mapi da bi mogao da se iscrta poligon;)
Da, napisah u prethodnoj poruci, potrebno je izmeniti polys2path funkciju jer trenutno radi:
Citat:
// converts polygons to SVG path string
Trebalo bi da rezultate koje dobiješ konvertuješ u npr:
Kôd:
[
  new google.maps.LatLng(34.21, 98.7),
  new google.maps.LatLng(7.65, 23.45)
]
dakle vratiš u format sa početka.

mslavko 19. 10. 2013. 03:13
re
 
Ali @Branko koliko sam ja citao upravo ova funckcija vraca tacke sa kojima moze da se konstuise bilo SVG bilo Polygon pomocu google mapa:

Kôd:
// 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;
}
Sta bi ovde trebalo izmenjati?

Osim toga malopre sam probao da pozovem funckciju draw(primer) i time sam dobio kao rezultat tacke sa kojima mogu konstruisati poligon...

Kakva je razlika izmedju konstuisanja SVG i google map poligona?

mslavko 19. 10. 2013. 12:17
kdo
 
Takodje, uradio sam i ovo da vidim kako funcionise...
Kôd:
  rezultat = offsetted_polygon;
console.log(rezultat);
i dobio ovo:

Kôd:
[Array[341]]
0: Array[341]
[0 … 99]
0: ClipperLib.IntPoint
X: 4180.769
Y: -6264.402000000002
__proto__: Object
1: ClipperLib.IntPoint
X: 4162
Y: -6265
__proto__: Object

Znaci li ovo upravo to da ova biblioteka pravi offseted polygon koji sadrzi tacke poligona i da mi funkcija polys2path uopste nije potrebna?


Takodje da li bi bilo dobro resenje da se kao na pocetku napravi SVG elemenat a da se ondak jednostavno postavi izmedju tacaka A i B sa google map_overlay i dobilo bi se to isto bez kreiranja poligona kao sto sam i pokusao...

Br@nkoR 19. 10. 2013. 13:23
Citat:
Originalno napisao mslavko (Napišite 111180)
Ali @Branko koliko sam ja citao upravo ova funckcija vraca tacke sa kojima moze da se konstuise bilo SVG bilo Polygon pomocu google mapa:

Kôd:
// 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;
}
Sta bi ovde trebalo izmenjati?

Osim toga malopre sam probao da pozovem funckciju draw(primer) i time sam dobio kao rezultat tacke sa kojima mogu konstruisati poligon...

Kakva je razlika izmedju konstuisanja SVG i google map poligona?
U jednoj od prethodnih poruka citirao sam tekst iz dokumentacije šta je potrebno za crtanje poligona na mapi (paths osobina PolygonOptions objekta), a šta vraća polys2path funkcija.


Citat:
Originalno napisao mslavko (Napišite 111181)
Takodje, uradio sam i ovo da vidim kako funcionise...
Kôd:
  rezultat = offsetted_polygon;
console.log(rezultat);
i dobio ovo:

Kôd:
[Array[341]]
0: Array[341]
[0 … 99]
0: ClipperLib.IntPoint
X: 4180.769
Y: -6264.402000000002
__proto__: Object
1: ClipperLib.IntPoint
X: 4162
Y: -6265
__proto__: Object

Znaci li ovo upravo to da ova biblioteka pravi offseted polygon koji sadrzi tacke poligona
Da, koliko sam pročitao na brzinu iz dokumentacije, to radi.


Citat:
Originalno napisao mslavko (Napišite 111181)
i da mi funkcija polys2path uopste nije potrebna?
Zavisi šta ćeš dalje raditi sa podacima koje dobiješ iz biblioteke. Pogledaj podatke koje dobijaš iz iste i da li te podatke jednostavno možeš proslediti funkcijama za crtanje gmaps Polygona ili SVG elementa. Zato u ovom trenutnom obliku funkcija postoji da bi se rezultati formatirali/konvertovali u oblik potreban za crtanje SVG elementa. Zatim ti isto imaš i funkcije reverse_copy i scaleup da bi prilagodio podatke biblioteci.


Citat:
Originalno napisao mslavko (Napišite 111181)
Takodje da li bi bilo dobro resenje da se kao na pocetku napravi SVG elemenat a da se ondak jednostavno postavi izmedju tacaka A i B sa google map_overlay i dobilo bi se to isto bez kreiranja poligona kao sto sam i pokusao...
Nikada nisam isprobavao da crtam SVG elemente na mapi, pogledaj
https://developers.google.com/maps/d...customoverlays
Mislim da nećeš moći ovako, moraćeš da konvertuješ LatLng podatke u pixel-e. Pokušaj.

Npr. nešto kako bi izgledala poly2path funkcija za konvertovanje podataka za crtanje google maps polygon-a:
Kôd:
function polys2path (poly, scale) {
  var path = [];
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      path.push(new google.maps.LatLng((poly[i][j].X / scale), (poly[i][j].Y / scale)));
    }
  }
  return path;
}

mslavko 19. 10. 2013. 13:32
img
 
Uspeo sam da dobijem nesto ali daleko od onog sto mi treba:



DEMO:http://jsbin.com/uTATePe/50
UPDATE:

BRANKO HVALA NAJVISE, Konacno radi i sam neznam kako :) mislio sam da jos treba da podesim da se konvertuje X i Y u lat i lng pa da se proseldi funciji za cratnje poligona ali radi i bez toga:

Br@nkoR 19. 10. 2013. 14:24
Citat:
Originalno napisao mslavko (Napišite 111183)
mislio sam da jos treba da podesim da se konvertuje X i Y u lat i lng pa da se proseldi funciji za cratnje poligona ali radi i bez toga:
To radi sada radi ova izmenjena polys2path funkcija koju sam postavio. Drago mi je da radi.

mslavko 20. 10. 2013. 03:33
da da da, hvala jos jedom na pomoci


Vreme je GMT +2. Trenutno vreme je 16:11.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.