Télécharger pour lire hors ligne
![Ngeo: usage
controller.js
// Create the map
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//Fetch the layer tree
this.tree = $http.get(layertreeUrl);
view.html
<div ngeo-map="$ctrl.map"></div>
<div ngeo-layertree="$ctrl.tree"
ngeo-layertree-map="$ctrl.map">
</div>](https://image.slidesharecdn.com/geocom2017camptocampgeorchestrangeo-170629083949/75/Geocom2017-geOrchestra-and-ngeo-10-2048.jpg)
Téléchargé parCamptocamp
[Geocom2017] geOrchestra and ngeo
Le document présente la bibliothèque Ngeo pour le développement d'applications cartographiques, soulignant ses caractéristiques techniques et sa modularité. Il aborde les besoins actuels en matière de cartographie, ainsi que les défis d'intégration avec Georchestra et la nécessité d'une approche open source. Enfin, il décrit la proposition de roadmaps pour améliorer l'intégration et le développement de nouveaux composants.
![[Geocom2017] Georchestra & monitoring](https://cdn.slidesharecdn.com/ss_thumbnails/geocom2017camptocampgeorchestramonitoring-170629082424-thumbnail.jpg?width=640&height=640&fit=bounds)
[Geocom2017] geOrchestra and ngeo
- 1. Ngeo New age mappingcomponents library Florent Gravin • 08.05.2017
- 2. Agenda ● Présentation ngeo ○Présentation conceptuelle ○ Présentation technique ○ Demo des exemples ● Ngeo et geOrchestra ○ Etat des lieux ○ Les enjeux et les challenges de l’intégration ● Présentation GeoMapfish ● Proposition de roadmap
- 3. Historique, cheminement 1. Rappeldes besoins a. Site web cartographique responsive (desktop/tablet/smartphone) b. Fonctionnalités carto hyper performantes (mobile) c. Fonctionnalités SIG d. Affichage 2D/3D 2. Démarche open source a. Partager une librairie avec un maximum de projets/utilisateurs b. Modularité, Souplesse et adaptivité à des projets spécifiques c. Solidité de l’architecture, des tests et du workflow de développement pour récolter des contributions 3. Choix effectués a. OpenLayers, AngularJS, CesiumJS b. Ngeo: 4000 commits, 27 contributeurs, 40 exemples fonctionnels
- 4. Ngeo Librairie javascript OpenSource pour le développement d’applications cartographiques Modernité ● Technologies récentes ● Design moderne Modularité Déclinaison en niveaux de complexité Responsive Intégration dans des sites partenaires
- 5. Ngeo - Choixtechnologiques Openlayers ● La plus complète des librairies carto OpenSource ● Performante ● Communauté très active AngularJS ● Superheroic javascript Framework ● Communauté massive ● Développé par Google
- 6. Ngeo: la philosophie ●Toolkit ● Composants atomiques ● Abstraction de la UI ● Librairie non intrusive ● Approche impérative ● Guidelines pour le développement AngularJs/Openlayers ● A jour avec les conventions Openlayers
- 7. Ngeo L’architecture Organisation du code Compilationavancée Exemples Tests Documentation Guidelines
- 8. Ngeo: l’architecture /src Directives,controllers, modules, externs /test Tests des composants (karma, jasmine, phantomJs) /examples Examples compilés /contribs Contributions métiers /jsdoc Documentation Coeur buildé avec Closure Compiler ● Architecture évolutive pour suivre les tendances de l’écosystèmes javascript ● Perspectives de compatibilité modules ES6
- 9. Ngeo: la librairie Services ●Gestionnaire couche de fond ● Decorateurs ● Permalien ● Impression ● ... Directives ● Arbre des couches ● Géolocalisation ● Recherche ● Dessin ● ... Fournit des composants coeurs pour la construction d’applications cartographiques.
- 10. Ngeo: usage controller.js // Createthe map this.map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() })], view: new ol.View({ center: [0, 0], zoom: 2 }) }); //Fetch the layer tree this.tree = $http.get(layertreeUrl); view.html <div ngeo-map="$ctrl.map"></div> <div ngeo-layertree="$ctrl.tree" ngeo-layertree-map="$ctrl.map"> </div>
- 11.
- 12. Gmf Participation de lacommunauté GeoMapfish dans Ngeo Section contribution spécifique Niveau de finition supérieur Nouveaux services & directives Composants clés en main Templates d’application ● Mobile ● Desktop
- 13. Des exemples https://camptocamp.github.io/ngeo/master/examples/contribs/gmf/ Dessin -Impression - Thèmes - Profile
- 14. Les templates Desktop -Mobile
- 15. geOrchestra Visualisation des données géographiques Plusieurssolutions proposées ● Non uniformité des technologies utilisées ● Cibles & directions diverses ● Communautés différentes Quels sont les besoin d’aujourd’hui ? ● Responsive ● Performance ● Modularité, configuration Les besoins de demain ? ● Intégration 2D/3D ● Tuiles LIDAR ● Tuiles vecteur
- 16. Webmapping dans geOrchestra16.12 Mapfishapp ● ExtJs ● GeoExt ● Openlayers2 ● Look ancien ● Pas responsive ● Expert mode Sviewer ● Jquery Mobile ● Openlayers3 ● Très simple ● Non modulaire Mviewer ● Jquery ● Openlayers 3 ● Bootstrap ● Spécifique ● Communauté ?
- 17. geOrchestra: les attentes Besoinsutilisateurs ● Modernité ● Performance ● Plusieurs supports Besoins administrateurs ● Modularité (déclinaison, configuration) ● Customisation (contribution, personnalisation) ● Intégration dans des sites partenaires
- 18. Ngeo & geOrchestra Intégration /convergence Une librairie qui couvre déjà une grande partie des fonctionnalités de mapfishapp. Une seule solution pour des applications à la carte ● Support ● Complexité ● Applications métiers
- 19. La bibliothèque ● Composantscoeur geOrchestra ● Composants métier ● Composants contributeurs ● Différents niveaux d’intégration (à partir du coeur de ngeo ou de composants plus élaborés) Les applications ● Templates coeur pour différents support (desktop, mobile..) ● Déclinaison en niveau de complexité (expert, simple) ● Configuration et personnalisation ● Applications métiers annexes basées sur les mêmes composants Ngeo & geOrchestra
- 20. Intégration sites partenaires Api ●Pour quel public ? ● Difficile à maintenir Iframe ● Pas de code, pas de maintenance ● Communication possible iframe/page source. ● Différents templates ● Exemple
- 21.
- 23. Ngeo: Les contributions Plateformesnationales ● Suisse ● Luxembourg Solutions Open Source ● Geonetwork ● GeoMapFish Sites & portails ● Camptocamp ● Swissalpine
- 24. Intégration itérative etprogressive ● Mise en place de l’architecture, intégration de ngeo dans geOrchestra. ● Livraison d’une application épurée (viewer simple mobile). ● Développement de nouveaux composants et templates plus complets ● Templates d’application niveau mapfishapp Intégration: proposition de roadmap
- 25. Intégration dans geOrchestra ngeo/contribs/georchestra ? Ngeo https://github.com/camptocamp/ngeo FlorentGravin florent.gravin@camptocamp.com