Fonds de plan IGN

Retour

Cette section à pour but de montrer comment afficher un fond de plan de l'ign

Démo

{
  "jsLib": [
    "https://karteis.sct.saas-gfi.eu/dist/mapviewer/latest/karteis-mapviewer-var.js"
  ]
}

<!-- Ne pas utiliser dans votre code -->
<!-- La déclaration du css n'est utile que pour l'affichage sur le site d'exemples -->
<link rel="stylesheet" href="/mapviewer/mapviewer.css">
<!-- Ne pas utiliser dans votre code -->

<!-- Dans nos exemple on utilise font-awesome pour afficher les icones de boutons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:400px;" />

// Initialisation de la carte avec ses plugins
const kmapvInstance = (new kmapv.Mapviewer({
    mapdiv: document.getElementById('kmap'), // Il est aussi possible d'utiliser directement l'id du div contenant la carte
    projection: 'EPSG:3857',
    defaultCenter: [137586.650913, 5405397.329243],
    defaultZoom: 14,
    minZoom: 5,
    maxZoom: 22,
}))
 .use(kmapv.CommonLayer({})) // charge le plugin générique des calques
 .use(kmapv.BackgroundLayer({})) // charge le plugin de prise en charge des fond de plans
 //.use(kmapv.DataLayer({})) // chage le plugin de prise en charge des couche de données

// ajout du layermanager :
kmapvInstance.horizontalToolbar.addLayerManagerTool({
    reordering: true
})

// création de groupe
kmapvInstance.commonLayer.addGroup("bg-ign-cadastre",{
    title: "Cadastre",
    zIndex: 50
})


// création de groupe
kmapvInstance.commonLayer.addGroup("bg-ign-orthophoto",{
    title: "Orthophoto",
    zIndex: 20
})

// Ajout des fonds de plan Cadastre
kmapvInstance.backgroundLayer.addBackgroundLayer(
    'bg-ign-cadastre-noir', // identifiant
    'ign', // type
    {
        idGroup: "bg-ign-cadastre", // groupe ou ajouter le calque
        title: 'Cadastre Noir', // libellé
        zIndex: 20, // z-order
        visible: true,
        baseLayer: true, // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
        // Options spécifiques pour l'IGN
        url: 'https://data.geopf.fr/wmts',
        layer: 'CADASTRALPARCELS.PARCELS',
        format: 'image/png',
        style: 'bdparcellaire'
})

kmapvInstance.backgroundLayer.addBackgroundLayer(
    'bg-ign-cadastre-orange', // identifiant
    'ign', // type
    {
        idGroup: "bg-ign-cadastre", // groupe ou ajouter le calque
        title: 'Cadastre Orange', // libellé
        zIndex: 20, // z-order
        visible: false,
        baseLayer: true, // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
        // Options spécifiques pour l'IGN
        url: 'https://data.geopf.fr/wmts',
        layer: 'CADASTRALPARCELS.PARCELS',
        format: 'image/png',
        style: 'bdparcellaire_o'
})

kmapvInstance.backgroundLayer.addBackgroundLayer(
    'bg-ign-cadastre-normal', // identifiant
    'ign', // type
    {
        idGroup: "bg-ign-cadastre", // groupe ou ajouter le calque
        title: 'Cadastre', // libellé
        zIndex: 20, // z-order
        visible: false,
        baseLayer: true, // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
        // Options spécifiques pour l'IGN
        url: 'https://data.geopf.fr/wmts',
        layer: 'CADASTRALPARCELS.PARCELS',
        format: 'image/png',
        style: 'normal'
})

kmapvInstance.backgroundLayer.addBackgroundLayer(
    'bg-ign-orthophoto', // identifiant
    'ign', // type
    {
        idGroup: "bg-ign-orthophoto", // groupe ou ajouter le calque
        title: 'Orthophoto', // libellé
        zIndex: 10, // z-order
        visible: true,
        baseLayer: true, // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
        // Options spécifiques pour l'IGN
        url: 'https://data.geopf.fr/wmts',
        layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
        format: 'image/jpeg',
        style: 'normal'
})

kmapvInstance.backgroundLayer.addBackgroundLayer(
    'bg-ign-orthophoto-hist', // identifiant
    'ign', // type
    {
        idGroup: "bg-ign-orthophoto", // groupe ou ajouter le calque
        title: 'Orthophoto 1950', // libellé
        zIndex: 10, // z-order
        visible: false,
        baseLayer: true, // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
        // Options spécifiques pour l'IGN
        url: 'https://data.geopf.fr/wmts',
        layer: 'ORTHOIMAGERY.ORTHOPHOTOS.1950-1965',
        format: 'image/png',
        style: 'BDORTHOHISTORIQUE'
})