Afficher une image G�oportail par javascript

**lumfast** · 29/03/2016, 11h07

Bonjour voila mon probl�me,

Je dois r�cup�rer une tuiles g�oportail al�atoire puis l'afficher sur ma page web pour apr�s la d�couper en 16 case et r�aliser un "Jeu de Taquin" .

Je r�alise mon code ou j'arrive a g�n�rer une adresse al�atoire avec des position de la tuiles r�cup�rer al�atoirement entre certaines valeur que je d�finis.
J'arrive ensuite a faire une image � partir de ce liens mais en revanche je ne trouve pas le moyens pour afficher cette image et pouvoir apr�s la d�couper

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 var APIkey="in5wghdufn0gn8d7g0394dsg";
 //clé API obtenue sur le site geoportail après la création d'un compte et d'une demande de clé
 
function randomInt(mini, maxi)
{
	var nb = mini + (maxi+1-mini)*Math.random();
	return Math.floor(nb);  // return max nb
}
//Cette fonction permet de donner une entier aléatoire entre deux entiers donnés
 
 
 
 
var rowbegin = randomInt(500,1000);
//on cherche une tuile aléatoire (ligne et colonne) sur le service WMTS
//du géoportail. Les bornes ont été trouvé grace à une requête GetFeatures 
//que l'on à decouvert en cours de web avancé avec Thibaud Couppin
var colbegin = randomInt(500,1000); 
 
 
// niveau de zoom choisi subjectivement 
var zoom =10;
 
 
function generateURL(r,c)
{
 
var zoom = 10 ;
	liens =  'http://wxs.ign.fr/'+'in5wghdufn0gn8d7g0394dsg'+'/geoportail/wmts?';
	liens += 'service=WMTS';
	liens += '&request=GetTile';
	liens += '&version=1.0.0'
	liens += '&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS';
	liens += '&style=normal';
	liens += '&format=image/jpeg';
	liens += '&TileMatrixSet=PM';
	liens += '&TileMatrix='+zoom;
	liens += '&TileRow='+row;
	liens += '&TileCol='+col;
	console.log(liens);
	return liens;
 
}
// cette fonction permet de créer la requete vers le geoportail en utilisant les entiers aléatoires générés 
 
 
URL =  generateURL(rowbegin,colbegin);
//adresse crée pour recuperer l'image
console.log(URL);
 
// création de l'image à partir de l'url générer
function creer_img(URL){
var img = document.createElement("img");
img.setAttribute("height", "256");
img.setAttribute("width", "256");
img.setAttribute("src", URL);
//Les tuiles du service WMTS du geoportail sont toujours des images carrées de dimension 256 pixels
return img
}
 
//on crée l'objet image liée à l'url générée précédement
img1 = creer_img(URL);
console.log(img1);
 
window.onload = function() {		
 
		var canvas = document.getElementById('canvas');	
		var context = canvas.getContext("2d");
		canvas.width=515;
		canvas.height=515;
		context.fillStyle = 'white';
		context.fillRect(0, 0, 515, 515);
 
		context.drawImage(img1, 0, 0);
		console.log('okok');
	}

voici mon code javascript comment�

et ma page html

Code html :

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
<!DOCTYPE html> 
<html lang="fr"> 
	<head> 
		<link rel="stylesheet" type="text/css" href="css.css" />
		<meta charset="UTF-8" />
		<title> Les jeu de taquin </title> 
		<link rel="icon" type="image/png" href="logo.png" />
		<script src="js.js" language="javascript" type="text/javascript"></script>
		</head>
		<body style="background:#DCDCDC">
			<h1> <center> Jeu de Taquin </center></h1>    
         <body>
            <p>AmorÃ§age d'un jeu de Taquin</p>
        <canvas id="canvas" >   </canvas>
            <!--creation de la balise canvas qui recevra tout le jeu de taquin demandÃ©-->
<html>

je met en liens pour plus de facilit� les fichiers.

Merci d'avance pour votre aide qui me sera pr�cieuse.

**NoSmoking** · 29/03/2016, 15h59

Bonjour,
j'entrevois au moins deux probl�me dans ton code.

1/ dans ta fonction function generateURL(r,c) ru as 2 param�tres que tu n'utilise pas mais tu te sert de 2 variables row et col, qui ne sont pas initialis�es, tu dois avoir des messages dans la console (F12).

2/ Il te faut attendre que l'image soit charg�e avant de la dessiner dans le <canvas>.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
// création de l'image à partir de l'url générer
function creer_img(URL) {
    var img = document.createElement("img");
    img.setAttribute("height", "256");
    img.setAttribute("width", "256");
    //Les tuiles du service WMTS du geoportail sont toujours des images carrées de dimension 256 pixels
    img.onload = function() {
        // c'est ici que l'on doit utiliser l'image
        context.drawImage(this, 0, 0);  // Attention context doit être visible à cet endroit
    };
    img.src = URL;
    return img; // pas franchement utile
}

**lumfast** · 30/03/2016, 14h17

est-ce que je doit en amont d�finir le context par rapport au canvas ?
comme ceci ?

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
 
function creer_img(URL) {
//definition du context pour le canvas 
	var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
		context.strokeStyle = 'red';
		context.strokeRect(0, 0, 515, 515);
    var img = document.createElement("img");
	// définition de la taille de l'image
    img.setAttribute("height", "256");
    img.setAttribute("width", "256");
    //Les tuiles du service WMTS du geoportail sont toujours des images carrées de dimension 256 pixels
    img.onload = function() {
        // c'est ici que l'on doit utiliser l'image
        context.drawImage(this, 0, 0);  // Attention context doit être visible à cet endroit
    };
    img.src = URL;
 
}

Il me met que la variable canvas est vide dans ma console

et je ne dois pas d�finir le src avant de lancer le chargement de l'image ?

**NoSmoking** · 30/03/2016, 18h39

Attention, si tu as gard� la m�me structure que dans ton post #1, il te faut maintenir le window.onload, on ne peut utiliser un �l�ment avant qu'il ne soit dans le DOM. Tu peux �galement mettre ton script � la fin du document.

et je ne dois pas d�finir le src avant de lancer le chargement de l'image ?

la src est ce qu'il faut attribuer en dernier apr�s d�finition de ce que tu souhaites faire avec elle.

Tu devrais te retrouver avec un truc du style

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
var canvas,
    ctxt;
function creer_img(URL) {
    var img = document.createElement("img");
    img.setAttribute("height", "256");
    img.setAttribute("width", "256");
    //Les tuiles du service WMTS du geoportail sont toujours des images carrées de dimension 256 pixels
    img.onload = function() {
        // c'est ici que l'on doit utiliser l'image
        ctxt.drawImage(this, 0, 0);  // Attention context doit être visible à cet endroit
    };
    img.src = URL;
    return img; // pas franchement utile
}
window.onload = function() {		
    canvas = document.getElementById('canvas');	
    ctxt = canvas.getContext("2d");
    canvas.width=515;
    canvas.height=515;
    ctxt.fillStyle = 'white';
    ctxt.fillRect(0, 0, 515, 515);
    // création et affichage de ton image
    creer_img('adresse_de_l_image'); 
};

**lumfast** · 30/03/2016, 22h22

j'ai l'impression de tourner un peu en rond et je ne trouve toujours pas :/.

j'ai tout mis sur le html pour me simplifier un peu les choses.
j'arrive � cr�er l"image � partir de l'url mais toujours pas a l'afficher.
je me demande si l'affichage dans un canvas et le mieux pour le d�coupage que je dois faire apres. est-ce que ca serait mieux de l'afficher dans une div ?

avec le code

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Le jeu de taquin</title>
    </head>
        <body>
<h1> <center> Jeu de Taquin </center></h1> 
 
 
          <canvas id="canvas" width="256" height="256" style="border:2px solid black;">   
            <!--creation de la balise canvas qui recevra tout le jeu de taquin demandé-->
 
<script>
 
 CleAPI= "in5wghdufn0gn8d7g0394dsg";
 
 function randomNum(min, max)
{
	var num = min + (max+1-min)*Math.random();  // math random donne un nombre appartenant à [0,1[
	return Math.floor(num);  // math floor renvoie le plus grand entier 
 
}
 
 
row = randomNum ( 700, 720); // ici on génere aléatoirement un nombre entre 700 et 720 pour les coordonnées en abscisse de la tuile
console.log(row);
 
col = randomNum ( 1010, 1040); // pareil que pour le row pour les coordonnées en ordonnées de la tuiles
console.log(col);
 
 
function  URL()
{
	// on cree la requete wmts qui va recuperer la tuile
	liens =  'http://wxs.ign.fr/'+CleAPI+'/geoportail/wmts?';
	liens += 'service=WMTS';
	liens += '&request=GetTile';
	liens += '&version=1.0.0'
	liens += '&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS';
	liens += '&style=normal';
	liens += '&format=image/jpeg';
	liens += '&TileMatrixSet=PM';
	liens += '&TileMatrix=10';
	liens += '&TileRow='+row;
	liens += '&TileCol='+col;
 
	return liens;
}
 
lien1 = URL();
console.log(lien1);
 
 
 
function image(liens){
var canvas;
var ctxt;
 
var img = document.createElement("img");
img.setAttribute("src", liens );
img.setAttribute("width" , "256");
img.setAttribute("height" , "256");
 
img.onload = function() {
ctxt.drawImage(this,0,0);
};
img.src = lien1; 
return img;
}
 
 
img1 = image(lien1);
console.log(img1);
 
window.onload = function () {
canvas = document.getElementById('canvas');
ctxt = canvas.getContext("2d");
ctxt.fillStyle = "blue";
ctxt.fillRect (0,0,515,515);
image(lien1);
};
 
 
</script>
 
        </body>

voila ce que m'affiche la console.
je ne sais pas � quoi l'erreur 404 correspond.

Nom : console.png
Affichages : 296
Taille : 69,3 Ko

merci encore � toi.

**SylvainM** · 31/03/2016, 16h28

je ne sais pas � quoi l'erreur 404 correspond.

C'est juste que cette tuile n'existe pas !
Tu as du tomber dans un secteur non couvert par le serveur de tuiles du GeoPortail.

(c'est marrant, je n'y connais vraiment rien en JS, et je n'aurais jamais penser pouvoir r�pondre � une question dans cette section, o� je suis tomb� par hasard !

)

A+

Sylvain M.

Afficher une image G�oportail par javascript

JavaScript

Discussions similaires

Partager

Partager