Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NGEO – OpenLayers meets Angular

925 views

Published on

(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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

NGEO – OpenLayers meets Angular

  1. 1. NGEO – OpenLayers meets Angular Roman Zoller
  2. 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. 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. 4/21www.camptocamp.com / OpenLayers – Beispiel
  5. 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. 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. 7/21www.camptocamp.com / AngularJS – Beispiel
  8. 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. 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. 10/21www.camptocamp.com / Ngeo – Beispiel
  11. 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. 12/21www.camptocamp.com / Ngeo – Layer tree
  13. 13. 13/21www.camptocamp.com / Ngeo – Layer tree
  14. 14. 14/21www.camptocamp.com / Ngeo – Interaction Quelle: https://camptocamp.github.io/ngeo/master/examples/interactionbtngroup.html
  15. 15. 15/21www.camptocamp.com / Ngeo – Search Quelle: https://camptocamp.github.io/ngeo/master/examples/search.html
  16. 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. 17/21www.camptocamp.com / Anwendungsbeispiele ■ Geoportal Luxembourg ○ http://map.geoportail.lu/ ■ GeoMapFish ○ http://geomapfish.org/ => Links zu diversen Anwendungen
  18. 18. 18/21www.camptocamp.com / Geoportal Luxembourg
  19. 19. 19/21www.camptocamp.com / GeoMapFish http://geomapfish.org/
  20. 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

×