Créez une carte en 3D : les scènes !

Dans l’article Créez une carte web en 5 minutes, nous avons découvert les concepts principaux pour créer sa carte web en 5 minutes mais uniquement en 2D. Aujourd’hui j’aimerais vous montrer comment faire une carte en 3D, ce qu’on appelle les scènes. Vous allez voir, c’est super simple une fois qu’on a compris l’idée en 2D !

Concepts identiques en 2D et 3D

Une carte web contient des couches en 2D. De même une scène web est en fait une carte en 3D qui contient des couches en 3D. On a plusieurs options pour charger et afficher une scène Web 3D dans notre application Web. Il y a plusieurs options pour créer sa scène web 3D dans une application :

- Soit on importe nos couches et on crée une scène dans notre application.
- Soit on importe déjà une WebScene qui est disponible sur ArcGIS Online, elle a donc déjà une ou plusieurs couches. Commençons par cela !

On va se connecter à ArcGIS Online et on va chercher une WebScene toute prête qui n’attend que nous pour être importée dans une application Web. Par exemple, on peut aller dans ArcGIS Online et chercher Paris 3D.

Le symbole en forme de globe nous indique bien qu’il s’agit d’une WebScene. En l’ouvrant vous avez la possibilité de l’observer dans la visionneuse de scène. A l’écran vous visualisez la scène dans son intégralité. Lorsque vous cliquez à droite sur « couches », vous verrez toutes les couches que compose la scène, en rouge. Si je décoche la couche  Batiments_3D_Paris, les couches entourées en vert ne seront plus affichées car  Batiments_3D_Paris est un groupe de couches qui regroupe plusieurs couches. Ainsi j’ai une couche représentant les arbres et un groupe de couches représentant tous les bâtiments de Paris.

En important cette WebScene dans votre application vous aurez directement importé toutes ces couches ! Comment l’importer ? Comme on l’a vu dans l’article précédent, avec l’id de la WebScene toujours situé dans l’url : 

https://sebastienszollo.maps.arcgis.com/home/webscene/viewer.html?webscene=0614ea1f9dd043e9ba157b9c20d3c538

Après avoir introduit la classe WebScene et la classe SceneView dans le require :

require([
      "esri/WebScene",
      "esri/views/SceneView"
    ], function(WebScene, SceneView) {

J’ajoute directement la Web Scene grâce à son id :

      Var webscene1 = new WebScene({
         portalItem: {
           id: "0614ea1f9dd043e9ba157b9c20d3c538"
         }
       });

Mais au lieu d’avoir une vue en 2D, on a une vue en 3D, donc on a le mot clé SceneView au lieu de MapView, qui fonctionne de la même manière ! C’est-à-dire qu’il faut toujours définir un conteneur et quelle carte on veut y mettre :

      var view = new SceneView({
        container: "viewDiv",
        map: webscene1
      });

Lorsqu’on a cherché Paris 3D dans ArcGIS Online, on a également vu en résultat une autre scène : Paris 3D inondations. Si vous voulez voir à quoi ressemblerait Paris s’il y avait une nouvelle crue de la Seine, n’hésitez pas à refaire les mêmes étapes que ci-dessus mais avec cette Scène Web !

Retrouvez le code sur mon github. 

Ajouter des couches 2D pour les visualiser en 3D

On n’est pas obligé d’importer directement une WebScene. Vous pouvez la créer dans votre application à partir de couches 2D. On procède d’ailleurs de la même manière avec la classe Map ! D’ailleurs les classes d’entités (Feature Layer) sont affichables aussi bien en 2D qu’en 3D ! Dans l'instruction require, on ajoute donc une référence au module FeatureLayer et on définit l’instance comme d’habitude dans la fonction. Dans cette situation, on va avoir besoin de la classe Map.

    require(["esri/Map", "esri/views/SceneView", "esri/layers/FeatureLayer"], function(Map, SceneView, FeatureLayer) {

La classe Map, va nous permettre, comme en 2D, de définir le fond de carte qui sera sur le globe mais aussi une couche d’élévation qui décrit la variation de l’altitude au sol. Et c’est lorsqu’on définira la vue à l’aide de SceneView que le code comprendra que la carte est 3D.

      var map1 = new Map({
        basemap: "topo-vector",
        ground: "world-elevation"
      });
      var view = new SceneView({
        container: "viewDiv",
        map: map1,
      });

À la fin de function(Map, SceneView, FeatureLayer), on peut créer un nouveau FeatureLayer et définir la propriété url sur la couche de séisme par exemple. Dans ArcGIS Online, on va dans « Contenu » puis « Living Atlas » et on cherche « Major earthquake » pour avoir les séismes les plus importants dans le monde. On remarque que la couche qu’on nous propose est bien une classe d’entités (Feature Layer).

En cliquant sur le lien du service, il nous suffit de récupérer l’url, puis on ajoute la couche d'entités à la carte dans la propriété url de l’instance FeatureLayer.

      var featureLayer = new FeatureLayer({
        url: " http://services1.arcgis.com/VAI453sU9tG9rSmh/arcgis/rest/services/Major_Earthquakes_features/FeatureServer/0"
      });

Enfin l’instance Map nous permet d’ajouter directement la couche à notre carte :

      map.add(featureLayer);

Comme en 2D, on peut aussi définir le niveau de zoom et le centre par défaut. Cela se fait avec la propriété camera dans laquelle on définit la position x, y, z. La propriété tilt donne l’inclinaison de votre caméra, ce qui donnera votre champ de vision. N’hésitez pas à tester différents angles, et zoomer/dézoomer avec la molette de la souris pour voir où vous vous situez.

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          position: {
            x: -118.808,
            y: 33.961,
            z: 2000 // meters
          },
          tilt: 45
        }
      });

Retrouvez le code sur mon github.

Enfin, pour donner le style lumineux comme vous l'avez vu sur le GIF, vous pouvez rajouter ce bout de code entre la déclaration de la classe d'entités (FeatureLayer) et l'ajout sur la carte :

  featureLayer.renderer = {
                    type: "simple",
                    symbol: {
                        type: "picture-marker",
                        url: "https://static.arcgis.com/images/Symbols/Firefly/FireflyB10.png",
                        width: 8,
                        height: 4
                    }
                }

N'hésitez pas à changer la valeur de width et height. Je reviendrais dans un prochain article plus précisément sur la manière de changer la symbologie de vos couches. Ce code est retrouvable sur mon github. Cliquez sur les liens correspondants pour visualiser Paris, les séismes, les séismes en Firefly. 

On se retrouve dans un prochain article pour apprendre comment changer la symbologie de mes épicentres de séisme et leur donner un effet lumineux. A bientôt !