IGN

Géoservices IGN

iTowns et Géoportail

Dernière mise à jour : 14 Mars 2018

Table des matières

Objectifs

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.

Prérequis

Réalisation

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 :

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://wxs.ign.fr/CLEF/geoportail/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://wxs.ign.fr/CLEF/geoportail/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://wxs.ign.fr/CLEF/geoportail/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://wxs.ign.fr/CLEF/geoportail/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 :