NGEO – OpenLayers meets Angular
(English below) OpenLayers 3 ist eine ausgereifte und stabile JavaScript Kartenbibliothek, die auch anspruchsvolle Applikationen ermöglicht. AngularJS ist eines der beliebtesten Frameworks im Bereich der Single-Page-Webanwendungen, und wird allgemein für die Entwicklung von modularem Frontend-Code eingesetzt. Dieser Vortrag gibt einen Einblick in Ngeo, einer Open-Source-JavaScript-Bibliothek, die eine Kombination der Funktionalität von OpenLayers und der Modularität von AngularJS ermöglicht. Ngeo stellt AngularJS Services und Komponenten zur Verfügung, die als Bausteine für GIS-Webanwendungen benutzt werden können. Anhand von konkreten Codebeispielen wird aufgezeigt, wie Ngeo die Softwareentwicklung vereinfacht. Wir erklären die Guidelines, die wir aufgestellt haben, um AngularJS produktiv zu nutzen. Wir haben die Erfahrung gemacht, dass es äußerst wichtig ist, sich den Best-Practice-Vorgaben von AngularJS laufend anzupassen und zu dokumentieren, wie sie sich auf unsere Bibliothek auswirken. Damit erreichen wir, dass die Bibliothek für Applikationsentwickler eine einheitliche Schnittstelle zur Verfügung stellt. In Anbetracht der raschen Entwicklungen im JavaScript-Ökosystem, namentlich ECMAScript 2015 und 2016, TypeScript und der kürzlichen Veröffentlichung von Angular 2, werden wir auch kurz darauf eingehen, wie wir den Herausforderungen einer Umgebung begegnen, die sich ständig verändert. ENG Overview about Ngeo applications, provided as an Open Source JavaScript library that enables the combination of OpenLayers flexibility together with the modularity of AngularJS. Ngeo provides AngularJS services and components that can be used as building blocks for Web-GIS applications. We will focus on how Ngeo eases development by showing concrete code examples. The talk will also present the design choices and the guidelines that have been established for using AngularJS in a productive way. From our experience, it is extremely important to constantly adapt to AngularJS best practices and also to document how they apply to the library, in order to ensure that the interface for application developers is uniform. https://frab.fossgis-konferenz.de/de/2017/public/events/5209
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a NGEO – OpenLayers meets Angular
Semelhante a NGEO – OpenLayers meets Angular (20)
Mais de Camptocamp
Mais de Camptocamp (20)
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