javascript google maps polylines problem

Jeg tror ikke at du skal forvente en ordentlig performance ved brug af så mange polylines - de laver allesammen DOM elementer, som pr. definition er langsomme

Du bør nok give Canvas en chance til, da den ikke opretter elementer, men bare farver pixels og derved ikke behøves at gemme data omkring et DOM element.

Hvordan opretter du de 5000 polylines?

Du skal benytte dig af en projektionsalgorime, der findes et væld - Google benytter sig af den såkaldte Mercator projection.

Fandt et project (specifikt om Google Maps endda), der viser hvordan Mercator Projections algoritmen kan implementeres:
http://www.codeproject.com/Articles/14793/How-Google-Map-Works

Fra Udvikler-Mail:

Hej

Jeg skrive lige til dig her da jeg ikke kan oprette nye svar i min tråd. Håber det er iorden.

Nu fik jeg lavet en projektion og tegnet på canvas, men jeg synes bestemt ikke det kører bedre end mit forsøg med google maps.

tegner dem således:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 0.05;
ctx.moveTo(coords[0],coords[1]);
ctx.lineTo(coords[2],coords[3]);
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.stroke();

Nogle råd eller alternativer?

Endnu en gang tak for hjælpen.

Ah, ja, det er lidt kikset

Det har formentlig noget at gøre, men at du prøver at oprette og tegne de 5000 linjer "synkront" altså lige efter hinanden. Dette medfører at browseren benytter al sin regnekraft på at evaluere din kode, og ikke har noget tilovers til at opdatere UI (bruger interfacet).

Du er nød til at "offloade" nogle af alle dine opgaver. Prøv at benytte en rekursiv der kalder sig selv, vha. "setTimeout(func, timeout)". Så du kun tegner et par eller bare een linje af gangen, og derefter "venter" 10-16 ms med at tegne den næste serie af linjer.

En anden ting er at du ikke behøver at "hente" tegne contextet fra <canvas> hver gang du tegner en linje, bare gør det een gang i starten af din kode.

Pseudo-kode:

 function drawLine(coords) {
   ctx.moveTo(coords[0], coords[1]);
   ctx.lineTo(coords[2], coords[3]);
   ctx.stroke();
 
   setTimeout(drawLine, 16, getNextCoords());
 }

På denne måde bliver der tegnet 1 linje hver 16. sekund - dette ville dog resultere i at det ville tage dig 80 sekunder at tegne 5000 linjer. Hvis du derimod tegner måske 10 linjer af gangen, og derefter laver et "timeout" vil du formentlig opnå en bedre performance (i teorien 8 sekunder. (5000*16)/10)

Held og lykke, og prøv at skrive videre i tråden - jeg opretter en kopi af dette svar på tråden

Ja det tænkte jeg godt Jeg startede også ud med at tegne på canvas, men jeg kunne ikke finde ud af at projektere koordinaterne så de passede med canvas.

polylines laves ud fra en txt fil der indlæses til et todimensionelt array og så løber en for loop igennem og sætter dem til map.

 for(i = 1; i<5000; i++){
         var Path = new google.maps.Polyline({
       
             path: [new google.maps.LatLng(line[i][0],line[i][1]),
             new google.maps.LatLng(line[i][2],line[i][3])],
             strokeColor: "#FF0000",
             strokeOpacity: 0.3,
             strokeWeight: 0.3,
             strokeShadow: 1
           });
   
           Path.setMap(map);
     }

Det er nok ikke den smarteste måde du må meget gerne komme med alternativ eller en guide til at projektere koordinater til canvas.

Takker endnu en gang.

Det har jeg prøvet at kigge på men uden held.

Den du linker til gør brug af zoom - men i forhold til hvad?


EDIT:
Fandt noget inspiration på denne side http://indiemaps.com/blog/2010/06/interactive-mapping-with-html5-javascript-and-canvas/
Jeg fik rodet lidt med det javascript library proj4js som de omtaler, men det fungere sku ikke

Kan i evt. hjælpe med nogle alternativer?