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 stable en août 2014

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 l'objet qui va contrôler l'affichage de la carte.

• On la configure avec :
• un centre,
• des résolutions.

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
  })
});

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 ajoutés à la carte.

• 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 ça.

Couches, sources

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

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'
  })
}));

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);
  }
});

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.getElementById('marker')
});
map.addOverlay(marker);
          

Côté technique

Mobile first

OpenLayers 3 a été pensé pour fonctionner sur des appareils mobiles.

• Performances
• Support des évènements touch
• Compression du code
• etc...

Support des navigateurs modernes

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

Code optimisé

Compilation & minification

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

Compiling application

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)

(Financements appréciés)

Démos

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
});

Plus d'infos sur

http://openlayers.org/

Merci !

Merci

aux sponsors et financeurs

Merci

aux contributeurs

Committers ou non

Support et formations

Questions ?