Exercices Hydro (Tuiles Vectorielles)

Exercice - Hydro Tuiles vectorielles#

Objectif identique aux précédents, mais avec un flux tuilé TMS en tuiles vectorielles.

(basez-vous sur l’exemple précédent)
ajoutez une nouvelle couche de tuiles vectorielles (ol.layer.VectorTile/ol.source.VectorTile)
- URL de la source : https://api.ensg.eu/geoserver/gwc/service/tms/1.0.0/ensg:hydro@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf
- format de la source : ol.format.MVT()
- styles à votre convenance

Nous allons maintenant réaliser la partie interaction (survol/click). Mais il se pose 2 contraintes :

une interaction ol.interaction.Select ne peut pas s’appliquer sur une couche de tuiles vectorielles, il faut donc utiliser les méthodes d’interactions génériques de la carte (map.getFeaturesAtPixel), récupérer/conserver l’élément cliqué, et lui appliquer un style spécifique
les features graphiques étant découpées en tuiles, il nous faut dupliquer notre couche de features complètes pour créer deux styles différents

Pour le survol, ajoutez un événement pointermove sur la carte

récupérez les features pour le pixel donné
vous pouvez filtrer avec layerFilter
modifiez le curseur de la souris (map.getTargetElement().style.cursor = features.length ? 'pointer' : '')

Pour le click :

tout d’abord, dupliquez la couche en réutilisant la source du premier calque, et placez cette couche en dessous
```
new ol.layer.VectorTile({
    source: layer.getSource(),
}
```

ajoutez un événement click sur la carte

récupérez les features pour le pixel donné
- si vous avez une feature, conserver son identifiant (feature.getId()) dans une variable globale
- si pas de feature, vider la variable globale

créez un style dynamique pour la couche de sélection, basé sur cet identifiant

// couche de sélection
new ol.layer.VectorTile({
    source: layer.getSource(),
    style: function (feature) {
        if (feature.getId() == selection) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'mediumblue',
                    width: 7
                }),
            });
        }
    },
});

enfin, forcez la mise à jour du rendu graphique quand nécessaire (selectionLayer.changed())
- quand on change la feature sélectionnée