OpenLayers 3


Einführung, Verwendungsbeispiele und technische Highlights

Marc Jansen, terrestris
Andreas Hocevar, Boundless

ol3


Was? Wie?
& Warum?

Marc Jansen, terrestris
Andreas Hocevar, Boundless

Gliederung

  • Über …
  • OpenLayers
  • ol3
    • Altes & Neues
    • Beispiele
    • Highlights
  • Fazit & Ausblick

Über uns

ol3-Kernentwickler
Marc Jansen
terrestris GmbH & Co. KG

@marcjansen

Andreas Hocevar
Boundless
@ahocevar

Über terrestris

  • terrestris.de
  • OpenSource GIS aus Bonn
  • Entwicklung, Projekte & Support/Schulung
  • Beratung, Planung, Implementierung & Wartung

Über Boundless

  • boundlessgeo.com
  • Boundless reduziert die Kosten freier Software
  • Governance in der FOSSGIS Community

Über diesen Vortrag

  • Highlights
  • Beispiele
  • Live-Demos
  • Code-Snippets
  • v3.0.0.beta2

Altes & Neues

OpenLayers

  • Sehr verbreitete JavaScript-Bibliothek für dynamische & webbasierte Kartenanwendungen
  • v. 2.0 ⇒ 7,5 Jahre alt

OpenLayers

  • 12 Punkt-Releases
  • > 6.000 Commits, ~100 Beitragende
  • Zahlreiche Features:
    • Layertypen,
    • Controls,
    • Formate,
    • Mobile …

Aber…

  • ~7 Jahre alte Architektur
  • Modernste Web-Technologien
  • Moderne Browser

…daher…

Wir wollen ein neues OpenLayers!

ol3

Was ist neu?

  • de facto: Alles
  • Kompletter rewrite-from-scratch
  • teilweise Tests (Daten) übernommen

Was ist neu?

Closure Compiler


ol.format.XMLFeature.prototype.readFeatures = function(source) {
  if (ol.xml.isDocument(source)) {
    return this.readFeaturesFromDocument(/** @type {Document} */ (source));
  } else if (ol.xml.isNode(source)) {
    return this.readFeaturesFromNode(/** @type {Node} */ (source));
  } else if (goog.isString(source)) {
    var doc = ol.xml.load(source);
    return this.readFeaturesFromDocument(doc);
  } else {
    goog.asserts.fail();
    return [];
  }
};
                    
… kompiliert:

l.Ga=function(a){return Kn(a)?fo(this,a):Nn(a)?this.$b(a):la(a)?(a=Rn(a),fo(this,a)):[]};                    
Closure is a big buyin, but probably worth it. --tmcw
Ja und Ja!

Was bleibt gleich?

  • Vielseitig verwendbar
  • Modern implementiert
  • Performant programmiert
  • Erweiter- und anpassbar

Was bleibt gleich?

  • Einfach zu verstehen
  • Standardkonform
  • Cross-Anything (Browser, Plattform & Endgerät)
  • Vollständig dokumentiert
  • Verlässlich in der Verwendung

Beispiele

Hallo, Welt

ol3js.org/en/master/examples/simple.html

Code


  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View2D({
      center: [0, 0],
      zoom: 2
    })
  });
                    

OpenLayers 2.x

  • 1 × OpenLayers.Map
    • n × OpenLayers.Layer.Xxx
    • n × OpenLayers.Control.Yyy

ol3

  • 1 × ol.Map
    • 1 × ol.View (2D/3D)
    • n × ol.interaction.Zzz
    • n × ol.control.Yyy
    • n × ol.layer.Xxx
      • 1 × ol.source.Xxx

50.000 Koordinaten

ol3js.org/en/master/examples/igc.html

Code


  var vectorSource = new ol.source.IGC({
    urls: [
      'data/igc/Clement­Latour.igc' // etc.
    ]
  });

  var styleFunction = function(feature, resolution) {
    // ...
    return styleArray;
  };

  var layer = new ol.layer.Vector({
    source: vectorSource,
    styleFunction: styleFunction
  });
                    

Drag & Drop / Formate

ol3js.org/en/master/examples/drag-and-drop.html

Code 1


  // Erzeugung einer spezifischen Interaktion:
  var dragAndDropInteraction = new ol.interaction.DragAndDrop({
    formatConstructors: [
      ol.format.GPX,
      ol.format.GeoJSON // ..
    ]
  });

  // Erweitern der Standardinteraktionen &
  // Erzeugung der Karte mit den Interaktionen 
  var interactions = ol.interaction.defaults(); 
  var map = new ol.Map({ 
    interactions: interactions.extend([ dragNDropInteraction ]), 
    // ... 
  }
                    

Code 2


dragAndDropInteraction.on('addfeatures', function(event) {
  var vectorSource = new ol.source.Vector({
    features: event.features,
    projection: event.projection
  });
  map.getLayers().push(new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
  }));
  var view2D = map.getView().getView2D();
  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
});
                    

Technische Highlights

Performance Replay-API

http://ol3js.org/en/master/examples/fractal.html

786.433
Punkte!

Performance R-Tree

https://github.com/imbcmdth/RTree

Performance R-Tree

https://github.com/mourner/rbush

pre-/postcompose API

http://ol3js.org/en/master/examples/layer-spy.html

pre-/postcompose API

// Clipping vor dem Rendern
imagery.on('precompose', function(event) {
  var ctx = event.context;
  ctx.save();
  ctx.beginPath();
  if (mousePosition) {
    // nur den Umkreis des Mauscursors zeigen
    ctx.arc(mousePosition[0], mousePosition[1], radius, 0, 2 * Math.PI);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.stroke();
  }
  ctx.clip();
});

// Aufräumen nach dem Rendern
imagery.on('postcompose', function(event) {
  var ctx = event.context;
  ctx.restore();
});
                    

Fazit & Ausblick

Ready for production?

  • Beta - API kann und wird sich ändern
  • Hohe Code-Qualität bereits jetzt
  • Dokumentation noch im Aufbau
  • Zusammenspiel mit Bibliotheken

Ready for production?

map.geo.admin.ch , Code

Zukunft / Roadmap

  • WebGL-Vektoren
  • API Review
  • API Stabilität
  • API Dokumentation
  • Kollaboration vereinfachen
  • Custom-build-Tool

…Integration von Cesium…

… und dann …

v3.0.0 final

… bald 😇

Vielen Dank für die Aufmerksamkeit


Fragen & Anmerkungen?


Impressum

Impressum