Das Dokument bietet eine Einführung in OpenLayers 3, eine weit verbreitete JavaScript-Bibliothek für dynamische Kartenanwendungen. Es beschreibt die neuesten technischen Highlights, zum Beispiel die vollständige Neuausrichtung der Software zur Unterstützung moderner Webtechnologien und die Einführungen von Funktionen wie Drag-and-Drop sowie die Implementierung von API-Entwicklungen für verbesserte Performance. Es wird auch auf die zukünftigen Entwicklungen und Möglichkeiten zur Zusammenarbeit im Open-Source-Bereich eingegangen.

1. OPENLAYERS3
EINFÜHRUNG,
VERWENDUNGSBEISPIELEUND
TECHNISCHEHIGHLIGHTS
Marc Jansen, terrestris
Andreas Hocevar, Boundless

2. ol3
WAS?WIE?
&WARUM?
Marc Jansen, terrestris
Andreas Hocevar, Boundless

3. GLIEDERUNG
Über …
OpenLayers
ol3
Altes & Neues
Beispiele
Highlights
Fazit & Ausblick

4. ÜBERUNS
OL3-KERNENTWICKLER
Marc Jansen
terrestris GmbH & Co. KG
jansen@terrestris.de
@marcjansen
@selectoid
Andreas Hocevar
Boundless
ahocevar@boundlessgeo.com
@ahocevar
@ahoce

5. ÜBERTERRESTRIS
OpenSource GIS aus Bonn
Entwicklung, Projekte &
Support/Schulung
Beratung, Planung,
Implementierung &
Wartung
@terrestris
@terrestrisde
terrestris.de

6. ÜBERBOUNDLESS
Boundless reduziert die
Kosten freier Software
Governance in der
FOSSGIS Community
@boundlessgeo
@boundlessgeo
boundlessgeo.com

7. ÜBERDIESENVORTRAG
Highlights
Beispiele
Live-Demos
Code-Snippets
v3.0.0.beta2

8. ALTES&NEUES

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

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

11. ABER…
~7 Jahre alte Architektur
Modernste Web-Technologien
Moderne Browser

12. …DAHER…
WIRWOLLEN
EINNEUES
OPENLAYERS!

13. ol3
in Entwicklung seit ~ 1,5 Jahren
teilweise crowd-funded
bislang 4 alpha & 2 beta-Releases
ol3js.org
Google-Group / Mailingliste
Github repository

14. WASISTNEU?
de facto: Alles
Kompletter rewrite-from-scratch
teilweise Tests (Daten) übernommen

15. WASISTNEU?
(Gmail, Google Maps)
Mobile first / from start
Styling ausschließlich CSS
Google Closure Bibliothek
Google Closure Compiler
jsdoc3
WebGL

16. … kompiliert:
CLOSURECOMPILER
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 [];
}
};
l.Ga=function(a){return Kn(a)?fo(this,a):Nn(a)?this.$b(a):la(a)?(a=Rn(a),fo(this,a)):[]};

17. Ja und Ja!

18. WASBLEIBTGLEICH?
Vielseitig verwendbar
Modern implementiert
Performant programmiert
Erweiter- und anpassbar

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

20. BEISPIELE

21. HALLO,WELT
ol3js.org/en/master/examples/simple.html

22. CODE
varmap=newol.Map({
layers:[
newol.layer.Tile({
source:newol.source.OSM()
})
],
target:'map',
view:newol.View2D({
center:[0,0],
zoom:2
})
});

23. OPENLAYERS2.X
1 × OpenLayers.Map
n × OpenLayers.Layer.
n × OpenLayers.Control.
Xxx
Yyy

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

25. 50.000KOORDINATEN
ol3js.org/en/master/examples/igc.html

26. CODE
varvectorSource=newol.source.IGC({
urls:[
'data/igc/Clement​Latour.igc'//etc.
]
});
varstyleFunction=function(feature,resolution){
//...
returnstyleArray;
};
varlayer=newol.layer.Vector({
source:vectorSource,
styleFunction:styleFunction
});

27. DRAG&DROP/FORMATE
ol3js.org/en/master/examples/drag-and-drop.html

28. CODE1
//ErzeugungeinerspezifischenInteraktion:
vardragAndDropInteraction=newol.interaction.DragAndDrop({
formatConstructors:[
ol.format.GPX,
ol.format.GeoJSON//..
]
});
//ErweiternderStandardinteraktionen&
//ErzeugungderKartemitdenInteraktionen
varinteractions=ol.interaction.defaults();
varmap=newol.Map({
interactions:interactions.extend([dragNDropInteraction]),
//...
}

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

30. TECHNISCHE
HIGHLIGHTS

31. PERFORMANCEREPLAY-API
http://ol3js.org/en/master/examples/fractal.html

32. 786.433
PUNKTE!

33. PERFORMANCER-TREE
https://github.com/imbcmdth/RTree

34. PERFORMANCER-TREE
https://github.com/mourner/rbush

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

36. PRE-/POSTCOMPOSEAPI
//ClippingvordemRendern
imagery.on('precompose',function(event){
varctx=event.context;
ctx.save();
ctx.beginPath();
if(mousePosition){
//nurdenUmkreisdesMauscursorszeigen
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äumennachdemRendern
imagery.on('postcompose',function(event){
varctx=event.context;
ctx.restore();
});

37. FAZIT&
AUSBLICK

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

39. ,
READYFORPRODUCTION?
map.geo.admin.ch Code

40. ZUKUNFT/ROADMAP
WebGL-Vektoren
API Review
API Stabilität
API Dokumentation
Kollaboration vereinfachen
Custom-build-Tool
…

41. …INTEGRATIONVON
CESIUM…

42. v3.0.0final
…BALDὠ
…UNDDANN …

43. VIELEN DANK FÜR DIEAUFMERKSAMKEIT
FRAGEN&
ANMERKUNGEN
?
Impressum

44. IMPRESSUM
Autoren:
Marc Jansen, terrestris GmbH & Co. KG,
Andreas Hocevar, Boundless,
Lizenz:
jansen@terrestris.de
ahocevar@boundlessgeo.com
CC BY-SA 3.0
Vortragsfolien
Langfassung