Mapviewer

Fonds vector-tile serveur geoservice

Retour

Cette section à pour but de montrer quelques exemples d'utilisation des fonds de plan tuilé vectorielles a partir du serveur geoservice:

  • Utiliser votre login / mot de pass afin de renseigner les informations du token
    • D'autres moyens de remplir un token sont disponibles dans l'application, voir la doc API
  • Ajouter une source de token pour l'application utilisable par différents calques
    • actuellement uniquement les types suivants:
      • vectorTile
  • En commentaire "comment ajouter une source de token directement sur le calque"
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">

<form id="formbackground" >
  <input name="username" placeholder="username" autocomplete="current-username"/>
  <input name="password" placeholder="password" type="password" autocomplete="current-password"/>
  <button>+ Fond de plan tuilé protégé</button>
</form>
<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:375px;" />


const form = document.getElementById("formbackground");
form.addEventListener("submit", addProtectedBackgrounds);

// 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: [250000,5950000],
    defaultZoom: 6,
    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: false // on ne veut pas réorganiser les calques
})

// création de groupe
kmapvInstance.commonLayer.addGroup("FondDePlan",{
  title: "Fonds de plan",
  zIndex: 0
})

// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addBackgroundLayer(
  'background-osm', // identifiant
  'osm', // type
  {
    idGroup: "FondDePlan", // groupe ou ajouter le calque
    title: 'OSM', // libellé
    zIndex: 0, // z-order
    visible: true,
    baseLayer: false // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
})

/** methode asynchrone car on veut attendre pour chaque plan qu'il soit ajouter dans le pool de token */
async function addProtectedBackgrounds(e) {
  // empêche de recharger
  e.stopPropagation();
  e.preventDefault();
  // converti le formulaire en objet {username, password}
  const formData = new FormData(e.target);
  const auth = Object.fromEntries([...formData.entries()])

  // ajoute une source de jeton pour les outils mapviewer (on attend qu'elle soit initilisée car ici on sait que la méthode "url" attend un retour de jeton)
  await kmapvInstance.addTokenSource({
    id:"geoservice",
    type: 'url',
    method:'get',
    url:'https://services.geosphere.fr/api/auth/login?key=f5e7d976d664ce8aa154bc210375db8e621b06cff732895e5d3275a3c7cf4379',
    auth,
    tokenKey:'jwt',
    refreshInterval: 10000
  })

  // la source du token peut aussi être entièrement configurée sur le layer
  /*await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-osm-basic', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'OSM basic', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/osm-basic/style.json',
      params: {
        token: {
          id:"geoservice",
          type: 'url',
          method:'get',
          url:'https://services.geosphere.fr/api/auth/login?key=f5e7d976d664ce8aa154bc210375db8e621b06cff732895e5d3275a3c7cf4379',
          auth,
          tokenKey:'jwt',
          refreshInterval: 10000
        }
      }
  })*/


  await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-osm-basic', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'OSM basic', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/osm-basic/style.json',
      params: {
        token: {
          id:"geoservice",
          /*type: 'url',
          method:'get',
          url:'https://services.geosphere.fr/api/auth/login?key=f5e7d976d664ce8aa154bc210375db8e621b06cff732895e5d3275a3c7cf4379',
          auth,
          tokenKey:'jwt',
          refreshInterval: 10000*/
        }
      }
  })

  await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-osm-openmaptiles', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'OSM Openmaptiles ', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/osm-openmaptiles/style.json',
      params: {
        token: {
          id:"geoservice",
        }
      }
  })
  await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-osm-bright', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'OSM bright', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/osm-bright/style.json',
      params: {
        token: {
          id:"geoservice",
        }
      }
  })
  await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-cadastre', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'cadastre', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/cadastre/style.json',
      params: {
        token: {
          id:"geoservice",
        }
      }
  })
  await kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-batiments', // identifiant
    'vectorTile', // type
    {
      idGroup: 'FondDePlan', // groupe ou ajouter le calque
      title: 'batiment', // libellé
      zIndex: 1, // 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)
      styleUrl: 'https://services.geosphere.fr/maps/tiles/styles/batiments/style.json',
      params: {
        token: {
          id:"geoservice",
        }
      }
  })
}

kmapvInstance.commonLayer.getLayers().forEach((layer) => {
    layer.on("change:visible",(evt) => {
        console.log(kmapvInstance.getMap().getView().getZoom(),kmapvInstance.getMap().getView().getCenter())
        console.log("Evenement",evt)
        console.log("LayerId",evt.target.get(kmapvInstance.commonLayer.propertiesName.ID_LAYER))
        console.log("Visibilité",evt.target.get(evt.key))
    })
})
Dernière mise à jour:
Contributors: David Hequet, David Hequet