Lignes de rappel

Retour

Cette section à pour but de montrer quelques exemples d'utilisation de ligne de rappel sur la carte:

• On combine 3 styles:
  • Le style du point
  • Le style du texte qui utilise les options offsetX et offsetY
  • Le style de ligne de rappel qui utilise une option replaceGeometry de type ligne-rappel
    • Avec les propriétés offsetX, offsetY et map
  • Du fait de la méthode de calcul d'une nouvelle géométrie de ligne de rappel a la fin de chaque zoom, la ligne de rappel est recalculée uniquement à ce moment et produit un artefact visuel pendant le zoom

style de ligne de rappel

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

// données au format geojson
const features = [
{
    id: 1,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444750, 6094280]
    },
    properties: {
        valeur: 'Libellé 1',
        valeur2: 'sous-libellé 1',
    }
},
{
  id: 2,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094320]
    },
    properties: {
      valeur: 'Libellé 2',
      valeur2: 'sous-libellé 2',
    }
},
]


// 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 styles = kmapv.Services.createStyle([
  {
    // style les lignes de rappel
    stroke: {
        color: '#333',
        width: 2,
    },
    replaceGeometry:{
      toGeometryType:'ligne-rappel', // Obligatoire : Le type de geometry par laquelle remplacer la geometry initiale de la feature dans le style
        offsetY: -50,
        offsetX: -50,
        map: kmapvInstance.getMap()
    }
  },
  {
      // style des points
      circle: {
          radius: 10,
          fill: {
              color: '#aaa',
          },
          stroke: {
              color: '#333',
              width: 2,
          }
      }
  },
  {
      // style des textes deportés
      text: {
        template: ['valeur','\n',{ template:'valeur2' , font:'italic 10px sans-serif'}],
        font:"12px sans-serif",
        // "boite" autour du texte
        backgroundFill: {
            color:"#FFF"
        },
        backgroundStroke: {
            color: '#333',
            width: 2,
        },
        padding: [2,5,2,5],
        // contour du texte
        stroke: {
            color: '#aaa',
            width: 1,
        },
        // couleur du texte
        fill: {
            color: '#333',
        },
        offsetY: -50,
        offsetX: -50
    },
  }
])

// 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: styles,
})


// ajout des données dans le calque
kmapvInstance.dataLayer.addGeojsonFeatures({
    type: 'FeatureCollection',
    features,
}, 'identifiant-du-calque')