Style des features

Retour

Cette section à pour but de montrer quelques exemples d'utilisation de stylisation des features en remplacant la geometry de l'objet: Exemples:

• Pour les objets ponctuels, on peut remplacer la geometry dans le style par un cercle
• Pour les objets lineraires, on peut mettre dans le style un point ou cercle au debut de la ligne, au milieu ou à la fin de la ligne
• Pour les objets polygones, on peut remplacer la geometrie dans le stype par un point ou un cercle

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 stylesPoint = kmapv.Services.createStyle([
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#333',
        width: 2,
    },
     replaceGeometry:{
      fromGeometryType:['Point'], // Liste des types de geometry pour lesquelles on applique le replaceGeometry. Non défini = tout les types
      toGeometryType:'Circle', // Obligatoire : Le type de geometry par laquelle remplacer la geometry initiale de la feature dans le style
      radius:100, // raduis pour un cercle
      units:'m', // l'unité pour un cercle / par defaut en mettre
      // projection:'EPSG:3857', // getMapProjection() : une fonction qui renvoi la projection
      projection: getMapProjection() // Optionnel: La projection de la geometry, on peut aussi utiliser une fonction qui renvoi la geometrie : getMapProjection
                                    // Par defaut on utilise 'EPSG:3857'
    }
}
])
const styles = kmapv.Services.createStyle([
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#333',
        width: 2,
    },
},
{
    replaceGeometry:{
      fromGeometryType:['LineString'],
      toGeometryType:'Point',
      position:'start', //  Optionnel : La position par rapport à l'objet / par defaut au centroid
      projection:'EPSG:3857',
    },
    // style des points
    circle: {

        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#033',
            width: 2,
        }
    }
},
{
    replaceGeometry:{
      fromGeometryType:['LineString'],
      toGeometryType:'Point',
      position:'end',
      projection:'EPSG:3857', // getMapProjection()
    },
    // style des points
    circle: {

        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#303',
            width: 2,
        }
    }
},
{
    replaceGeometry:{
      fromGeometryType:['LineString'],
      toGeometryType:'Circle',
      radius:30,
      units:'m',
      position:'centroid',
      projection:'EPSG:3857', // getMapProjection()
    },
    // remplissage des polygones
    fill: {
        color: 'rgba(255,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#a33',
        width: 2,
    },
    // style des points
    // circle: {

    //     radius: 10,
    //     fill: {
    //         color: '#aaa',
    //     },
    //     stroke: {
    //         color: '#033',
    //         width: 2,
    //     }
    // }

}
])

function getMapProjection() {
  return kmapvInstance.getViewProjection()
}

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


// 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.filter((feature) => feature.geometry.type === 'Point'),
    }, 'layer-point')
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features.filter((feature) => feature.geometry.type !== 'Point'),
    }, 'layer-other')
})