Restez à l'heure

ReneRubalcava

<\/HEAD>

<\/P>

<\/P>

L'API ArcGIS JS 4.0 Beta<\/A> reçoit encore beaucoup d'attention. De nombreuses mises à jour à chaque version beta. Fonctionnalités mises à jour, nouvelles fonctionnalités, documentation mise à jour et tout ce bon stuff.<\/P>

<\/P>

Mais il reste encore des coins sombres de l'API qui doivent être complétés...ou documentés ! C'est là que je vis.<\/EM><\/P><\/P>Lorsque la beta 4.0 est sortie pour la première fois, j'ai fait un

super article de blog<\/A> sur l'utilisation des Accessors pour enregistrer la caméra d'une vue et la rejouer. Ça fonctionne assez bien, mais j'ai toujours senti que ça pouvait être un peu mieux. Vous remarquerez dans l'exemple de cet article, que j'utilise ce module étrange appelé esri\/core\/Scheduler<\/STRONG>.<\/P><\/P>Qu'est-ce que c'est ?<\/EM><\/P><\/P>C'est une fonctionnalité API bas niveau, c'est ce que c'est. Le Scheduler est une version modifiée du Scheduler trouvé dans Dojo2<\/A>. C'est essentiellement une façon de travailler avec requestAnimationFrame<\/A>. Ce n'est pas encore documenté, parce que beta<\/EM>, les choses peuvent changer.<\/P><\/P>Donc ce que vous pouvez faire, c'est planifier des choses pour qu'elles se produisent pendant la prochaine frame de votre application. Ceci est utilisé pour ... pouvez-vous deviner<\/EM> ... les animations ! Voici<\/A> un petit tutoriel sympa sur requestAnimationFrame.<\/P>

<\/P>

Quand vous travaillez avec des cartes 3D, vous travaillez avec des animations. Vous n'avez pas besoin de vous soucier des détails, mais si vous voulez faire quelque chose pour rester synchronisé avec une carte 3D, vous devriez vous familiariser avec requestAnimationFrame.<\/P>

<\/P>

Scheduler peut aider avec cela.<\/P>

<\/P>

Dans mon ancien exemple, je m'appuyais encore sur setInterval<\/SPAN>, alors voici comment je ferais tout cela avec Scheduler.<\/P><\/P>require([\n  "esri\/Map",\n  "esri\/views\/SceneView",\n  "esri\/core\/watchUtils",\n  "esri\/core\/Scheduler",\n  "dojo\/on",\n  \/\/Widget items\n  'dojo\/_base\/declare',\n  'dojo\/dom-class',\n  'dijit\/_WidgetBase',\n  'dijit\/_TemplatedMixin',\n  "dojo\/domReady!"\n], function (Map, SceneView, watchUtils, Scheduler, on, declare, domClass, _WidgetBase, _TemplatedMixin){\n\n  var template = '' +\n  '<div>'+\n    '  <input class=\"camera-slider\" data-dojo-attach-point=\"slider\"'+\n    '  type=\"range\" min=\"1\" max=\"1\" step=\"1\" value=\"1\">'+\n    '  <a href=\"javascript:void(0)\" data-dojo-attach-point=\"reverseBtn\"'+\n    '    data-dojo-attach-event=\"click:playReverse\"'+\n    '    title=\"Lire les vues en sens inverse\"'+\n    '    class=\"btn btn-info btn-fab btn-raised mdi-av-fast-rewind\"><\\/a>'+\n    '  <a href=\"javascript:void(0)\" data-dojo-attach-point=\"playBtn\"'+\n    '    data-dojo-attach-event=\"click:play\"'+\n    '    title=\"Lire les vues\"'+\n    '    class=\"btn btn-info btn-fab btn-raised mdi-av-play-arrow\"><\\/a>'+\n    '  <a href=\"javascript:void(0)\" data-dojo-attach-point=\"stopBtn\"'+\n    '    data-dojo-attach-event=\"click:stop\"'+\n    '    title=\"Pause de l'enregistrement de la vue\"'+\n    '    class=\"btn btn-info btn-fab btn-raised mdi-av-pause");

}
        }
      }.bind(this)});
    }
  });
 
  var map = new Map({
    basemap: "dark-gray"
  });

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

  var camRecorder = new CameraRecorder(
    { view: view }, document.getElementById('recorder')
  );

  view.then(function() {
    camRecorder.recordStart();
  });

});

Ce que je fais ici, c'est deux choses.

J'utilise Scheduler.schedule() ici pour planifier certaines méthodes à exécuter lors de la prochaine frame. Ce sont les méthodes qui stockent les changements de caméra ou de curseur pour enregistrer la vue.

Puis, lorsque vous jouez les vues de caméra enregistrées en séquence, j'utilise Scheduler.addFrameTask({update: function(){}}) pour ajouter une fonction lorsque la vue est mise à jour, essentiellement rendue. Il y a des mécanismes internes liés au cycle de vie dans addFrameTask, mais je tire un peu au hasard ici, alors utilisons update comme point d'accroche.

Si vous ne synchronisez pas les opérations liées à l'animation de cette manière, vous finirez avec une carte saccadée. Ma première version de cette application fonctionnait strictement en surveillant les changements de propriété, mais cela a perturbé mon application. Maintenant, c'est beaucoup plus fluide.

Vous pouvez voir cet

exemple mis à jour ici.

Donc si vous êtes intéressé par l'animation de la vue, jouer avec la caméra ou travailler en synchronisation avec animateTo pour enrichir votre application, amusez-vous avec Scheduler ou simplement requestAnimationFrame si vous préférez.

Pour plus d'astuces et conseils geodev, consultez mon blog.