Utilisation du WFS comme source de données avec un header contenant basic auth

Retour

Cette section à pour but de montrer l'utilisation d'un datalayer avec un WFS comme source

• utilise une basic auth pour se connecter
• Exemple avec serveur Rennes via proxy devtools
• mot de passe a voir sur GSEU-3250

Calque data avec source WFS

{
  "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>+ DataLayer WFS 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", addProtected);

// commence par injecter les systèmes de projections utile:
kmapv.Services.loadProjections([{
    name:'EPSG:3946',
    projection:'+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs'
}])
// 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: [490163.78728279925,5695613.112654544],
    defaultZoom: 16,
    minZoom: 5,
    maxZoom: 22,
    interactions: {
        hover: {}
    }
}))
 .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
 .use(kmapv.Tooltips({stopEvent:false})) // charge le plugin de gestion des tooltips, stopEvents: false le tooltip n'intercepte pas les events souris/tap

// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addOSM('background', { title: 'open street map', zIndex: 0 })

function addProtected(e) {

  // empêche de recharger
  e.stopPropagation();
  e.preventDefault();

  const formData = new FormData(e.target);
  const { username, password } = Object.fromEntries([...formData.entries()])

  // styles des données
  const styles = kmapv.Services.createStyle(
  {
      // remplissage des polygones
      fill: {
          color: 'rgba(200,200,100,0.5)',
      },
      // style les lignes
      stroke: {
          color: '#d63f19ff',
          width: 2,
      },
      // style des points
      circle: {
          radius: 10,
          fill: {
              color: 'rgba(200,200,100,0.5)',
          },
          stroke: {
              color: '#333',
              width: 2,
          }
      }
  })
  // Ajout d'un calque de données
  kmapvInstance.dataLayer.addDataLayer({
      title: "Calque de donnée",
      idGroup: 'data',
      zIndex: 1,
      layerId: 'identifiant-du-calque',
      selectable: false,
      minZoom: 15.99,
      style: styles,
      wfs: {
          headers:{
            'Authorization': `Basic ${btoa(username + ':' + password)}`
          },
          projection:'EPSG:3946',
          geometryName:'geometry',
          url:'http://localhost:3042/karteis-tests/dev/sem/wfs',

          params: {
              // voir les specs du WFS
              //version: '2.0.0', // 1.1.0 si rien n'est demandé
              //request: 'GetFeature', // GetFeature si rien n'est demandé
              //srsname: 'EPSG:3946',
              typename:'vse:RESAEPCAN' // obligatoire
          }
      }
  })
}

.tooltip {
  display:flex;
  flex-direction:column;
  align-items: center;
}

.tooltip label {
    font-weight: bold;
    display:inline-block;
}

/** on rend les tooltips transparents **/
#MapViewerTooltip {
    background-color:rgba(255,255,255,0.5);
}
#MapViewerTooltip:after {
    border-top-color:rgba(255,255,255,0.5);
}