Afficher une image Géoportail par javascript

Version imprimable

3 pièce(s) jointe(s)

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:

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:

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.

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:

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 }

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

Code:

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 ?

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.

Citation:

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:

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'); };

1 pièce(s) jointe(s)

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:

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.

Pièce jointe 205429
merci encore à toi.

31/03/2016, 16h28
SylvainM

Citation:

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.