Style des features

Retour

Cette section à pour but de montrer quelques exemples d'utilisation de stylisation des points sur la carte:

• L'API propose des styles prédéfinis via kmapv.Services.styleHelpers
• L'API permet de styliser les points avec des cercles, forme ou image (doc à faire)

style de point

{
  "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;" />
<select onchange="updateStyle(this.value)">
    <option value="0">carré</option>
    <option value="1">carré orange</option>
    <option value="2">triangle</option>
    <option value="3">étoile</option>
    <option value="4">croix</option>
    <option value="5">diamant</option>
    <option value="6">plus</option>
    <option value="7">cercle</option>
    <option value="8">forme personalisée</option>
    <option value="9">superposé</option>
</select>

// données au format geojson
const features = [
{
    id: 1,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444750, 6094320]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'petite'
    }
},
{
    id: 2,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094320]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'moyen'
    }
},
]


// 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
let styles =null


function updateStyle(id) {

  switch (id) {

    case "1":
      styles =  kmapv.Services.createStyle([[kmapv.Services.styleHelpers.square,kmapv.Services.styleHelpers.orangeShapeStroke]])
      break
    case "2":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.triangle)
      break
    case "3":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.star)
      break
    case "4":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.cross)
      break
    case "5":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.diamond)
      break
    case "6":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.plus)
      break
    case "7":
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.circle)
      break
    case "8":
      styles =  kmapv.Services.createStyle({
                  shape: {
                    fill: {color:"#FFF"},
                    stroke: {color:"red"},
                    radius: 10,
                    points: 5,
                    radius: 10,
                    angle: Math.PI / 5 + (180 * (Math.PI / 180))
                  }
                })
      break
    case "9":
      styles =  kmapv.Services.createStyle([
                [kmapv.Services.styleHelpers.square,{shape:{radius:20}}],
                [kmapv.Services.styleHelpers.circle,kmapv.Services.styleHelpers.orangeCircleStroke,{circle:{fill:{color:"rgba(255,100,0,0.2)"}}}],
                ])
      break
    default:
      styles =  kmapv.Services.createStyle(kmapv.Services.styleHelpers.square)
      break
  }
  kmapvInstance.refreshMap()
  return
}

updateStyle()

// on passe par une fonction pour renvoyer le style demandé
function getStyle() {
    return styles
}

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


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