Javascript et représentation cartographique

ZAE Les Terres d’Or - Route de St Philibert - 21220 Gevrey-Chambertin contact@atolcd.com03.80.68.81.68 www.atolcd.com
JavaScript et représentation
cartographique
#OpenLayers #Leaflet

Gevrey-Chambertin Paris Lyon
Atol C&D
Une Entreprise de Services Numériques aux valeurs fortes
#COLLABORATIF #PÉRENNITÉ # EXPERTISE

#Notre équipe
Caroline Chanlon
Charles-Henry Vagner Aurélien Morlé
Simon Durost

La mutualisation et l’open-source comme
accélérateurs
L’expertise technique & fonctionnelle pour un
partenariat sur le long terme
#Notre philosophie
#notre fierté
Créée en 2000, Atol Conseils et Développements est une
entreprise de services numériques (ESN) à la philosophie et
aux valeurs fortes :
« La fidélité de nos clients et de nos collaborateurs »
L’humain au coeur de notre démarche en prenant
le parti de la confiance, de l’autonomie, de la
collaboration
L’agilité et l’implication métier au service des
projets

Nous travaillons pour améliorer les processus de
nos clients, nos travaux doivent être porteur de
valeur ajoutée.
La digitalisation des processus métiers que nous
proposons est centrée sur l’utilisateur final
#Vocation
#notre
différenciation
Pour que la transformation digitale ne soit pas un vain mot :
« la culture d’entreprise au service
des enjeux métiers de nos clients »
Nos réalisations sont guidées par une exigence de
qualité, et l’imbrication des phases Conseils &
Développements
Notre excellence technique est au services des
besoins fonctionnels

100 collaborateurs
#La recette d’AtolC&D
Expertise et Agilité
R&D > 10%
Une volonté de capitaliser sur l’humain et les retours
d’expériences de nos collaborateurs
UX & UI : des applications adaptées à leurs
utilisateurs
L’implication métier, la passion, le plaisir
Des solutions Open Source de référence
Un engagement sur la durée avec nos
collaborateurs, nos clients

★ Intégration Alfresco / Kofax
★ Développement de composants et modules Alfresco
★ Accompagnement et réalisation de stratégie de dématérialisation
★ Solutions Big Data, reporting, tableaux de bord, analytics
★ Intégration de solutions Pentaho, Talend, Jaspersoft
★ Projets BI au forfait et développement de modules spécifiques
Informatique décisionnelle BI
Dématérialisation
★ Intégration et échange de données spatialisées
★ Traitement et diffusion d’informations géographiques
★ Extranet cartographique et solutions mobiles
Cartographie et SIG
★ Supervision industrielle
★ Solutions de traçabilité (codes, NFC,...)
★ Smart building (bâtiments intelligents)
Solutions industrielles
★ Intranet / extranet (interactions applications métiers)
★ Ergonomie / design / graphisme
★ Responsive design (terminaux tablettes et mobiles)
Communication digitale et CMS
#Nos expertises
#01
#02
#03
#04
#05

Atol C&D et l’information
géographique
https://www.atolcd.com/expertise/solutions-geographiques.html
8

Une montée en compétence
progressive des équipes acquise par le
développement des applications
métiers “Mes parcelles”, “Observatoire
Saône et Doubs”, suivi sanitaire des
cultures , gestion des réseau, etc.
#Tous les pôles sont concernés
La cartographie, un outil parmi
d’autres au service des
solutions décisionnelles
Une appropriation naturelle par les
équipes “Pôle digital” liée à la
démocratisation de la cartographie pour
le grand public (Google Maps, Geoportail,
etc.)

Une maîtrise des composants IG et la capacité à
construire des architectures robustes
#Le meilleur de l’Open Source
Des contributions régulières à la
communauté

Les différentes librairies “carto”
JavaScript
11

#Tour d'horizon des solutions existantes
Google Maps
- Documentation : https://developers.google.com/maps/?hl=fr
- API qui n’est pas Open source
- Fonctionnalités limitées
- Payant en fonction de l’utilisation
12

Bing Maps
- Documentation : http://www.bing.com/api/maps/sdk/mapcontrol/isdk#overview
- API qui n’est pas Open source
- Fonctionnalités limitées
- Payant en fonction de l’utilisation
13

MapBox.Js
- Documentation : https://www.mapbox.com/mapbox.js/api/v3.1.1/
- Open Source (pour la partie javascript)
- Fortement lié à MapBox et Leaflet
- Orienté personnalisation de style
14

D3
- Documentation : https://d3js.org/
- Fonction SIG très limitée
- Orienté graphe et présentation
- Open Source
- Interfaçable avec OpenLayers 4
- http://openlayers.org/en/latest/examples/d3.html
15

Cesium
- Documentation : https://cesiumjs.org/index.html
- Visualisation 3D
- Pas de gestion 2D directement
- Open Source
- Interfaçable avec Openlayers 4
- http://openlayers.org/ol3-cesium/
16

iTowns
- Documentation : http://www.itowns-project.org/
- Open Source
- Dernière version 2.1.0 (15/09/17)
- Javascript/WebGL Visualisation 3D
17

OpenLayers
- Documentation : http://openlayers.org/
- Open Source
- Nombreuses fonctionnalités
18

Leaflet
- Documentation : http://leafletjs.com/
- Open Source
- Léger et simple d’utilisation
19

Comparatif Leaflet - OpenLayers
20

#Comparatif Leaflet – OpenLayers
Qui est le meilleur ?
21
- La réponse est différente suivant :
- les besoins en terme de fonctionnalités
- Système de projection utilisé ?
- Digitalisation ou simple visualisation ?
- Visualisation 3D ?
- Les sources de données ? WMS, WFS, WFS-T, WMTS… etc
- Le rendu visuel
- la cible visée
- mobile ? desktop ? responsive ?
- la carte le coeur de métier ou simple plus-value ?
- navigateur supporté ?
- l’aspect technique

ZAE Les Terres d’Or - Route de St Philibert - 21220 Gevrey-Chambertin contact@atolcd.com03.80.68.81.68 www.atolcd.com 22
Leaflet
https://jsfiddle.net/7j6pp52h/

OpenLayers
https://jsfiddle.net/Lhxk85np/

Leaflet
Avantages
- Léger (sans utilisation de plugin)
- Simple d’utilisation
- Facilement intégrable dans un site
existant
- Orienté mobile
- Support IE8
Inconvénients
- Peu de fonctionnalités disponibles
sans passer par un plugin
- Gestion des projections
- Custom build compliqué si
intégration de plugins
- Qualité des plugins

Openlayers
Avantages
- Gestion des projections
- Nombreuses fonctionnalités
- Cohérence des fonctionnalités et
qualité de celle-ci
- Accélération matérielle (WebGL)
- Interaction D3js / Cesium
- Utilisation de canvas (possibilités
d'affichages infinies)
Inconvénients
- V3 totalement réécrite (concept
différent de la V2)
- pas de support IE8
- Nombreux outils nécessaires pour
faire un custom build

Les librairies JS… une réponse à
tous vos besoins cartographiques ?
26

#Les librairies JS… une réponse à tous vos
besoins cartographiques ?
Aspects à traiter
- Stockage
- Fichiers : Shapefile, GeoJSON, KML...
- Bases de données spatiales : Oracle Locator/Spatial, PostGIS...
- Flux / Web services
- Exposition des données spatiales via le protocole HTTP
- Présentation
- Représentation des données sous forme de cartes
- Interactions avec l’utilisateur
- Digitalisation
- Outils génériques / métiers

Etude de cas
- Représentation Cartoradio clusters
- Volumétrie Tuilage vectoriel Cadastre
- Analyse thématique Tuilage vectoriel Classification
- Digitalisation Outils de découpe MesParcelles
- Sélection STEA Tigre 7
- Sécurisation Remocra proxy Geoserver
- Utilitaire Outil de dessin

Clusters Cartoradio
- Représentation des supports d’antenne et des mesures
- Web service avec filtres spécifiques
- GeoJSON avec interaction utilisateur
- Problématique initiale
- Affichage des supports ou mesures trop condensé
- Solution
- Clusters avec compteur de supports
- Détail au survol ou grande échelle
http://www.cartoradio.fr

http://jsfiddle.net/cvagner/dLcg3qy2/

Cas pratiques
- Serveur de données PostGIS
- Via conteneur Docker
- Serveur de tuiles Tegola
- https://github.com/terranodo/tegola
- Serveur de tuiles MVT écrit en Go
- Cartes OpenLayers 4
- Chargement du cadastre en vectoriel
- Analyses thématiques

Tuilage vectoriel Cadastre
- Volumétrie des données parcelles, bâtiments
- Et visualisation des données associées
- Solution
- Tuilage vectoriel
- Mise en cache, montée en charge, rapidité
- Géométries simplifiées et découpées + données
http://localhost:8000/administratif.html

Tuilage vectoriel avec Analyse thématique
- Analyses thématiques sur une même donnée
- Tuilage image : toutes les combinaisons ?
- Solution
- Tuilage vectoriel
- Fluidité
- Mise en cache
- Analyse thématique côté client
- pas de rechargement malgré le volume
http://localhost:8000/geostats.html

Tuilage vectoriel :
- GeoJSON
- .json
- compréhensible, répandu
https://jsfiddle.net/cvagner/1vbvg8ur/
34

Tuilage vectoriel :
- TopoJSON
- .topojson
- extension de GeoJSON
- liens entre géométries
https://jsfiddle.net/cvagner/dc2yf8v3/
35

Tuilage vectoriel :
- Mapbox Vector Tiles
- .mvt ou .pbf
- format binaire
- protocol buffer
https://jsfiddle.net/cvagner/s4jhLpfe/
36

Outils de découpe APCA - MesParcelles
- Besoin
- Assister l’utilisateur dans ses opérations fréquentes
- Solution
- Assistant métier : bandes enherbées, découpage...
- Côté client : interface dédiée
- Côté serveur : calculs
Démonstration

Gestion de la sélection STEA - Tigre 7
- Besoin
- Partager des sélections entre applications
- Solution
- Côté client :
- manipulation sélection : ajout, retrait
- visualisation de la sélection (carto / tabulaire)
- rendu cartographique effectué à partir d’une restitution des objets de la sélection
au format GeoJson
- Côté serveur :
- stockage d’une description de la sélection

Sécurisation des flux - SDIS REMOcRA
- Besoin
- Sécuriser les accès aux flux produits par un serveur de cartes (GeoServer)
- Solution
- Configuration des couches et Proxy
- Couche publique ? Authentification nécessaire ? Accès limité / complet
(profils / *) ?
- Capabilities : filtrage à la volée
- GetMap / GetFeatureInfo / DescribeLayer / GetLegendGraphic :
vérification accès et filtrage à la volée (“pochoir” zone de compétence)
/geoserver/<workspace>/wms?request=GetCapabilities Commit d8c6005

Outil de dessins - SDIS REMOcRA
- Besoin
- Disposer d’un outil de dessin carto avec les fonds
- Solution
- Carte dédiée avec dessins, annotations et images
- Couches de fonds disponibles
- Impression
http://.../remocra/#cartographie

QUESTIONS ?
Merci
41

Javascript et représentation cartographique

Recommandé

Recommandé

Contenu connexe

Similaire à Javascript et représentation cartographique

Similaire à Javascript et représentation cartographique (20)

Plus de ATOL Conseils et Développements

Plus de ATOL Conseils et Développements (20)

Javascript et représentation cartographique