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>