Label des features

Cette section à pour but de montrer quelques exemples d'utilisation des libellées utilisant une popriété d'objet':

template peut être une chaine de caractère: nom de propriété ou template lodashopen in new window <%= "text" + nomprop %> (ou text <%= nomprop %> suite de texte) ou passage a la ligne '\n'
ou un objet paramétrage: {template,font,forEach} :
- template: chaine de caractère, nom de propriété ou template lodash
- font: font de cette ligne, sinon prend la font défini pour le style texte
- forEach: si ce style est défini pour un cluster, ce template s'appplique à chaques feature du cluster
- addCarriageReturn: ajoute un saut de ligne avant le prochain template (équivaleur ajouter '\n' dans un template)
Tableau de template ou d'objet paramétrage: créer un style rich ou chaque élement du tableau
L'API se base sur les styles de texte OpenLayersopen in new window
Quelques exemples possible sur le site Openlayers:

style

{
  "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:300px;" />


// 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: [-444800, 6094400],
    defaultZoom: 17,
    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 fond de plan OSM
kmapvInstance.backgroundLayer.addOSM('background', { title: 'open street map', zIndex: 0 })

// styles des données
const style = kmapv.Services.createStyle(
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#333',
        width: 2,
    },
    // style des points
    circle: {
        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#333',
            width: 2,
        }
    },
    text: {
        // template: '<%= type + " - " + valeur %>', // => texte utilisant un template : un seul texte
        // template: ['<%= "feature type : " + type %>','\n','<%= valeur %>'], // => équivalent openlayers ["feature type : " + type,'','\n','', valeur,''] : type au dessus de valeur en utilisant la font du style texte
        template: [{template:'<%= valeur %>',font:'bold 13px Calibri,sans-serif'},' <%= type %>','\n',{ template:'<%= valeur %>', font:'italic 11px Calibri,sans-serif',}], // => équivaleur  [valeur,'bold 13px Calibri,sans-serif',type,'','\n','', valeur,'italic 11px Calibri,sans-serif'] : type au dessus de valeur en utilisant la font du style texte pour type et la typo italic pour valeur
        //template: 'valeur', // => on met la propriété valeur
        //template: ['type','\n','valeur'], // => on met les propriétés valeur une au dessus de l'autre
        /*template:[{
          template: '<%= "nombre: " + features.length %>'
        },
        '\n',
        {
          template: 'valeur',
          forEach: true // s'appliques a toutes les features (style de cluster)
          addCarriageReturn: passe a la ligne
        }]*/

        font:"12px sans-serif",
        // "boite" autour du texte
        backgroundFill: {
            color:"#FFF"
        },
        // contour du texte
        stroke: {
            color: '#aaa',
            width: 1,
        },
        // couleur du texte
        fill: {
            color: '#333',
        },

    },
})


/*function getStyle({feature}) {

    // pour chaque feature on set le text a afficher
    style.getText().setText(feature.get("valeur"))
    // Puis on change le placement afin de suivre les lignes
    style.getText().setPlacement(feature.getGeometry().getType() === "LineString" ? "line" : "Point")
    return style
}*/

// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
    title: "Calque de donnée",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'identifiant-du-calque',
    selectable: true,
    hoverable: true,
    style: style,
})


// ajout des données au format geojson dans le calque
// !!!! Dans CODEPEN remplacer ../../../../datas/features-base.json par https://karteis.sct.saas-gfi.eu/documentation/datas/features-base.json
fetch('../../../../datas/features-base.json').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'identifiant-du-calque')
})

# Label des features

Label des features