Mapviewer

Filtrage de données

Retour

Cette section à pour but de montrer quelques exemples d'utilisation des filtres de couches:

Cela permet de masquer les données des couches impactées par le filtre ne répondant pas au critère

Les filtres sont défini avec la structure suivante:

  • Groupe : un id, un nom et une description (optionnelle)
    • Filtre : un id, un nom et une description (optionnelle)
      • Un objet décrivant "par calque" quel règle de filtrage appliquer

Exemple :

{
    "ouvs": [ // Affiche pour le calque "ouv" les données ayant TYPOLOGIE = 'REG' et TYPRES = 'EU'
      {
        type: 'equal', // equal | notequal | invalues | notinvalues
        field: 'TYPOLOGIE', // nom du champ de la feature openlayers
        values: 'REG', // valeur ou liste de valeurs
      },
      {
        type: 'equal',
        field: 'TYPRES',
        values: 'EU',
      },
    ]
    "cans": [/** règles pour les "cans"*/]
}

La démo permet de tester l'application de filtres

  • Par API
  • Par l'ajout d'un bouton dans la toolbar permettant d'utilise une IHM
Démo de filtrage
{
  "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:350px;" />
<button onclick="addFeature()" title="Ajoute un ouvrage Type réseau EU"> Add EU feature</button>
<button onclick="changeSelection('EU')" title="Change le type de réseau de l'élement sélectionné"> change selected (EU)</button>
<button onclick="changeSelection('EP')" title="Change le type de réseau de l'élement sélectionné"> change selected (EP)</button>
<button onclick="changeSelection('UN')" title="Change le type de réseau de l'élement sélectionné"> change selected (UN)</button>
<div style="display:flex;flex-direction:row;">
  <table>
    <tr>
      <th>Application des filtres par api</th>
    </tr>
    <tr class="row" id="feat-1" onclick="onClickClear()"  >
      <td style="color:red;">Retirer le filtre courant</td>
    </tr>
    <tr class="row" id="feat-1" onclick="onClick('map-eu')"  >
      <td>type rés: Filtre eau usée</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('map-ep')"  >
      <td>type rés: filtre eau pluviale</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('map-un')"  >
      <td>type rés: filtre eau unitaire</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('grilles-bouches-ep')"  >
      <td>typologie ouvrage: Grille / Bouches</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('reg-eu')"  >
      <td>typologie ouvrage: Regards Eau usée</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('reg-ep')"  >
      <td>typologie ouvrage: Regards Eau pluviale</td>
    </tr>
    <tr class="row" id="feat-2" onclick="onClick('brt')"  >
      <td>Boite de branchement</td>
    </tr>
  </table>
</div>


// 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: [673336.2187669694, 6303500.5366335241],
    defaultZoom: 18,
    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 stylesOuvs = {
    BRT: kmapv.Services.createStyle(
    {
        // style des points
        circle: {
            radius: 5,
            fill: {
                color: 'rgba(200, 50, 50, 0.6)',
            },
            stroke: {
                color: 'rgba(200, 50, 50, 0.9)',
                width: 1,
            }
        }
    }),
    default: kmapv.Services.createStyle(
    {
        // style des points
        circle: {
            radius: 5,
            fill: {
                color: 'rgba(170, 170, 170, 0.6)',
            },
            stroke: {
                color: 'rgba(136, 136, 136, 0.9)',
                width: 1,
            }
        }
    })
}

const stylesCans= {
    EU: kmapv.Services.createStyle({
        // style les lignes
        stroke: {
            color: 'rgba(255, 0, 0, 1)',
            width: 2,
        },
    }),
    UN: kmapv.Services.createStyle({
        // style les lignes
        stroke: {
            color: 'rgba(0, 255, 0, 1)',
            width: 2,
        },
    }),
    EP: kmapv.Services.createStyle({
        // style les lignes
        stroke: {
            color: 'rgba(70, 130, 180, 1)',
            width: 2,
        },
    }),
    default: kmapv.Services.createStyle({
        // style les lignes
        stroke: {
            color: '#333',
            width: 2,
        },
    })
}

const stylesSelected = kmapv.Services.createStyle(
{
    // remplissage des polygones
    fill: {
        color: 'rgba(0,0,255,0.1)',
    },
    // style les lignes
    stroke: {
        color: '#00F',
        width: 2,
    },
    // style des points
    circle: {
        radius: 10,
        fill: {
            color: 'rgba(0,0,255,0.3)',
        },
        stroke: {
            color: '#00F',
            width: 2,
        }
    }
})

const getStyleCans = ({ feature, selected }) => {
    const typRes = feature.get("TYPRES")
    return selected ? stylesSelected : stylesCans[typRes] || stylesCans.default
}

const getStyleOuvs = ({ feature, selected }) => {
    const typologie = feature.get("TYPOLOGIE")
    return selected ? stylesSelected : stylesOuvs[typologie] || stylesOuvs.default
}

// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
    title: "Canalisations",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'cans',
    selectable: true,
    style: getStyleCans,
})
// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
    title: "Ouvrages",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'ouvs',
    selectable: true,
    minZoom: 17,
    maxZoom: 22,
    style: getStyleOuvs,
})

// 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/feature-cans.json').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'cans')
})

fetch('../../../../datas/feature-ouvs.json').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'ouvs')
})

// exemple ajot de groupe, puis de filtre, puis de layers
kmapvInstance.layerFilter.addGroup("groupTypeRes",{label:"Réseau",sublabel:"Type de réseau"})
kmapvInstance.layerFilter.addFilter("map-eu",{idGroup:'groupTypeRes',label:"Eau usée",sublabel:"Type de réseau eau usée"})
kmapvInstance.layerFilter.addFilter("map-ep",{idGroup:'groupTypeRes',label:"Eau pluviale",sublabel:"Type de réseau eau pluviale"})
kmapvInstance.layerFilter.addFilter("map-un",{idGroup:'groupTypeRes',label:"Réseau Unitaire",sublabel:"Type de réseau eau unitaire"})

kmapvInstance.layerFilter.addLayers("map-eu",{
    "cans": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "EU"
            ]
        }
    ],
    "ouvs": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "EU"
            ]
        }
    ]
})

kmapvInstance.layerFilter.addLayers("map-ep",{
    "cans": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "EP"
            ]
        }
    ],
    "ouvs": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "EP"
            ]
        }
    ]
})
kmapvInstance.layerFilter.addLayers("map-un",{
    "cans": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "UN"
            ]
        }
    ],
    "ouvs": [
        {
            "type": "inValues",
            "field": "TYPRES",
            "values": [
                "UN"
            ]
        }
    ]
})

// exemple: ajout de groupe puis ajout de
kmapvInstance.layerFilter.addGroup("groupTypologie",{label:"Typologie",sublabel:"Typologie"})

//kmapvInstance.layerFilter.addFilter("map-un",{idGroup:'groupTypeRes',label:"Réseau Unitaire",sublabel:"Type de réseau eau unitaire"})

kmapvInstance.layerFilter.addLayers({idFilter: 'grilles-bouches-ep', idGroup:'groupTypologie',label:"Grille / Bouches",sublabel:"typologie ouvrage Grille / Bouches"},
{
    "ouvs": [
        {
        type: 'inValues',
        field: 'TYPOLOGIE',
        values: ['GRI', 'AVA', 'AVG'],
        },
    ]
})

kmapvInstance.layerFilter.addLayers({idFilter: 'ref-eu', idGroup:'groupTypologie',label:"Regards Eau usée"},
{
    "ouvs": [
      {
        type: 'equal',
        field: 'TYPOLOGIE',
        values: 'REG',
      },
      {
        type: 'equal',
        field: 'TYPRES',
        values: 'EU',
      },
    ]
})

kmapvInstance.layerFilter.addLayers({idFilter: 'reg-ep', idGroup:'groupTypologie',label:"Regards Eau pluviale"},
{
    "ouvs": [
      {
        type: 'equal',
        field: 'TYPOLOGIE',
        values: 'REG',
      },
      {
        type: 'equal',
        field: 'TYPRES',
        values: 'EP',
      },
    ]
})

// sans groupe
kmapvInstance.layerFilter.addLayers({idFilter: 'brt', label:"Boite de branchement"},
{
    "ouvs": [
      {
        type: 'equal',
        field: 'TYPOLOGIE',
        values: 'BRT',
      },
    ]
})

// ajout a la toolbar:
kmapvInstance.horizontalToolbar.addLayerFilterTool()

// gestion des filtres par api
function onClick(id) {
    kmapvInstance.layerFilter.applyFilter(id)
}
function onClickClear() {
    kmapvInstance.layerFilter.clear()
}

function addFeature() {
    // ajoute une feature type
    const feature = {
        "type" : "Feature",
        "id": "added_feature",
        "geometry" : {
            "type" : "Point",
            "coordinates" : [ 673336, 6303460 ]
        },
        "properties" : {
            "TYPRES" : "EU",
            "TYPOLOGIE" : "REG",
            "PRIVE" : "N"
        }
    };

    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: [feature],
    }, 'ouvs');

}

function changeSelection (typeres) {

    const currentSelection = kmapvInstance.dataLayer.getCurrentSelection()
    if (currentSelection.length === 1) {
        currentSelection[0].set('TYPRES',typeres)
    }
}





table {
  margin-top: 3px;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  cursor: pointer;
  border: 1px solid #dddddd;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
Dernière mise à jour:
Contributors: Jerome Mare