Discussion :

[-kimi-]

Hello !

J'ai un fichier kml qui contient des polygones à afficher sur une carte google maps, et j'aimerai pouvoir ajouter un slider permettant de régler l'opacité des polygones.

En faisant quelques recherches j'ai cru comprendre qu'il n'est pas possible de modifier dynamiquement la transparence du kml via les outils fournis par Google, mais je n'ai pas trouvé de solution à mon problème.
Est il possible d'imaginer transformer le kml en image (.png ?) pour ensuite pouvoir modifier sa propriété css opacity ?

Merci d'avance.

[NoSmoking]

Bonsoir,
si à partir des points kml tu réalises des polygones, au sens googlegoogle.maps.Polygon, tu peux jouer sur l'option strokeOpacity.

[-kimi-]

Non je ne crée pas de polygones au sens "google", ils sont définis dans le kml.

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
<Placemark>
         <name><![CDATA[COMMERCIALISE]]></name>
         <Snippet maxLines="2"></Snippet>
         <description><![CDATA[]]></description>
         <styleUrl>#COMMERCIALISE</styleUrl>
         <Polygon>
           <extrude>0</extrude>
           <altitudeMode>clampedToGround</altitudeMode>
           <outerBoundaryIs>
           <LinearRing>
             <coordinates>
               3.4373377080563,46.091079560964,0
               3.4378974772501,46.092169923969,0
               3.4371186217146,46.092340392815,0
               3.4373116695894,46.092730244007,0
               3.4373797525577,46.092873902942,0
               3.4374628359702,46.093026693521,0
               3.4377304384477,46.093586942573,0
               3.4374341311959,46.093735183763,0
               3.43710386712,46.093079673229,0
               3.4367561378268,46.093175839032,0
               3.4364114244255,46.092537992179,0
               3.4360354767031,46.091820040221,0
               3.4354360351408,46.091923806031,0
               3.4350653256973,46.091170750365,0
               3.4350680398346,46.091158353489,0
               3.4356719069733,46.091127738531,0
               3.4360728790764,46.091101157152,0
               3.4373377080563,46.091079560964,0
             </coordinates>
           </LinearRing>
           </outerBoundaryIs>
         </Polygon>
       </Placemark>
       <Placemark>

Et ensuite tout ce que je fais c'est

Code :

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

1
2
3
 
var kml = new google.maps.KmlLayer('test.kml');
kml.setMap(map);

Mais s'il y a une autre méthode, je suis preneur

[NoSmoking]

récupérer le points, via une lecture standard d'un fichier XML, et créer ton objet polygone.

[-kimi-]

Merci effectivement j'ai fait comme ça. Je mets le code si ça peut servir à quelqu'un. J'ai utilisé JQuery pour parser le xml et le slider.

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
43
44
45
 
$.ajax({
		type: "GET",
		url: "zones.xml",
		dataType: "xml",
		complete : function(data, status) {
 
			var xmlDoc = data.responseXML;
 
			$(xmlDoc).find("Placemark").each(function()
			{
				coordinates = $(this).find('coordinates').text();
				coords = coordinates.split(',0');
				var coordsArray = []; // tableau des coordonées
 
				for (j=0;j<coords.length-1;j++)
				{
					coord = coords[j].split(',');
					y = coord[0].split(',');
					x = coord[1].split(',');
					point = new google.maps.LatLng(x,y);
					coordsArray.push(point);
				} 
 
				zone = new google.maps.Polygon({
					paths: coordsArray,
					strokeColor: "#000000",
					strokeOpacity: 1,
					strokeWeight: 0.5,
					fillColor: "#FF0000",
					fillOpacity: 0.7
				  });
 
				gzones.push(zone);
				zone.setMap(map);
			});
		}});
 
               //Creation d'un slider jquery pour regler l'opacité
		$("#slider").slider({min:0,max:100,value:70, change:function(event,ui){
			opacity=$("#slider").slider('value')/100;
			for (var i=0; i<gzones.length; i++) {
				gzones[i].setOptions({fillOpacity: opacity,strokeOpacity:opacity});
			}
		}});

Maintenant le dernier soucis est que l'affichage de la carte est très lent sur IE, alors que c'est quasi immédiat sous FF ou Chrome. Il a du mal avec le "parsage" du xml on dirait.

A noter aussi que j'ai du modifier l'extension du fichier zones.kml en zones.xml, sinon IE ne voulait pas en entendre parler alors qu'encore une fois ça ne posait pas de soucis à FF ou Chrome.