Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OPENLAYERS 3
FOSS4G FR 2016
pierre.giraud@camptocamp.com
Où en est-on ?
Fonctionnalités
Côté technique
Futur
Démos
Où en est-on ?
Un peu d'histoire
Code sprint été 2012
Release alpha 1 en avril 2013
... puis après une longue gestation
Release 3.0.0 sta...
Première utilisation "pour de vrai"
Géoportail suisse - SwissTopo
GeoAdmin.ch
Février 2014
Aujourd'hui
Version 3.15.1
Cycle de release régulier
~ tous les 1 à 1.5 mois
Un petit tour des
fonctionnalités
La carte et la vue
ol.Map & ol.View
La carte est le composant principal
On la configure avec :
un conteneur,
des couches,
des interactions,
une vue.
La vue est...
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
ce...
Les couches et les
sources
ol.layer & ol.source
Les couches indiquent comment afficher les données.
Les sources indiquent la provenance des données et
comment les manipuler.
Quelques sources :
OSM, MapQuest, Bing, ArcGIS,
WMS, WMTS, XYZ,
Image,
Vector (+ ol.format),
TileJSON
Les interactions et les
contrôles
ol.interaction & ol.control
Les interactions gèrent les interactions entre
l'utilisateur et la carte.
Les contrôles sont des composants primitifs ajou...
Quelques interactions :
DragPan, DoubleClickZoom, MouseWheelZoom
DragRotate, PinchZoom,
Draw, Modify
Quelques contrôles :
Zoom
MousePosition
ScaleLine
Attribution
FullScreen
Garçon ?
Un peu de vecteur svp.
Des couches, des sources, et des interactions pour
manipuler des éléments vectoriels.
Et des styles pour représenter tout ...
Couches, sources
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/countries.geojson',
format: new ol.format...
Styles
layer.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.3)'
}),
stroke: new ol....
Styles (bis)
layer.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: '...
Les overlays
ol.Overlay
Pour rajouter facilement des composants (label,
images, popups, etc...) à une coordonnée donnée.
var marker = new ol.Overlay({
position: ol.proj.fromLonLat([5, 45]),
positioning: 'center-center',
element: document.getEl...
Côté technique
Mobile first
OpenLayers 3 a été pensé pour fonctionner sur des
appareils mobiles.
Performances
Support des évènements touc...
Support des navigateurs
modernes
Support des navigateurs IE 9 et supérieur qui permet
de reposer sur des technologies mode...
Code optimisé
Assertions
Typage
Pas de code non utilisé
Performances du code
Compilation &
minification
Avec Google Closure Compiler
Compilation en mode avancé.
Permet :
Vérification du code (typage, ...
Compilation
personalisée
Via un fichier de config
Custom builds
Online builder
Online builder
Compilation OpenLayers
+ Application
Avec Google Closure Compiler
Minification optimale, gestion des dépendances, etc...
Co...
2D -> 3D
OL3 Cesium
Visualiser une carte OL3 sur un globe Cesium.
Démo
Optimisations du rendu
vectoriel
Indexation spatiale,
Animation frames,
Sur-simplification & clipping
Démo fractale
Futur
Suppression des dépendances sur Google Closure
Library
Utilisation de goog.module (vs. goog.provide)
+ de support pour WebGL
(Actuellement uniquement les points)
Démo WebGL
(Financements appréciés)
Démos
Feature animation
Device orientation
Heatmap
UTFGrid
Combination with TurfJS
Advanced editing
Hit detection
Raster reprojection
// Web Mercator
var source = new ol.source.OSM();
var view = new ol.View({
// Korea 2000
projection: '...
Plus d'infos sur
http://openlayers.org/
Merci !
Merci
aux sponsors et
financeurs
Merci
aux contributeurs
Committers ou non
Support et formations
Questions ?
OpenLayers 3
Upcoming SlideShare
Loading in …5
×

OpenLayers 3

924 views

Published on

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

Published in: Technology
  • Be the first to comment

OpenLayers 3

  1. 1. OPENLAYERS 3
  2. 2. FOSS4G FR 2016 pierre.giraud@camptocamp.com
  3. 3. Où en est-on ? Fonctionnalités Côté technique Futur Démos
  4. 4. Où en est-on ?
  5. 5. 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
  6. 6. Première utilisation "pour de vrai" Géoportail suisse - SwissTopo GeoAdmin.ch Février 2014
  7. 7. Aujourd'hui Version 3.15.1
  8. 8. Cycle de release régulier ~ tous les 1 à 1.5 mois
  9. 9. Un petit tour des fonctionnalités
  10. 10. La carte et la vue ol.Map & ol.View
  11. 11. 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.
  12. 12. 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 }) });
  13. 13. Les couches et les sources ol.layer & ol.source
  14. 14. Les couches indiquent comment afficher les données. Les sources indiquent la provenance des données et comment les manipuler.
  15. 15. Quelques sources : OSM, MapQuest, Bing, ArcGIS, WMS, WMTS, XYZ, Image, Vector (+ ol.format), TileJSON
  16. 16. Les interactions et les contrôles ol.interaction & ol.control
  17. 17. Les interactions gèrent les interactions entre l'utilisateur et la carte. Les contrôles sont des composants primitifs ajoutés à la carte.
  18. 18. Quelques interactions : DragPan, DoubleClickZoom, MouseWheelZoom DragRotate, PinchZoom, Draw, Modify
  19. 19. Quelques contrôles : Zoom MousePosition ScaleLine Attribution FullScreen
  20. 20. Garçon ? Un peu de vecteur svp.
  21. 21. Des couches, des sources, et des interactions pour manipuler des éléments vectoriels. Et des styles pour représenter tout ça.
  22. 22. Couches, sources new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/countries.geojson', format: new ol.format.GeoJSON() }) })
  23. 23. 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' }) }));
  24. 24. 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); } });
  25. 25. Les overlays ol.Overlay Pour rajouter facilement des composants (label, images, popups, etc...) à une coordonnée donnée.
  26. 26. var marker = new ol.Overlay({ position: ol.proj.fromLonLat([5, 45]), positioning: 'center-center', element: document.getElementById('marker') }); map.addOverlay(marker);
  27. 27. Côté technique
  28. 28. Mobile first OpenLayers 3 a été pensé pour fonctionner sur des appareils mobiles. Performances Support des évènements touch Compression du code etc...
  29. 29. Support des navigateurs modernes Support des navigateurs IE 9 et supérieur qui permet de reposer sur des technologies modernes (Canvas par exemple).
  30. 30. Code optimisé Assertions Typage Pas de code non utilisé Performances du code
  31. 31. 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.
  32. 32. Compilation personalisée Via un fichier de config Custom builds
  33. 33. Online builder Online builder
  34. 34. Compilation OpenLayers + Application Avec Google Closure Compiler Minification optimale, gestion des dépendances, etc... Compiling application
  35. 35. 2D -> 3D OL3 Cesium Visualiser une carte OL3 sur un globe Cesium. Démo
  36. 36. Optimisations du rendu vectoriel Indexation spatiale, Animation frames,
  37. 37. Sur-simplification & clipping Démo fractale
  38. 38. Futur
  39. 39. Suppression des dépendances sur Google Closure Library
  40. 40. Utilisation de goog.module (vs. goog.provide)
  41. 41. + de support pour WebGL (Actuellement uniquement les points) Démo WebGL (Financements appréciés)
  42. 42. Démos
  43. 43. Feature animation
  44. 44. Device orientation
  45. 45. Heatmap
  46. 46. UTFGrid
  47. 47. Combination with TurfJS
  48. 48. Advanced editing
  49. 49. Hit detection
  50. 50. 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
  51. 51. Plus d'infos sur http://openlayers.org/
  52. 52. Merci !
  53. 53. Merci aux sponsors et financeurs
  54. 54. Merci aux contributeurs Committers ou non
  55. 55. Support et formations
  56. 56. Questions ?

×