Expérimenter avec MapLibre GL

IGNF / geotuileur-site

Portail web dédié à la publication de données sous forme de tuiles vectorielles

https://ignf.github.io/geotuileur-site

GNU Affero General Public License v3.0

9 stars 0 forks source link

Expérimenter avec MapLibre GL #84

Closed slafayIGN closed 2 years ago

slafayIGN commented 2 years ago

Toutes les cartes du portail Géotuileur sont affichées avec OpenLayers.

Il existe cependant une bibliothèque de rendu cartographique plus nativement adaptée aux tuiles vectorielles : maplibre/maplibre-gl-js

Il est possible qu'elle permette un gain en performance d'affichage et une meilleure fidélité du rendu des styles puisqu'elle utilise directement le format de style Mapbox alors qu'avec OpenLayers il y a une conversion en style OpenLayers.

A priori 2 plugins seraient à développer pour MapLibre :

la recherche de lieu (il en existe une qui se base sur l'API Mapbox geocoding)
le gestionnaire de couches (layerSwitcher)

slafayIGN commented 2 years ago

Pour une page de test MapLibre on voudrait afficher :

[x] un fond PLANIGN raster WMTS
[x] un couche de tuiles vectorielles avec un style : https://wxs.ign.fr/latuile/geoportail/tms/1.0.0/PCI/metadata.json + https://wxs.ign.fr/static/vectorTiles/styles/PCI/pci.json
[x] un gestionnaire de couche : idéalement en essayant de se rapprocher de celui d'OL (2 couches) mais sinon en utilisant chacune des layers du style (déjà 15 couches pour le style pci.json + la couche WMTS)
[x] des contrôles de zoom, déplacement, rotation, inclinaison
[x] une barre d'échelle
[x] une popup quand on clique sur un objet + éventuellement un rendu de type "sélection"

Il faut produire la même carte avec OL pour avoir 2 pages comparables.

slafayIGN commented 2 years ago

Démo : https://ignf.github.io/openlayers-vs-maplibre/map-maplibre.html

Gestionnaire de couche

Le gestionnaire de couche proposé est une arborescence qui contient le niveau pyramide (pci) et un sous-niveau pour chacune de source-layer décrite dans le style. Le niveau layer est trop fin car dans cette pyramide par exemple chaque source-layer est représentée dans plusieurs layer (contour, toponyme...).

On peut réaliser un gestionnaire de couche plus fin avec MapLibre qu'avec OpenLayers.

Sélection des objets

Avec MapLibre, l'événement onClick est enregistré au niveau de la layer et on a donc plusieurs réactions au même endroit pour un même objet s'il est représenté plusieurs fois, ce qui entraîne plusieurs bulles d'information. Il a été nécessaire de tenter d'identifier les doublons de sélection pour ne pas avoir ces multiples infobulles.

Il peut néanmoins toujours légitimement y avoir plusieurs objets différents en un même endroit.

slafayIGN commented 2 years ago

@lowzonenose qu'est-ce que tu en penses ?

Une intégration sur vectortiles est envisageable après un peu plus de finitions ?

lowzonenose commented 2 years ago

@lowzonenose qu'est-ce que tu en penses ?

Une intégration sur vectortiles est envisageable après un peu plus de finitions ?

maplibre-js est une alternative à Openlayers, plus adapté au format vecteur tuilé. La communauté est bien vivante ! Je ne connais pas les limites de cette librairie. En changeant de librairie, tu risques de perdre en support (ex. Geoportail ou ol-ext de JMV), mais elle me semble adapté à ton besoin.

Bien sûr, l'intégration sur vectortiles me semble indispensable !

slafayIGN commented 2 years ago

Déployé sur IGNF : https://ignf.github.io/openlayers-vs-maplibre/map-maplibre.html