Discussion :

[Mozofeuk]

Bonjour à tous,

Je développe une application en Silverlight utilisant une Google Map. J’exécute mes scriptes javascript une commande silverlight afin de dessiner un circuit. Mon circuit est en fait une succession de plusieurs point que je relies ensuite. Tout fonctionne très bien mais le problème est que pendant que le circuit se dessine, mon UI est bloqué (les animations se figent par exemple).

Je me dis donc qu'il faudrais réduire le temps de dessin sur ma carte afin de figer l'UI le moins longtemps possible.

Voici comment je dessine mes circuit.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
foreach (Point _point in ListPoints)
{
     CallJavascriptFunction( "AddWaypointToList", PT_LAT.ToString().Replace(",", "."),PT_LNG.ToString().Replace(",", ".") );
}
CallJavascriptFunction( "DrawWaypointPolyline");

Le CallJavascriptFunction me permet d'executer mes script javascript

voici maintenant le code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
//Represent a list of WayPoint
var WaypointCoordinates = [];
var WptCount = 0;
 
//Add a coordiante to the list of Waypoint and draw a little circle at each point
function AddWaypointToList(_WayPointNumber, _lat, _lng) {
    var _LatLng = new google.maps.LatLng(_lat, _lng);
 
    var _myCircle = {
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillOpacity: 0.35,
        map: map,
        center: _LatLng,
        zIndex: 1,
        radius: 2.5
    };
 
    var _circle = new google.maps.Circle(_myCircle);
 
    WaypointCoordinates[WptCount] = new google.maps.LatLng(_lat, _lng);
    WptCount++;
}
 
//Display all the waypoint on the Map
function DrawWaypointPolyline(_color) {
    var WayPointPath = new google.maps.Polyline({
        path: WaypointCoordinates,
        strokeColor: _color,
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    WayPointPath.setMap(map);
    WptCount = 0;
    WaypointCoordinates = [];
}

Je précise que mes point de passage sont des cercle car j'ai des fois besoin de pouvoir les sélectionner.
Y'aurait-il un moyen d'optimiser cela ? Car cela prend bien une dizaine de secondes à chaque fois ?

Merci d'avance, Cordialement MoZo

[NoSmoking]

Bonsoir,
si l'on considère ta fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function AddWaypointToList(_WayPointNumber, _lat, _lng) {
    var _LatLng = new google.maps.LatLng(_lat, _lng);
     var _myCircle = {
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillOpacity: 0.35,
        map: map,
        center: _LatLng,
        zIndex: 1,
        radius: 2.5
    };
    var _circle = new google.maps.Circle(_myCircle); 
    WaypointCoordinates[WptCount] = new google.maps.LatLng(_lat, _lng);
    WptCount++;
}

il faut, comme elle est appelé pour tous les points, mettre en "cache" le maximum de chose, à commencer par les options du cercle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var _myCircle = { // sortir de la fonction
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillOpacity: 0.35,
    map: map,
    center: _LatLng,
    zIndex: 1,
    radius: 2.5
};
 
function AddWaypointToList(_WayPointNumber, _lat, _lng) {
    var _LatLng = new google.maps.LatLng(_lat, _lng);
    var _circle = new google.maps.Circle(_myCircle);
    Microordinateurs[WptCount] = new google.maps.LatLng(_lat, _lng);
    WptCount++;
}

de plus pourquoi refaire un new google.maps.LatLng alors que _LatLng existe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function AddWaypointToList(_WayPointNumber, _lat, _lng) {
    var _LatLng = new google.maps.LatLng(_lat, _lng);
    var _circle = new google.maps.Circle(_myCircle);
    Microordinateurs[WptCount] = _LatLng;
    WptCount++;
}

c'est déjà tout cela de gagné...

Maintenant pourquoi faire x fois appel à la fonction, AddWaypointToList, et de ne pas faire la boucle dans la fonction, ici aussi il y a à gratter pas mal.

Dernier point, depuis la V3.7 il est possible de rendre "editable" les Polygons juste en mettant l'option editable: true, tu auras des petits carrés pour déplacer les points.

[Mozofeuk]

Merci NoSmoking,

Mettre en cache le cercle ne change pas grand chose mais c'est au moins plus propre

Ensuite pour tout faire dans la même fonction je pense que cela serait bien mais il me faut un moyen de transmettre la liste des Waypoints à javascript en un seul coup, et là je seche un peu...


Cdt MoZo

[NoSmoking]

OTAN(*) pour moi!!
dans la précipitation du copier/coller il fallait bien sûr lire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var _myCircle = { // sortir de la fonction
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillOpacity: 0.35,
    map: map,
//    center: _LatLng,  /* pas ICI */
    zIndex: 1,
    radius: 2.5
};
 
function AddWaypointToList(_WayPointNumber, _lat, _lng) {
    var _LatLng = new google.maps.LatLng(_lat, _lng);
    var _circle = new google.maps.Circle(_myCircle);
    _circle.setCenter( _LatLng);
    Microordinateurs[WptCount] = _LatLng;
    WptCount++;
}

dans le même esprit pas sûr qu'il ne soit pas plus rapide de réaffecter la map dans une boucle une fois tous les cercles crées, à tester!

Toujours dans le même esprit il vaut peut être mettre en cache toutes les valeurs pour pouvoir réaliser l'initialisation dans une boucle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var data = [];
foreach (Point _point in ListPoints){
     data.push( les_valeurs);
}

(*) Oh t'es abruti NoSmoking

[Mozofeuk]

OTAN(*) pour moi!!

XD


Bon j'ai fait les changements, et même en affectant la map dans la boucle et bien l'optimisation n'est pas vraiment visible (ou alors vraiment pas grand chose)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
//Represent a list of WayPoint
var WaypointCoordinates = [];
var WptCount = 0;
 
var MyCircle = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    zIndex: 1,
    radius: 2.5
};
 
//Add a coordiante to the list of Waypoint and draw a little circle at each point
 
function AddWaypointToList(_page, _WayPointNumber, _lat, _lng) {
    _LatLngCircle = new google.maps.LatLng(_lat, _lng);
 
    MyCircle.map = map;
    MyCircle.center = _LatLngCircle;
 
    var _circle = new google.maps.Circle(MyCircle);
 
 WaypointCoordinates[WptCount] = _LatLngCircle;
    WptCount++;
}
 
//Display all the waypoint on the Map
function DrawWaypointPolyline() {
    var WayPointPath = new google.maps.Polyline({
        path: WaypointCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    WayPointPath.setMap(map);
    WptCount = 0;
    WaypointCoordinates = [];
}

[NoSmoking]

les boucles devraient se trouver à l'intérieur de la fonction, je voyais plutôt cela dans ce style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function createCircle( tabLatLng){
  var oCircle, i, nb = tabLatLng.length;
 
  for ( i=0; i < nb; i++){
    MyCircle.map = map;
    MyCircle.center = _LatLngCircle;
    oCircle = new google.maps.Circle( MyCircle);
  }
}

ou tabLatLng est le tableau construit en amont, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function AddWaypointToList( _lat, _lng){
  WaypointCoordinates[WptCount++] = new google.maps.LatLng(_lat, _lng);
}

tu peux toujours mettre des compteurs pour voir ce qui prend le plus de temps.

[Mozofeuk]

Un peu tard mais grâce à tous tes conseils j'ai pu augmenter légèrement les perf, avec un timer j'au pu voir que je gagnais 1/2 seconde en moyenne. C'est déjà ça

Merci à toi !