Afficher des couches d'entités volumineuses en 3D avec l'API JavaScript ArcGIS

Depuis maintenant deux années, Esri travaille sur la nouvelle génération de son API JavaScript 4.x notamment pour prendre en charge de manière efficace (et sans plug-in) l'affichage et l'exploitation de données 3D dans un navigateur web. Depuis septembre 2018, la version 4.9 de l'API prend en charge l'affichage de jeux de données ponctuels volumineux. La version 4.10, sortie en décembre dernier, étend cette capacité aux couches de données volumineuses de lignes et de polygones. Il n’y a donc plus de limite à 2 000 entités lors de l’ajout de couches d’entités dans vos scènes web 3D ArcGIS. Ceci est vrai pour la visionneuse de scènes comme pour les applications 3D développées à l'aide de l'API JavaScript ArcGIS.

   

   

Dans cet article, je vous propose de voir les détails techniques du chargement et de l'affichage de couches d'entités volumineuses. En suivant ces recommandations, vous pourrez créer des scènes web 3D de votre territoire en utilisant vos couches d'entités  2D en extrudant, par exemple, des centaines de milliers de bâtiments générés dynamiquement à partir d'emprise 2D !

  

  

Comment ça marche ?

Pour les services comportant moins de 2000 entités, nous pouvons charger toutes les données en même temps dans le client. En interne, de manière transparente, Esri appelle ce mode "instantané" et continue de l’utiliser pour les petits services. Ce mode présente l'avantage d'afficher instantanément toutes les fonctionnalités lors de la navigation, car toutes les données sont en mémoire dans l'application cliente et sont rendues directement.

Lorsqu'un service dépasse la quantité de données pouvant être gérée en mode "instantané", nous passons automatiquement dans un mode dit "tuilé" à la demande. Ce mode est similaire à ce qu'il se passe avec les couches de scène (Scene Layers), mais sans cache préalablement calculé. Le mode "tuilé" charge les entités des services volumineux et les organise en un maillage de taille variable (selon la quantité de données dans chaque mailles). Ce mode peut afficher jusqu'à 50 000 entités à la fois par couche. 

   

Les tuiles sont chargées progressivement, en commençant par la tuile la plus proche.

      

Esri utilise également également le mécanisme de quantification, une technique qui réduit la résolution des entités lignes et des polygones en fonction de leur taille à l'écran. La quantification réduit la quantité de données que le serveur et le client doivent traiter, mais on notera qu'elle peut empêcher le chargement de très petites entités.

   

Lorsque le nombre d'entités à charger dépasse cette nouvelle limite, la scène essaye alors de charger un sous-ensemble significatif des données à afficher:

   

Tout d'abord, la scène demande combien d'entités se trouvent dans l'ensemble des tuiles, puis elle charge le même pourcentage de toutes les entités de chaque tuiles. Cela crée un sous-échantillonnage homogène des entités dans toutes les tuiles, ce qui donne une bonne représentation visuelle de la répartition spatiale des données. Cela rend également les bordures du maillage moins visibles.

  

Un deuxième mécanisme entre également en jeu dans le cas de couches d'entités volumineuses avec l'utilisation d'une réduction de la taille des tuiles en fonction de leur éloignement par rapport au point de vue de la scène. Il en résulte des tuiles plus petites (et donc plus denses) à proximité du point de vue et des tuiles plus grandes lorsque l'on se rapproche de l’horizon.

Cet algorithme de sélection des entités à afficher permet également des temps de chargement plus rapides. De plus, lorsque le serveur le prend en charge, la scène web demande les entités dans le format binaire (pbf) au lieu de JSON, ce qui réduit encore la taille des données échangées.

  

  

Visualisations de villes 3D à partir d'entités 2D, quelques exemples en action

En France, la plupart des gestionnaires de territoire n'ont pas de modèles 3D détaillés de leurs bâtiments. Il est cependant fréquent de disposer des emprises de ces bâtiments disponibles dans la BD Topo de l'IGN, dans les données cadastrales ou encore dans la base de données OpenStreetMap. Pour peu que vous ayez des informations sur la hauteur de ces bâtiments, vous pourrez les visualiser facilement en 3D. Pour ajouter un peu de réalisme à la scène, nous pourrez également télécharger d'autre éléments comme les arbres. 

Avant de voir en détail comment intégrer les données 2D et les publier dans une application web en 3D, voici ci-dessous une intégration de l'ensemble des emprises de bâtiments d'OSM sur la Roumanie (1 million d'entités) présentée dans une application web 3D à l'aide de l'API JavaScript ArcGIS par ma collègue Raluca Nicola du centre de R&D Esri de Zurich.

   

      

Télécharger et publier les données

Il existe plusieurs façons de télécharger et de publier les emprises de bâtiments. Selon la source de données utilisée la qualité des données peut être très variable. Vous vérifierez tout d'abord que les informations sur les hauteurs sont correctement et exhaustivement renseignées. Si ce n'est pas le cas, vous devrez remplacer les valeurs nulles par une hauteur arbitraire. Cette dernière pourra être fixe ou, par exemple, être calculée à partir du périmètre/superficie du bâtiment. Vous penserez également à supprimer les attributs inutiles pour votre scène 3D (il peut y en avoir beaucoup dans la BD Topo IGN ou dans OSM).

Une fois les données prêtes (n'oubliez pas d'ajouter les attributions), vous allez pouvoir les publier sur ArcGIS Online. En cas de doutes vous pourrez vérifier la consommation de crédits avant de publier votre service (pour une couche d'entités: 2.4 crédits pour 10 Mo de stockage par mois). Lors de la publication, voici quelques optimisations que vous pouvez apporter aux paramètres de votre couche d'entités pour améliorer ses performances:

      

   

Créer une application web 3D

Il est maintenant temps de visualiser les bâtiments. Si vous n'êtes pas développeur, vous pourrez choisir de créer votre scène web avec la visionneuse de scènes. Dans la version actuelle, il n'est pas encore possible (ca arrive prochainement) de choisir un champ pour les valeurs d'extrusion, vous serez donc obligé de spécifier une valeur fixe (par exemple: 10 m.). Nous avons également ici symbolisé les arbres avec des modèles 3D réalistes issus des librairies standards de symboles 3D de la visionneuse de scènes. Nous avons enregistré la scène et l'avons chargée dans une application personnalisée à l'aide de l' ID de de l'élément sur le portail. Nous avons ensuite ajouté un menu en bas qui permet de zoomer sur les principales villes en s'appuyant sur les diapositives définies dans la scène web. Voici à quoi ressemble l'application:

   

C’est ainsi que vous pouvez créer une vue 3D de votre ville en utilisant uniquement des données 2D. Dans cet exemple, nous avons utilisé les données d'OpenStreetMap, mais nous aurions pu faire la même chose avec d'autres sources de données (IGN, DGI, ...). 

   

  

Exploiter la hauteur des bâtiments

Certaines organisations publiques ont des portails Open Data où vous pouvez trouver les emprises de bâtiments (même avec des informations de hauteur). C'est le cas de Paris, avec l'APUR qui a publié toutes les emprises de bâtiments sur son portail Open Data (réalisé avec ArcGIS Online). Les emprises contiennent des informations sur la hauteur et la date (ou période) de construction. Nous avons donc utilisé ces attributs pour représenter la hauteur et la couleur des entités extrudées. La hauteur d'extrusion est définie en tant que variable visuelle de type "taille" et les dates de construction sont utilisées en tant que catégories dans un rendu de type "valeur unique".

  

Voici le code JavaScript utilisé:

  

Voici à quoi ressemble l'application:

  

   

Et vous pouvez accéder au code de l'application ici .

A vous de jouer désormais !