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 : 283
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