Geospatial – Actualités

OpenLayers 3 – un grand nombre de vecteurs avec WebGL

28 février 2014

Nous avons récemment travaillé sur un prototype OpenLayers 3 montrant que WebGL permet d’afficher un très grand nombre d’objets vectoriels sur une carte, bien plus qu’avec Canvas et SVG.

webgl

Cet exemple est le résultat de ce prototype. Dans cet exemple, 100’000 points sont dessinés avec WebGL. Les points sont des antennes GSM issues de la base de données opencellidmerci au projet opencellid.

Pour que cet exemple fonctionne, il faut que le navigateur prenne en charge WebGL. Si ce n’est pas le cas, alors le message « This map requires a browser that supports WebGL » sera affiché en rouge sous la carte. Si le navigateur prend en charge WebGL, des points jaunes (les antennes GSM) seront affichés sur la carte.

Vous pouvez observer que la carte reste très réactive pendant le déplacement et le zoom. Dessiner 100’000 points à chaque « frame » d’animation n’est pas un problème pour WebGL. Nous avons également fait des tests avec un million de points et le déplacement et le zoom de la carte restent très réactifs. Nous n’utilisons pas un million de points dans l’exemple car le temps de chargement réseau des données devient problématique.

Ce prototype utilise le mode « draw points » de WebGL (gl.Points), qui est typiquement utilisé pour les effets de particules (explosions, flammes, fumée, …). Ce mode ne permet pas de réaliser des styles complexes (e.g. cercle avec des contours) ; OpenLayers 3 utilisera des triangles et des textures pour l’affichage de points dans le futur.

Dans ce prototype, TinyWKB de Nicklas Avéns est utilisé comme format de transport des données. Ce format stocke les 100’000 points dans un fichier de 684 KO (non compressé). Les mêmes données dans un fichier GeoJSON pèsent 14 Mo. Nous investiguons actuellement l’utilisation d’autres formats binaires. Nous cherchons aussi d’autres stratégies de chargement que la stratégie « charger tout d’un coup » utilisée dans cet exemple.

Ce prototype démontre concrètement que WebGL permet d’afficher une très grande quantité de données vecteur – même sur des plateformes mobiles (prenant en charge WebGL). Nous explorons activement ce domaine.

N’hésitez pas à nous contacter pour en savoir plus et comprendre toutes les nouvelles possibilités offertes par WebGL.