iTowns et WMTS
Dernière mise à jour : 6 novembre 2024
- Objectifs
- Prérequis
- Réalisation
- Rendu
Table des matières
Contenu
Titre
Objectifs
Titre
Objectifs
Texte
Ce tutoriel a pour objectif de montrer à l’utilisateur comment afficher les données de référence de l’IGN (cartes IGN, photographies aériennes, parcelles cadastrales,…) dans une fenêtre cartographique en utilisant la bibliothèque javascript OpenSource de visualisation en 3D des données iTowns.
NB : la démarche proposée ici permet de mettre en oeuvre un affichage de base pour les données IGN servies en WMTS WebMercator directement avec iTowns. L’adjonction de l’extension Géoportail pour iTowns permettra de bénéficier de l’ensemble des services du Géoportail avec cette bibliothèque.
Titre
Prérequis
Titre
Prérequis
Texte
- Disposer d'une version récente de la bibliothèque iTowns.
- (Disposer d’une clef d’accès Géoplateforme pour pouvoir afficher les données non libres du Géoportail.)
Titre
Réalisation
Titre
Réalisation
Texte
Le tutoriel suivant a été réalisé avec la version 2.3.0 d’iTowns.
Code minimal pour afficher une carte avec iTowns
On utilise l’objet itowns.GlobeView :
- associé à un élément html de la page (“viewerDiv”)
- associé à une position initiale(“positionOnGlobe”) qui définit le point de vue (centre,altitude)
- composé de couches cartographiques (“layer”)
- utiliser la fonction “addLayer” pour ajouter une couche cartographique au globe iTowns
const positionOnGlobe = {
longitude: 6.47,
latitude: 44.28,
altitude: 8000
};
const viewerDiv = document.getElementById('viewerDiv');
const globeView = new itowns.GlobeView(viewerDiv, positionOnGlobe);
globeView.addLayer(layer);
Code pour afficher une couche image tuilée avec iTowns
On construit un objet layer en lui spécifiant la valeur “wmts” (couche tuilée) pour l’attribut “protocol”, et “color” pour l’attribut “type”.
L’identifiant de la pyramide et sa définition doivent être spécifiés dans les options de l’objet layer, via les attributs “tileMatrixSet” et “tileMatrixSetLimits”.
var myWMTSColorLayer = {
"type": "color",
"protocol": "wmts",
"id": "Identifiant de la couche pour iTowns",
"url": "Url de la couche wmts",
"networkOptions": {
"crossOrigin": "omit"
},
"updateStrategy": {
"type": "0",
"options": {}
},
"options": {
"attribution" : {
"name": "Nom de l'attribution de la couche",
"url": "URL du site de l'attribution"
},
"name": "Nom de la couche",
"mimetype": "Format de la couche wmts (en général image/jpeg ou image/png)",
"tileMatrixSet": "Identifiant de la pyramide (PM ou WGS84G)",
"tileMatrixSetLimits": {Limites de la pyramide pour la couche}
}
}
Code pour afficher une couche MNT (élévation) tuilée avec iTowns
On construit un objet layer en lui spécifiant la valeur “wmts” (couche tuilée) pour l’attribut “protocol”, et “elevation” pour l’attribut “type”.
L’identifiant de la pyramide et sa définition doivent être spécifiés dans les options de l’objet layer, via les attributs “tileMatrixSet” et “tileMatrixSetLimits”.
var myWMTSElevationLayer = {
"type": "elevation",
"protocol": "wmts",
"id": "Identifiant de la couche pour iTowns",
"url": "Url de la couche wmts",
"networkOptions": {
"crossOrigin": "omit"
},
"noDataValue" : "Valeur de nodata pour la couche",
"updateStrategy": {
"type": 1,
"options": {
"groups": [3, 7, 11]
}
},
"options": {
"attribution" : {
"name": "Nom de l'attribution de la couche",
"url": "URL du site de l'attribution"
},
"name": "Nom de la couche",
"mimetype": "Format de la couche wmts (pour une couche MNT IGN : image/x-bil;bits=32)",
"tileMatrixSet": "Identifiant de la pyramide (PM ou WGS84G)",
"tileMatrixSetLimits": {Limites de la pyramide pour la couche}
}
}
Exemple de tileMatrixSetLimits
"tileMatrixSetLimits": {
"3": {
"minTileRow": 1,
"maxTileRow": 5,
"minTileCol": 5,
"maxTileCol": 15
},
"4": {
"minTileRow": 3,
"maxTileRow": 10,
"minTileCol": 10,
"maxTileCol": 30
},
"5": {
"minTileRow": 6,
"maxTileRow": 20,
"minTileCol": 20,
"maxTileCol": 61
},
"6": {
"minTileRow": 13,
"maxTileRow": 40,
"minTileCol": 41,
"maxTileCol": 123
},
"7": {
"minTileRow": 27,
"maxTileRow": 80,
"minTileCol": 82,
"maxTileCol": 247
},
"8": {
"minTileRow": 54,
"maxTileRow": 160,
"minTileCol": 164,
"maxTileCol": 494
},
"9": {
"minTileRow": 108,
"maxTileRow": 321,
"minTileCol": 329,
"maxTileCol": 989
},
"10": {
"minTileRow": 216,
"maxTileRow": 642,
"minTileCol": 659,
"maxTileCol": 1979
},
"11": {
"minTileRow": 432,
"maxTileRow": 1285,
"minTileCol": 1319,
"maxTileCol": 3959
}
}
Exemples de couches IGN
Couche des photographies aériennes IGN
var orthoLayer = {
"type": "color",
"protocol": "wmts",
"id": "Ortho",
"url": "https://data.geopf.fr/wmts",
"updateStrategy": {
"type": "0",
"options": {}
},
"networkOptions" : {
"crossOrigin" : "omit"
},
"options": {
"originators" : [{
"name" : "IGN GE",
"attribution" : "IGN Grandes Echelles",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326"
}]
},
{
"name" : "IGN PE",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{
"left":-173.154,
"right":173.837,
"top":90,
"bottom":-90
},
"maxScaleDenominator":559082264,
"minScaleDenominator":272990
}]
},
{
"name" : "OSM NE",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":2.3,"right":10,"top":51.093,"bottom":48.8}
}]
},
{
"name" : "OSM NW",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":-10,"right":2.3,"top":51.093,"bottom":48.8}
}]
},
{
"name" : "OSM SW",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":-10,"right":2.3,"top":48.8,"bottom":-21.39}
}]
},
{
"name" : "OSM SE",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":2.3,"right":55.837,"top":48.8,"bottom":-21.39}
}]
}],
"attribution" : {
"name":"IGN",
"url":"http://www.ign.fr/"
},
"name": "ORTHOIMAGERY.ORTHOPHOTOS",
"mimetype": "image/jpeg",
"tileMatrixSet": "PM",
"tileMatrixSetLimits": {
"2": {
"minTileRow": 0,
"maxTileRow": 4,
"minTileCol": 0,
"maxTileCol": 4
},
"3": {
"minTileRow": 0,
"maxTileRow": 8,
"minTileCol": 0,
"maxTileCol": 8
},
"4": {
"minTileRow": 0,
"maxTileRow": 16,
"minTileCol": 0,
"maxTileCol": 16
},
"5": {
"minTileRow": 0,
"maxTileRow": 32,
"minTileCol": 0,
"maxTileCol": 32
},
"6": {
"minTileRow": 1,
"maxTileRow": 64,
"minTileCol": 0,
"maxTileCol": 64
},
"7": {
"minTileRow": 3,
"maxTileRow": 128,
"minTileCol": 0,
"maxTileCol": 128
},
"8": {
"minTileRow": 7,
"maxTileRow": 256,
"minTileCol": 0,
"maxTileCol": 256
},
"9": {
"minTileRow": 15,
"maxTileRow": 512,
"minTileCol": 0,
"maxTileCol": 512
},
"10": {
"minTileRow": 31,
"maxTileRow": 1024,
"minTileCol": 0,
"maxTileCol": 1024
},
"11": {
"minTileRow": 62,
"maxTileRow": 2048,
"minTileCol": 0,
"maxTileCol": 2048
},
"12": {
"minTileRow": 125,
"maxTileRow": 4096,
"minTileCol": 0,
"maxTileCol": 4096
},
"13": {
"minTileRow": 2739,
"maxTileRow": 4628,
"minTileCol": 41,
"maxTileCol": 7917
},
"14": {
"minTileRow": 5478,
"maxTileRow": 9256,
"minTileCol": 82,
"maxTileCol": 15835
},
"15": {
"minTileRow": 10956,
"maxTileRow": 18513,
"minTileCol": 165,
"maxTileCol": 31670
},
"16": {
"minTileRow": 21912,
"maxTileRow": 37026,
"minTileCol": 330,
"maxTileCol": 63341
},
"17": {
"minTileRow": 43825,
"maxTileRow": 74052,
"minTileCol": 660,
"maxTileCol": 126683
},
"18": {
"minTileRow": 87651,
"maxTileRow": 148105,
"minTileCol": 1320,
"maxTileCol": 253366
},
"19": {
"minTileRow": 175302,
"maxTileRow": 294060,
"minTileCol": 170159,
"maxTileCol": 343473
},
"20": {
"minTileRow": 376733,
"maxTileRow": 384679,
"minTileCol": 530773,
"maxTileCol": 540914
}
}
}
}
Couche du MNT IGN
var MNTLayer = {
"type": "elevation",
"protocol": "wmts",
"id": "IGN_MNT",
"url": "https://data.geopf.fr/wmts",
"noDataValue" : -99999,
"updateStrategy": {
"type": 1,
"options": {
"groups": [3, 7, 11, 14]
}
},
"networkOptions" : {
"crossOrigin" : "omit"
},
"options": {
"name": "ELEVATION.ELEVATIONGRIDCOVERAGE",
"originators" : [{
"name" : "IGN",
"attribution" : "IGN Grandes Echelles",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326"
}]
}],
"mimetype": "image/x-bil;bits=32",
"tileMatrixSet": "WGS84G",
"tileMatrixSetLimits": {
"3": {
"minTileRow": 1,
"maxTileRow": 5,
"minTileCol": 5,
"maxTileCol": 15
},
"4": {
"minTileRow": 3,
"maxTileRow": 10,
"minTileCol": 10,
"maxTileCol": 30
},
"5": {
"minTileRow": 6,
"maxTileRow": 20,
"minTileCol": 20,
"maxTileCol": 61
},
"6": {
"minTileRow": 13,
"maxTileRow": 40,
"minTileCol": 41,
"maxTileCol": 123
},
"7": {
"minTileRow": 27,
"maxTileRow": 80,
"minTileCol": 82,
"maxTileCol": 247
},
"8": {
"minTileRow": 54,
"maxTileRow": 160,
"minTileCol": 164,
"maxTileCol": 494
},
"9": {
"minTileRow": 108,
"maxTileRow": 321,
"minTileCol": 329,
"maxTileCol": 989
},
"10": {
"minTileRow": 216,
"maxTileRow": 642,
"minTileCol": 659,
"maxTileCol": 1979
},
"11": {
"minTileRow": 432,
"maxTileRow": 1285,
"minTileCol": 1319,
"maxTileCol": 3959
}
}
}
}
Résultat
On obtient donc au final le code suivant (couche photographies aériennes et couche MNT) :
<style type="text/css">
div#viewerDiv {
width:100%;
height:500px;
}
</style>
<script type="text/javascript" src="https://github.com/iTowns/itowns/releases/download/v2.3.0/itowns.js"></script>
<div id="viewerDiv"></div>
<script type="text/javascript">
const positionOnGlobe = {
longitude: 6.47,
latitude: 44.28,
altitude: 8000
};
const viewerDiv = document.getElementById('viewerDiv');
const globeView = new itowns.GlobeView(viewerDiv, positionOnGlobe);
var orthoLayer = {
"type": "color",
"protocol": "wmts",
"id": "Ortho",
"url": "https://data.geopf.fr/wmts",
"updateStrategy": {
"type": "0",
"options": {}
},
"networkOptions" : {
"crossOrigin" : "omit"
},
"options": {
"originators" : [{
"name" : "IGN GE",
"attribution" : "IGN Grandes Echelles",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326"
}]
},
{
"name" : "IGN PE",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{
"left":-173.154,
"right":173.837,
"top":90,
"bottom":-90
},
"maxScaleDenominator":559082264,
"minScaleDenominator":272990
}]
},
{
"name" : "OSM NE",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":2.3,"right":10,"top":51.093,"bottom":48.8}
}]
},
{
"name" : "OSM NW",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":-10,"right":2.3,"top":51.093,"bottom":48.8}
}]
},
{
"name" : "OSM SW",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":-10,"right":2.3,"top":48.8,"bottom":-21.39}
}]
},
{
"name" : "OSM SE",
"url" : "http://www.openstreetmap.org/",
"constraints" : [{
"crs":"EPSG:4326",
"bbox":{"left":2.3,"right":55.837,"top":48.8,"bottom":-21.39}
}]
}],
"attribution" : {
"name":"IGN",
"url":"http://www.ign.fr/"
},
"name": "ORTHOIMAGERY.ORTHOPHOTOS",
"mimetype": "image/jpeg",
"tileMatrixSet": "PM",
"tileMatrixSetLimits": {
"2": {
"minTileRow": 0,
"maxTileRow": 4,
"minTileCol": 0,
"maxTileCol": 4
},
"3": {
"minTileRow": 0,
"maxTileRow": 8,
"minTileCol": 0,
"maxTileCol": 8
},
"4": {
"minTileRow": 0,
"maxTileRow": 16,
"minTileCol": 0,
"maxTileCol": 16
},
"5": {
"minTileRow": 0,
"maxTileRow": 32,
"minTileCol": 0,
"maxTileCol": 32
},
"6": {
"minTileRow": 1,
"maxTileRow": 64,
"minTileCol": 0,
"maxTileCol": 64
},
"7": {
"minTileRow": 3,
"maxTileRow": 128,
"minTileCol": 0,
"maxTileCol": 128
},
"8": {
"minTileRow": 7,
"maxTileRow": 256,
"minTileCol": 0,
"maxTileCol": 256
},
"9": {
"minTileRow": 15,
"maxTileRow": 512,
"minTileCol": 0,
"maxTileCol": 512
},
"10": {
"minTileRow": 31,
"maxTileRow": 1024,
"minTileCol": 0,
"maxTileCol": 1024
},
"11": {
"minTileRow": 62,
"maxTileRow": 2048,
"minTileCol": 0,
"maxTileCol": 2048
},
"12": {
"minTileRow": 125,
"maxTileRow": 4096,
"minTileCol": 0,
"maxTileCol": 4096
},
"13": {
"minTileRow": 2739,
"maxTileRow": 4628,
"minTileCol": 41,
"maxTileCol": 7917
},
"14": {
"minTileRow": 5478,
"maxTileRow": 9256,
"minTileCol": 82,
"maxTileCol": 15835
},
"15": {
"minTileRow": 10956,
"maxTileRow": 18513,
"minTileCol": 165,
"maxTileCol": 31670
},
"16": {
"minTileRow": 21912,
"maxTileRow": 37026,
"minTileCol": 330,
"maxTileCol": 63341
},
"17": {
"minTileRow": 43825,
"maxTileRow": 74052,
"minTileCol": 660,
"maxTileCol": 126683
},
"18": {
"minTileRow": 87651,
"maxTileRow": 148105,
"minTileCol": 1320,
"maxTileCol": 253366
},
"19": {
"minTileRow": 175302,
"maxTileRow": 294060,
"minTileCol": 170159,
"maxTileCol": 343473
},
"20": {
"minTileRow": 376733,
"maxTileRow": 384679,
"minTileCol": 530773,
"maxTileCol": 540914
}
}
}
}
var MNTLayer = {
"type": "elevation",
"protocol": "wmts",
"id": "IGN_MNT",
"url": "https://data.geopf.fr/wmts",
"noDataValue" : -99999,
"updateStrategy": {
"type": 1,
"options": {
"groups": [3, 7, 11, 14]
}
},
"networkOptions" : {
"crossOrigin" : "omit"
},
"options": {
"name": "ELEVATION.ELEVATIONGRIDCOVERAGE",
"originators" : [{
"name" : "IGN",
"attribution" : "IGN Grandes Echelles",
"url" : "http://www.ign.fr",
"constraints" : [{
"crs":"EPSG:4326"
}]
}],
"mimetype": "image/x-bil;bits=32",
"tileMatrixSet": "WGS84G",
"tileMatrixSetLimits": {
"3": {
"minTileRow": 1,
"maxTileRow": 5,
"minTileCol": 5,
"maxTileCol": 15
},
"4": {
"minTileRow": 3,
"maxTileRow": 10,
"minTileCol": 10,
"maxTileCol": 30
},
"5": {
"minTileRow": 6,
"maxTileRow": 20,
"minTileCol": 20,
"maxTileCol": 61
},
"6": {
"minTileRow": 13,
"maxTileRow": 40,
"minTileCol": 41,
"maxTileCol": 123
},
"7": {
"minTileRow": 27,
"maxTileRow": 80,
"minTileCol": 82,
"maxTileCol": 247
},
"8": {
"minTileRow": 54,
"maxTileRow": 160,
"minTileCol": 164,
"maxTileCol": 494
},
"9": {
"minTileRow": 108,
"maxTileRow": 321,
"minTileCol": 329,
"maxTileCol": 989
},
"10": {
"minTileRow": 216,
"maxTileRow": 642,
"minTileCol": 659,
"maxTileCol": 1979
},
"11": {
"minTileRow": 432,
"maxTileRow": 1285,
"minTileCol": 1319,
"maxTileCol": 3959
}
}
}
}
globeView.addLayer(orthoLayer);
globeView.addLayer(MNTLayer);
</script>
Qui permet d’afficher la carte suivante :
Titre
Rendu
Titre
Rendu
Texte