foss4g-fr 2014 : openlayers 3

OPENLAYERS 3UNE BIBLIOTHÈQUE UNIQUE !

Ou

« Pourquoi OL3 est fantastique ? »

www.camptocamp.com / 2/24

Plan■ Objectifs/Vision OL3 – rappel

■ Exemples de techniques/outils utilisées dans OL3

www.camptocamp.com / 3/24

Objectifs/Vision OL3

www.camptocamp.com / 4/24

Convergence 2D 3D

www.camptocamp.com / 5/24

Vecteur riche/complexe

www.camptocamp.com / 6/24

Les cartes sont des graphiques

www.camptocamp.com / 7/24

Résumé des objectifs■ Richesse fonctionnelle

■ Gestion de données 3D

■ Gestion de vecteurs complexes

■ Qualité des rendus (retina)

■ Performance et robustesse

« Les cartes sont des graphiques »

www.camptocamp.com / 8/24

Techniques/outils utilisées dans OL3

www.camptocamp.com / 9/24

Du vrai vecteur !Les vecteurs sont dessinés très souvent.

■ pendant les animations

■ pendant les interactions (pendant le "pinch-zoom" !)

Avantages :

■ qualité du rendu – pas de "blur" suite à une rotation

■ les labels et icônes ne tournent pas avec la carte

La démo…

www.camptocamp.com / 10/24

PerformanceComment dessiner souvent et obtenir de bonnes performances ?

⇨ Utilisation de techniques et algorithmes adaptés.

On pousse l'implémentation à ses limites !

www.camptocamp.com / 11/24

Simplification des géométriesOn dessine des géométries simplifiées, pour ne pas dessiner des"vertex" qui sont sur le même pixel.

■ Douglas Peucker

■ "Quantization" – maintien de la topologie

La simplification permet aussi un rendu de meilleure qualité auxpetites échelles.

La démo…

www.camptocamp.com / 12/24

BatchingOn minimise les traitements et manipulations de données.

■ calcul des styles

■ simplification des géométries

■ lecture des features dans le R-tree

■ et toutes les implications sur le garbage collector

⇨ Système de "batch/replay" dans le renderer. On réutilise le batchpendant les animations et les interactions.

Important pour WebGL !

La démo…

www.camptocamp.com / 13/24

Sur-simplification et clippingSur-simplification + clipping pour les parties en dehors du viewport.

La démo…

www.camptocamp.com / 14/24

Hit DetectionPas de "hit detection" natif avec Canvas (et WebGL).

⇨ On redessine toute la "scène" dans un canvas de 1x1 px, et onteste si on a une couleur. Réutilisation du batch.

Avantages :

■ détection parfaite au pixel

■ tolérance pour la détection de lignes sur device touch

■ simple et efficace

La démo…

www.camptocamp.com / 15/24

Compilateur ClosureOutil unique dans le monde JavaScript !

■ Renommage des propriétés

■ Élimination du code non utilisé

■ Applatissage des namespaces

■ Dévirtualisation des méthodes

■ "Inlining"

www.camptocamp.com / 16/24

Exemple Compilateur Closuregoog.provide('ANamespace.ASubNamespace.AClass');

// une classeANamespace.ASubNamespace.AClass = function() {this.aProperty = 'prop1';

};

// une méthodeANamespace.ASubNamespace.AClass.prototype.aMethod = function() {this.aProperty = 'change';

};

// une instancevar anInstance = new ANamespace.ASubNamespace.AClass();

// appel d'une méthodeanInstance.aMethod();

compilé en :

window.b=new function(){this.a="prop1"};window.b.a="change";

www.camptocamp.com / 17/24

Avantages du compilateurGérer un gros volume de code.

■ faire des petits "builds" d'OL3

■ faire des "builds" combinant OL3 + application

■ "type-checking"

Mais : bien utiliser le compilateur demande de l'expérience.

www.camptocamp.com / 18/24

Conclusion

www.camptocamp.com / 19/24

Conclusion■ Bibliothèque ambitieuse

■ Techniques innovantes

■ Canvas et WebGL

www.camptocamp.com / 20/24

État actuel■ v3.0.0-beta.5

■ Doc des API grandement améliorée

■ Outil de build "custom" amélioré

www.camptocamp.com / 21/24

Perspectives■ Implémentation WebGL du vecteur

■ Intégration avec Cesium + 3D en général

■ Outils de build en ligne

■ Tutoriel : créer des appli OL3 avec Closure

■ « Amélioration continue »

www.camptocamp.com / 22/24

Merci !

www.camptocamp.com / 23/24

As Soon As Possible!

www.camptocamp.com / 24/24