NGEO – OpenLayers meets Angular
0 gefällt mir1,522 aufrufe
Das Dokument bietet einen Überblick über Ngeo, eine AngularJS-Integration der OpenLayers-Bibliothek zur Kartendarstellung, die verschiedene Funktionen wie Layer-Management und interaktive Elemente umfasst. Es werden Beispiele für die Implementierung von OpenLayers und AngularJS gegeben sowie Links zu Anwendungsbeispielen und Dokumentationen bereitgestellt. Der Ausblick beinhaltet geplante Entwicklungen, darunter die Unterstützung von ES6 und Angular 2.
![3/21www.camptocamp.com /
OpenLayers – Beispiel
<div id="map"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
</script>
Quelle: http://openlayers.org/en/latest/doc/tutorials/concepts.html](https://image.slidesharecdn.com/fossgis-ngeo-170327130154/85/NGEO-OpenLayers-meets-Angular-3-320.jpg)
![9/21www.camptocamp.com /
Ngeo – Beispiel
// HTML
<div ngeo-map="$ctrl.map"></div>
// Controller
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Quelle: http://camptocamp.github.io/ngeo/master/examples/simple.html](https://image.slidesharecdn.com/fossgis-ngeo-170327130154/85/NGEO-OpenLayers-meets-Angular-9-320.jpg)
NGEO – OpenLayers meets Angular
- 1. NGEO – OpenLayers meets Angular Roman Zoller
- 2. 2/21www.camptocamp.com / OpenLayers – Übersicht ■ Open Source JavaScript-Bibliothek für die Anzeige von Karten (Rasterdaten in Kacheln) ■ Features ○ Vektorlayer in diversen Formaten ○ Mobile Browser ○ Rendering: Canvas und WebGL ○ Plugins
- 3. 3/21www.camptocamp.com / OpenLayers – Beispiel <div id="map"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ center: [0, 0], zoom: 2 }), target: 'map' }); </script> Quelle: http://openlayers.org/en/latest/doc/tutorials/concepts.html
- 4. 4/21www.camptocamp.com / OpenLayers – Beispiel
- 5. 5/21www.camptocamp.com / AngularJS – Übersicht ■ Beliebtes Framework für Single-Page-Webanwendungen ■ Model-View-ViewModel (MVVM, Variante von MVC) ■ Version 1: https://angularjs.org/ ■ Aktuelle Version: https://angular.io/
- 6. 6/21www.camptocamp.com / AngularJS – Beispiel ■ Zwei-Wege-Datenbindung <html ng-app> <input type="text" ng-model="search"> <p>Du suchst gerade nach: {{ search }}</p> Quelle: https://angularjs.de/artikel/angularjs-tutorial-deutsch Siehe auch: https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background
- 7. 7/21www.camptocamp.com / AngularJS – Beispiel
- 8. 8/21www.camptocamp.com / Ngeo ■ AngularJS-Integration der wichtigsten OpenLayers-Features ■ Zusatzfunktionen ○ Layer tree ○ Messen, Zeichnen, Höhenprofil ○ Suche mit Autovervollständigung ■ Keine eigenständige Anwendung, sondern eine Bibliothek mit wiederverwendbaren Bausteinen ■ Kein vorgegebenes Layout (CSS)
- 9. 9/21www.camptocamp.com / Ngeo – Beispiel // HTML <div ngeo-map="$ctrl.map"></div> // Controller this.map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); Quelle: http://camptocamp.github.io/ngeo/master/examples/simple.html
- 10. 10/21www.camptocamp.com / Ngeo – Beispiel
- 11. 11/21www.camptocamp.com / Ngeo – Layer tree <div ngeo-layertree="$ctrl.tree" ngeo-layertree-map="$ctrl.map" ngeo-layertree-nodelayer="$ctrl.getLayer(node)"></div> ■ ngeo-layertree: Der Layer tree, jeder Knoten hat ein Attribut „name“ (String), optional ein Attribut „children“ (Array von Knoten). ■ ngeo-layertree-map: Referenz auf das OpenLayers map Objekt. ■ ngeo-layertree-nodelayer: Funktion, welche das Layer für einen bestimmten Knoten zurückgibt. Dokumentation: https://camptocamp.github.io/ngeo/master/apidoc/ngeo.layertreeDirective.html Demo: http://camptocamp.github.io/ngeo/master/examples/layertree.html
- 12. 12/21www.camptocamp.com / Ngeo – Layer tree
- 13. 13/21www.camptocamp.com / Ngeo – Layer tree
- 14. 14/21www.camptocamp.com / Ngeo – Interaction Quelle: https://camptocamp.github.io/ngeo/master/examples/interactionbtngroup.html
- 15. 15/21www.camptocamp.com / Ngeo – Search Quelle: https://camptocamp.github.io/ngeo/master/examples/search.html
- 16. 16/21www.camptocamp.com / Ngeo – Weitere Informationen ■ Code ○ https://github.com/camptocamp/ngeo ■ Dokumentation ○ https://camptocamp.github.io/ngeo/master/apidoc ■ Beispiele ○ https://camptocamp.github.io/ngeo/master/examples
- 17. 17/21www.camptocamp.com / Anwendungsbeispiele ■ Geoportal Luxembourg ○ http://map.geoportail.lu/ ■ GeoMapFish ○ http://geomapfish.org/ => Links zu diversen Anwendungen
- 20. 20/21www.camptocamp.com / Ausblick ■ ES6 (aka ES2015) ○ Kompilierung mit Google Closure Compiler ○ ES6 Features werden schrittweise eingeführt ○ ES6 Module in Arbeit - Einbindung von Teilen von Ngeo ohne Verwendung von Closure Compiler ■ Angular 2 / Typescript ○ Evtl. später