Transparence et épaisseur des traits ?

**Zebulon777** · 26/02/2013, 10h42

Bonjour à tous,
dans mon application, je charge des fichiers KML contenant des trajectoires d'avions.
Je voudrai arriver à choisir dynamiquement à la fois la transparence des flux mais aussi l'épaisseur.

Pour info, pour l'épaisseur, j'ai trouvé que dans le fichier KML, il faut ajouter le noeud <width></width>, mais je n'arrive pas à l'appliqué au code.

Comment faire ?

**gcebelieu** · 27/02/2013, 09h34

Bonjour,

il y a deux manières d'appliquer un style à des données KML : soit en l'indiquant dans le KML et en utilisant l'option extractStyles:true dans l'API ; soit en créant son propre style avec l'API en utilisant l'option "styleMap" et en lui passant un objet de type OpenLayers.StyleMap.

Vous pouvez trouver des exemples d'utilisation de ces parametres dans le code suivant :

http://api.ign.fr/tech-docs-js/examp...rtalMap_kml.js

**Zebulon777** · 28/02/2013, 10h05

Merci pour la réponse, mais je n'y arrive pas.

Pour le moment, pour ajouter une couche, je fais :

Code :

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

1
2
3
4
5
6
7
8
9
10
	var WLBG_ARR_OUEST = map.addLayer(
		'KML',
		'LBG Arr. Ouest', // Le nom que vous souhaitez donner à la couche et qui apparaitra dans le gestionnaire de couche			
		'./KML/LFPB/LFPB_A_Ouest_2012_06_15_jaune.kml', // Le chemin d'accès au fichier KML source, sous forme de chemin relatif ou d'URL
		{
			visibility:true,
			opacity:0.55
		}
	);

opacity n'a pas l'air de fonctionner, ni width, d'ailleurs ?

**gcebelieu** · 28/02/2013, 13h11

A quoi ressemble le KML ?

**Zebulon777** · 28/02/2013, 13h19

En voici une petite partie :

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
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>LFPB_A_Est_2012_07_25.kml</name>
	<StyleMap id="default1">
		<Pair>
			<key>normal</key>
			<styleUrl>#default0</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#default</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="default">
		<LineStyle>
			<color>ff00ffff</color>
		</LineStyle>
	</Style>
	<Style id="default0">
		<LineStyle>
			<color>ff00ffff</color>
		</LineStyle>
	</Style>
	<Folder>
		<name>LFPB_A_Est_2012_07_25.kml</name>
		<Placemark>
			<name>FlightPath-@TLB221</name>
			<styleUrl>#default1</styleUrl>
			<LineString>
				<extrude>1</extrude>
				<tessellate>1</tessellate>
				<altitudeMode>absolute</altitudeMode>
				<coordinates>
					2.116299,48.88751599999999,913.9999999999999 2.121009,48.886913,913.9999999999999 2.125728,48.88656600000001,923.0000000000001 2.130513,48.887779,923.0000000000001 2.135298,48.88899200000001,923.0000000000001 2.139635,48.888916,923.0000000000001 2.144399,48.88961,923.0000000000001 2.149556,48.890293,923.0000000000001 2.153959,48.891773,923.0000000000001 2.158351,48.892994,923.0000000000001 2.162732,48.89395499999999,923.0000000000001 2.167507,48.894909,923.0000000000001 2.172294,48.89611800000001,923.0000000000001 2.175909,48.897613,923.0000000000001 2.180707,48.899086,923.0000000000001 2.1851,48.90030700000001,923.0000000000001 2.189899,48.901775,923.0000000000001 2.193886,48.902744,923.0000000000001 2.198292,48.904221,923.0000000000001 2.20308,48.905434,923.0000000000001 2.207079,48.90665799999999,923.0000000000001 2.211463,48.907616,923.0000000000001 2.215857,48.908836,923.0000000000001 2.219057,48.909813,923.0000000000001 2.223058,48.911041,892 2.227047,48.912006,892 2.230653,48.91323800000001,892 2.235037,48.91419599999999,862 2.238632,48.915165,830.9999999999999 2.242239,48.916397,830.9999999999999 2.246218,48.917103,801 2.250208,48.918068,771 2.254198,48.919033,771 2.257806,48.920261,740 2.261785,48.920967,710 2.266182,48.922184,710 2.269778,48.923153,679 2.27377,48.924118,679 2.277366,48.925087,649 2.280963,48.92606,649 2.284572,48.92729199999999,618 2.287763,48.928009,618 2.291372,48.92923700000001,618 2.293368,48.929722,618 2.296965,48.930691,618 2.300157,48.931408,588 2.302559,48.93213999999999,588 2.305763,48.93312099999999,557 2.308548,48.933586,557 2.311357,48.93457,527 2.314549,48.935287,527 2.31694,48.93576,496 2.319354,48.936756,496 2.322941,48.937466,496 2.325344,48.93819799999999,466 2.32813,48.938664,466 2.330138,48.939404,435 2.333343,48.94038,435 2.335746,48.94111300000001,435 2.337348,48.941601,405 2.340146,48.942326,405 2.34255,48.94305800000001,405 2.345348,48.943783,374 2.34854,48.94450000000001,374 2.350538,48.944981,374 2.353348,48.945965,344 2.35574,48.946438,344 2.358144,48.94716999999999,344 2.360548,48.94790299999999,313 2.36294,48.948376,313 2.365739,48.949097,313 2.368525,48.949562,313 2.370942,48.95055399999999,283 2.373741,48.951279,283 2.376145,48.952011,283 2.378932,48.952473,252 2.381743,48.953457,252 2.384148,48.95418899999999,252 2.386947,48.954914,222 2.389747,48.955635,222 2.392546,48.95636,191 2.395741,48.957077,191 2.398552,48.958057,191 2.400957,48.95879,191 2.404152,48.959507,161 2.406557,48.96023600000001,161 2.409752,48.96095300000001,161 2.41175,48.96143,130 2.414563,48.962414,130 2.417363,48.963135,100 2.419756,48.963608,100 2.422569,48.964592,100 
				</coordinates>
			</LineString>
		</Placemark>
		<Placemark>

**Mides** · 28/02/2013, 16h31

Bonjour,

peut être que ce bout de code pourra t'aider un peu.

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 layerKml= new OpenLayers.Layer.Vector("Nom Kml", {
	styleMap: new OpenLayers.StyleMap({
		strokeColor: "blue",			
		strokeWidth: 1,
		strokeOpacity:0.5,			
		fillColor:"blue",
		fillOpacity:0.4
		}),
	protocol: new OpenLayers.Protocol.HTTP({
		url: "fichier.kml",
		format: new OpenLayers.Format.KML({
			extractStyles: false, 
			extractAttributes: false,
			maxDepth: 2
			})
			})				
	});

**Zebulon777** · 01/03/2013, 08h22

Je viens d'essayer ça

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
function initMap() {
	viewer = iv.getViewer();
	map = viewer.getMap();
	
  viewer.addGeoportalLayers (
	  ['GEOGRAPHICALGRIDSYSTEMS.MAPS'], // choix des couches à afficher
	  {'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:true, opacity:0.3, maxZoomLevel:13}} // options d'affichage des couches
	);

console.log;
	var WLBG_DEP_OUEST = map.addLayer(
		'KML',
		'LBG Dep. Ouest', // Le nom que vous souhaitez donner à la couche et qui apparaitra dans le gestionnaire de couche			
		'./KML/LFPB/LFPB_D_Ouest_2012_06_15_orange.kml', // Le chemin d'accès au fichier KML source, sous forme de chemin relatif ou d'URL
		{
			visibility:true,
			opacity:0.33,
strokeColor: "blue",			
		strokeWidth: 1,
		strokeOpacity:0.5,			
		fillColor:"blue",
		fillOpacity:0.4			
		}
	);
...
...
...

Et ça ne fonctionne pas, ce sont toujours les paramètres du KML qui sont pris en compte or dans les fichiers KML, la seule chose qui est imposé, c'est la couleur.

**Zebulon777** · 01/03/2013, 13h49

EUREKA !

J'ai trouvé, voici la solution, si ça peut aider quelqu'un :

Il faut définir un style juste avant le addLayer :

Code :

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

1
2
3
4
5
6
7
8
	var StyleLBGDep = new OpenLayers.StyleMap({
		"default": new OpenLayers.Style({
			'strokeWidth': 2,
			'strokeColor': 'orange',
			'strokeOpacity':0.33
  		}),
	});

Puis désactiver la prise en compte des paramètres des fichiers KML et utiliser le style définit :

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
	var WLBG_DEP_OUEST = map.addLayer(
		'KML',
		'LBG Dep. Ouest', // Le nom que vous souhaitez donner à la couche et qui apparaitra dans le gestionnaire de couche			
		'./KML/LFPB/LFPB_D_Ouest_2012_06_15_orange.kml', // Le chemin d'accès au fichier KML source, sous forme de chemin relatif ou d'URL
		{
			visibility:true,
			maxZoomLevel:WMaxZoomLevel,
			styleMap:StyleLBGDep
//			opacity:0.33
		},
		{
			formatOptions:{extractStyles :false}
		}		
	);

formatOptions:{extractStyles :false} = Désactivation des paramètres KML
styleMap:StyleLBGDep = Utilisation du style définit.

Il est bien sur possible de définir plusieurs styles.

Merci encore pour votre aide.

Transparence et épaisseur des traits ?

IGN API Géoportail

Discussions similaires

Partager

Partager