SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
OPENLAYERS3
EINFÜHRUNG,
VERWENDUNGSBEISPIELEUND
TECHNISCHEHIGHLIGHTS
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
ÜBERUNS
OL3-KERNENTWICKLER
Marc Jansen
terrestris GmbH & Co. KG
jansen@terrestris.de
@marcjansen
@selectoid
Andreas Hocevar
Boundless
ahocevar@boundlessgeo.com
@ahocevar
@ahoce
ÜBERTERRESTRIS
OpenSource GIS aus Bonn
Entwicklung, Projekte &
Support/Schulung
Beratung, Planung,
Implementierung &
Wartung
@terrestris
@terrestrisde
terrestris.de
ÜBERBOUNDLESS
Boundless reduziert die
Kosten freier Software
Governance in der
FOSSGIS Community
@boundlessgeo
@boundlessgeo
boundlessgeo.com
ÜBERDIESENVORTRAG
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…
WIRWOLLEN
EINNEUES
OPENLAYERS!
ol3
in Entwicklung seit ~ 1,5 Jahren
teilweise crowd-funded
bislang 4 alpha & 2 beta-Releases
ol3js.org
Google-Group / Mailingliste
Github repository
WASISTNEU?
de facto: Alles
Kompletter rewrite-from-scratch
teilweise Tests (Daten) übernommen
WASISTNEU?
(Gmail, Google Maps)
Mobile first / from start
Styling ausschließlich CSS
Google Closure Bibliothek
Google Closure Compiler
jsdoc3
WebGL
… 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)):[]};
Ja und Ja!
WASBLEIBTGLEICH?
Vielseitig verwendbar
Modern implementiert
Performant programmiert
Erweiter- und anpassbar
WASBLEIBTGLEICH?
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
varmap=newol.Map({
layers:[
newol.layer.Tile({
source:newol.source.OSM()
})
],
target:'map',
view:newol.View2D({
center:[0,0],
zoom:2
})
});
OPENLAYERS2.X
1 × OpenLayers.Map
n × OpenLayers.Layer.
n × OpenLayers.Control.
Xxx
Yyy
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
50.000KOORDINATEN
ol3js.org/en/master/examples/igc.html
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
});
DRAG&DROP/FORMATE
ol3js.org/en/master/examples/drag-and-drop.html
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]),
//...
}
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());
});
TECHNISCHE
HIGHLIGHTS
PERFORMANCEREPLAY-API
http://ol3js.org/en/master/examples/fractal.html
786.433
PUNKTE!
PERFORMANCER-TREE
https://github.com/imbcmdth/RTree
PERFORMANCER-TREE
https://github.com/mourner/rbush
PRE-/POSTCOMPOSEAPI
http://ol3js.org/en/master/examples/layer-spy.html
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();
});
FAZIT&
AUSBLICK
READYFORPRODUCTION?
Beta - API kann und wird sich ändern
Hohe Code-Qualität bereits jetzt
Dokumentation noch im Aufbau
Zusammenspiel mit Bibliotheken
,
READYFORPRODUCTION?
map.geo.admin.ch Code
ZUKUNFT/ROADMAP
WebGL-Vektoren
API Review
API Stabilität
API Dokumentation
Kollaboration vereinfachen
Custom-build-Tool
…
…INTEGRATIONVON
CESIUM…
v3.0.0final
…BALDὠ
…UNDDANN …
VIELEN DANK FÜR DIEAUFMERKSAMKEIT
FRAGEN&
ANMERKUNGEN
?
Impressum
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

Weitere ähnliche Inhalte

Andere mochten auch (16)

Lean Software Development Principles
Lean Software Development PrinciplesLean Software Development Principles
Lean Software Development Principles
 
Spectrophotometer
SpectrophotometerSpectrophotometer
Spectrophotometer
 
Components of CT Scan Machine
Components of CT Scan MachineComponents of CT Scan Machine
Components of CT Scan Machine
 
QMS White Paper
QMS White PaperQMS White Paper
QMS White Paper
 
Suppy chain management of pharma
Suppy chain management of pharmaSuppy chain management of pharma
Suppy chain management of pharma
 
Web Application Performance
Web Application PerformanceWeb Application Performance
Web Application Performance
 
Agile test tools
Agile test toolsAgile test tools
Agile test tools
 
Best Practices for Managing SaaS Applications
Best Practices for Managing SaaS ApplicationsBest Practices for Managing SaaS Applications
Best Practices for Managing SaaS Applications
 
Shop Floor Planning & Control
Shop Floor Planning & ControlShop Floor Planning & Control
Shop Floor Planning & Control
 
Dimensions of metric hex nuts
Dimensions of metric hex nutsDimensions of metric hex nuts
Dimensions of metric hex nuts
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile Ecosystem
 
The Mobile Ecosystem
The Mobile EcosystemThe Mobile Ecosystem
The Mobile Ecosystem
 
Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web App
 
Thread fastener
Thread fastenerThread fastener
Thread fastener
 
Mobile Tech Trends for 2017
Mobile Tech Trends for 2017Mobile Tech Trends for 2017
Mobile Tech Trends for 2017
 
What is VAVE
What is VAVE What is VAVE
What is VAVE
 

Ähnlich wie OpenLayers 3 - Einführung, Verwendungsbeispiele und technische Highlights

Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign GmbH
 
Digitale Nachhaltigkeit mit Open Clouds
Digitale Nachhaltigkeit mit Open CloudsDigitale Nachhaltigkeit mit Open Clouds
Digitale Nachhaltigkeit mit Open CloudsMatthias Stürmer
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-ÄraAndreas Koop
 
Artikel Schweizer Bank: Vorteile von Open-Source-Software
Artikel Schweizer Bank: Vorteile von Open-Source-SoftwareArtikel Schweizer Bank: Vorteile von Open-Source-Software
Artikel Schweizer Bank: Vorteile von Open-Source-SoftwarePeter Affolter
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...AKJoom
 
Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)Intelliact AG
 
Voquz IT Solutions Unternehmenspräsention
Voquz IT Solutions UnternehmenspräsentionVoquz IT Solutions Unternehmenspräsention
Voquz IT Solutions UnternehmenspräsentionVoquz Group
 
Sonnenschein für ihre Website
Sonnenschein für ihre WebsiteSonnenschein für ihre Website
Sonnenschein für ihre WebsiteOlivier Dobberkau
 
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014die.agilen GmbH
 
Mobile Computing für die öffentliche Hand: Durchstarten ohne Bruchlandung
Mobile Computing für die öffentliche Hand: Durchstarten ohne BruchlandungMobile Computing für die öffentliche Hand: Durchstarten ohne Bruchlandung
Mobile Computing für die öffentliche Hand: Durchstarten ohne BruchlandungThomas Briner
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenenpit GmbH & Co. KG
 
Cloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoCloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoAndreas Koop
 
Cloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, DemoCloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, Demoenpit GmbH & Co. KG
 
Die SOA Suite in der Amazon Cloud sicher betreiben
Die SOA Suite in der Amazon Cloud sicher betreiben Die SOA Suite in der Amazon Cloud sicher betreiben
Die SOA Suite in der Amazon Cloud sicher betreiben OPITZ CONSULTING Deutschland
 

Ähnlich wie OpenLayers 3 - Einführung, Verwendungsbeispiele und technische Highlights (15)

Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Digitale Nachhaltigkeit mit Open Clouds
Digitale Nachhaltigkeit mit Open CloudsDigitale Nachhaltigkeit mit Open Clouds
Digitale Nachhaltigkeit mit Open Clouds
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
Artikel Schweizer Bank: Vorteile von Open-Source-Software
Artikel Schweizer Bank: Vorteile von Open-Source-SoftwareArtikel Schweizer Bank: Vorteile von Open-Source-Software
Artikel Schweizer Bank: Vorteile von Open-Source-Software
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
 
Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)
 
Voquz IT Solutions Unternehmenspräsention
Voquz IT Solutions UnternehmenspräsentionVoquz IT Solutions Unternehmenspräsention
Voquz IT Solutions Unternehmenspräsention
 
Sonnenschein für ihre Website
Sonnenschein für ihre WebsiteSonnenschein für ihre Website
Sonnenschein für ihre Website
 
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014
TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014
 
Mobile Computing für die öffentliche Hand: Durchstarten ohne Bruchlandung
Mobile Computing für die öffentliche Hand: Durchstarten ohne BruchlandungMobile Computing für die öffentliche Hand: Durchstarten ohne Bruchlandung
Mobile Computing für die öffentliche Hand: Durchstarten ohne Bruchlandung
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesen
 
Cloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoCloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, Demo
 
Cloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, DemoCloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, Demo
 
Die SOA Suite in der Amazon Cloud sicher betreiben
Die SOA Suite in der Amazon Cloud sicher betreiben Die SOA Suite in der Amazon Cloud sicher betreiben
Die SOA Suite in der Amazon Cloud sicher betreiben
 

OpenLayers 3 - Einführung, Verwendungsbeispiele und technische Highlights