Présentation d'OpenLayers 3 : fonctionalités, techniques et démos

1. OPENLAYERS 3

2. FOSS4G FR 2016
pierre.giraud@camptocamp.com

4. Où en est-on ?
Fonctionnalités
Côté technique
Futur
Démos

5. Où en est-on ?

6. Un peu d'histoire
Code sprint été 2012
Release alpha 1 en avril 2013
... puis après une longue gestation
Release 3.0.0 stable en août 2014

7. Première utilisation "pour de vrai"
Géoportail suisse - SwissTopo
GeoAdmin.ch
Février 2014

8. Aujourd'hui
Version 3.15.1

9. Cycle de release régulier
~ tous les 1 à 1.5 mois

10. Un petit tour des
fonctionnalités

11. La carte et la vue
ol.Map & ol.View

12. La carte est le composant principal
On la configure avec :
un conteneur,
des couches,
des interactions,
une vue.
La vue est l'objet qui va contrôler l'affichage de la carte.
On la configure avec :
un centre,
des résolutions.

13. var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.fromLonLat([5, 45]),
zoom: 4
})
});

14. Les couches et les
sources
ol.layer & ol.source

15. Les couches indiquent comment afficher les données.
Les sources indiquent la provenance des données et
comment les manipuler.

16. Quelques sources :
OSM, MapQuest, Bing, ArcGIS,
WMS, WMTS, XYZ,
Image,
Vector (+ ol.format),
TileJSON

17. Les interactions et les
contrôles
ol.interaction & ol.control

18. Les interactions gèrent les interactions entre
l'utilisateur et la carte.
Les contrôles sont des composants primitifs ajoutés à
la carte.

19. Quelques interactions :
DragPan, DoubleClickZoom, MouseWheelZoom
DragRotate, PinchZoom,
Draw, Modify

20. Quelques contrôles :
Zoom
MousePosition
ScaleLine
Attribution
FullScreen

21. Garçon ?
Un peu de vecteur svp.

22. Des couches, des sources, et des interactions pour
manipuler des éléments vectoriels.
Et des styles pour représenter tout ça.

23. Couches, sources
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/countries.geojson',
format: new ol.format.GeoJSON()
})
})

24. Styles
layer.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3'
})
}));

25. Styles (bis)
layer.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: 'orange'})
}),
geometry: function(feature) {
var coordinates = feature.getGeometry()
.getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
});

26. Les overlays
ol.Overlay
Pour rajouter facilement des composants (label,
images, popups, etc...) à une coordonnée donnée.

27. var marker = new ol.Overlay({
position: ol.proj.fromLonLat([5, 45]),
positioning: 'center-center',
element: document.getElementById('marker')
});
map.addOverlay(marker);

28. Côté technique

29. Mobile first
OpenLayers 3 a été pensé pour fonctionner sur des
appareils mobiles.
Performances
Support des évènements touch
Compression du code
etc...

30. Support des navigateurs
modernes
Support des navigateurs IE 9 et supérieur qui permet
de reposer sur des technologies modernes (Canvas par
exemple).

31. Code optimisé
Assertions
Typage
Pas de code non utilisé
Performances du code

32. Compilation &
minification
Avec Google Closure Compiler
Compilation en mode avancé.
Permet :
Vérification du code (typage, assertions),
Optimisation,
Gestion des dépendances,
Minification et obfuscation.

33. Compilation
personalisée
Via un fichier de config
Custom builds

34. Online builder
Online builder

35. Compilation OpenLayers
+ Application
Avec Google Closure Compiler
Minification optimale, gestion des dépendances, etc...
Compiling application

36. 2D -> 3D
OL3 Cesium
Visualiser une carte OL3 sur un globe Cesium.
Démo

37. Optimisations du rendu
vectoriel
Indexation spatiale,
Animation frames,

38. Sur-simplification & clipping
Démo fractale

39. Futur

40. Suppression des dépendances sur Google Closure
Library

41. Utilisation de goog.module (vs. goog.provide)

42. + de support pour WebGL
(Actuellement uniquement les points)
Démo WebGL
(Financements appréciés)

43. Démos

44. Feature animation

45. Device orientation

46. Heatmap

47. UTFGrid

48. Combination with TurfJS

49. Advanced editing

50. Hit detection

51. Raster reprojection
// Web Mercator
var source = new ol.source.OSM();
var view = new ol.View({
// Korea 2000
projection: 'EPSG:5179',
center: [14229000, 4398000],
zoom: 7
});
raster reprojection

52. Plus d'infos sur
http://openlayers.org/

53. Merci !

54. Merci
aux sponsors et
financeurs

55. Merci
aux contributeurs
Committers ou non

56. Support et formations

57. Questions ?