1. OPENLAYERS 3
UNE BIBLIOTHÈQUE UNIQUE !

2. Ou
« Pourquoi OL3 est fantastique ? »
www.camptocamp.com / 2/24

3. Plan
■ Objectifs/Vision OL3 – rappel
■ Exemples de techniques/outils utilisées dans OL3
www.camptocamp.com / 3/24

4. Objectifs/Vision OL3
www.camptocamp.com / 4/24

5. Convergence 2D 3D
www.camptocamp.com / 5/24

6. Vecteur riche/complexe
www.camptocamp.com / 6/24

7. Les cartes sont des graphiques
www.camptocamp.com / 7/24

8. 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

9. Techniques/outils utilisées dans OL3
www.camptocamp.com / 9/24

10. 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

11. Performance
Comment 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

12. Simplification des géométries
On 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é aux
petites échelles.
La démo…
www.camptocamp.com / 12/24

13. Batching
On 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 batch
pendant les animations et les interactions.
Important pour WebGL !
La démo…
www.camptocamp.com / 13/24

14. Sur-simplification et clipping
Sur-simplification + clipping pour les parties en dehors du viewport.
La démo…
www.camptocamp.com / 14/24

15. Hit Detection
Pas de "hit detection" natif avec Canvas (et WebGL).
⇨ On redessine toute la "scène" dans un canvas de 1x1 px, et on
teste 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

16. Compilateur Closure
Outil 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

17. Exemple Compilateur Closure
goog.provide('ANamespace.ASubNamespace.AClass');
// une classe
ANamespace.ASubNamespace.AClass = function() {
this.aProperty = 'prop1';
};
// une méthode
ANamespace.ASubNamespace.AClass.prototype.aMethod = function() {
this.aProperty = 'change';
};
// une instance
var anInstance = new ANamespace.ASubNamespace.AClass();
// appel d'une méthode
anInstance.aMethod();
compilé en :
window.b=new function(){this.a="prop1"};window.b.a="change";
www.camptocamp.com / 17/24

18. Avantages du compilateur
Gé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

19. Conclusion
www.camptocamp.com / 19/24

20. Conclusion
■ Bibliothèque ambitieuse
■ Techniques innovantes
■ Canvas et WebGL
www.camptocamp.com / 20/24

21. É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

22. 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

23. Merci !
www.camptocamp.com / 23/24

24. As Soon As Possible!
www.camptocamp.com / 24/24