Zoomer sur n'importe quoi

ReneRubalcava

<\/HEAD>

<\/P>

Gardons celui-ci court et doux. Combien de fois avez-vous travaillé avec l'ArcGIS API for JavaScript et dû zoomer sur une entité. Vous êtes-vous gratté la tête face à certains comportements étranges de l'utilisation de map#centerAndZoom<\/A> ? Peut-être vous êtes-vous retrouvé à écrire des instructions switch\/case ou if\/else pour zoomer la carte selon que vous zoomiez sur un point, un polygone ou une polyligne.<\/SPAN><\/SPAN><\/P><\/P>Lisez la documentation<\/STRONG><\/SPAN><\/P>Avant d'examiner comment zoomer facilement sur des entités, voyons pourquoi la méthode centerAndZoom déteste que vous l'utilisiez.<\/SPAN><\/P>La signature de la méthode centerAndZoom est centerAndZoom(mapPoint, levelOrFactor). Que signifie levelOrFactor ? Regardons la définition.<\/SPAN><\/P><\/P>"<\/STRONG>Lorsqu'on utilise un <\/SPAN>ArcGISTiledMapServiceLayer<\/STRONG><\/SPAN>, la carte est zoomée au niveau spécifié. Lorsqu'on utilise un <\/SPAN>DynamicMapServiceLayer<\/STRONG><\/SPAN>, la carte est zoomée en avant ou en arrière par le facteur spécifié. Par exemple, utilisez 0.5 pour zoomer deux fois plus près et 2.0 pour dézoomer deux fois plus loin."<\/STRONG><\/SPAN><\/EM><\/SPAN><\/P><\/P>C'est bien mieux. Non ? Toujours confus ? Ok, en gros si vous utilisez un <\/SPAN>ArcGISTiledMapServiceLayer <\/SPAN>vous pouvez zoomer la carte à un niveau de détail spécifique. Pensez au curseur de zoom sur une carte. Cependant, si vous utilisez un <\/SPAN>DynamicMapServiceLayer <\/SPAN>alors ça devient bizarre. Maintenant vous pouvez zoomer deux fois plus ou dézoomer deux fois plus, mais vous devez spécifier le facteur en décimal, donc pensez en pourcentages. Je suppose que vous voulez zoomer deux fois plus près, donc 0.5 semble être un pari sûr, mais si vous mettiez 0.25, ce serait quoi, zoomer quatre fois plus près.<\/SPAN><\/P><\/P>Faites le travail<\/STRONG><\/SPAN><\/P>Ok, avec cela en tête, vous savez à peu près quoi faire. J'ai mis ensemble ce petit module il y a un moment quand j'en ai eu assez d'écrire la même chose encore et encore et de vérifier les types de géométrie et différents scénarios. Je parie que cela gérera 90% des situations auxquelles vous serez confronté (Je n'ai pas de chiffres précis pour étayer cela, mais faites-moi confiance<\/EM>).<\/SPAN><\/P>define([
  'dojox\/lang\/functional\/curry'
], function(curry) {
  var zoom = curry(function(map, geometry) {
   if (geometry.type === 'point') {
     &nbspvar mz = map.getMaxZoom() ;
     &nbspif (mz >-1) {
       &nbspmap.centerAndZoom(geometry, mz - 2);
     &nbsp} else {
       &nbspmap.centerAndZoom(geometry, 0.25);
     &nbsp}
   } else {
     &nbspmap.setExtent(geometry.getExtent());
   }
 } );
&nbspreturn zoom;
});<\/PRE><\/P>Voici une démo en direct<\/A>.<\/SPAN>

Donc vous vérifiez essentiellement si la géométrie est un point. Si c'est un point, vous obtenez le niveau de zoom maximum de la carte. À ce stade, vous avez deux choix:<\/SPAN>

1. S'il est supérieur à -1, zoomez à ce niveau et soustrayez 2 pour ne pas trop zoomer. Ou pas, c'est à vous de voir.<\/SPAN>
2. Zoomez avec un facteur de 0.25, ce qui signifie zoomer quatre fois le niveau actuel.<\/SPAN>

Si la géométrie n'est pas un point, c'est facile, les polygones, polylignes et multipoints peuvent retourner une étendue,<\/A> donc vous pouvez simplement définir l'étendue actuelle de la carte à l'étendue de la géométrie.<\/SPAN> <\/> P > < P > < SPAN style = " color : #000000 ;font - size :12pt ;font - style :normal ;font - family :Arial ; " > < STRONG > Passez à la vitesse supérieure < / STRONG > < / SPAN > < / P > < P > < SPAN style = " color : #000000 ;font - family :Arial ;font - size :15px ;font - style :normal ;font - weight :normal ; " > Cela fonctionne assez bien, mais disons que vous voulez une solution plus flexible. La version ci-dessus fonctionne bien lorsqu'on lui passe une géométrie, mais qu'en est-il d'un graphic ou d'un tableau de graphics ? Ce sont tous des objets valides sur lesquels vous pourriez vouloir zoomer. Donc pour cela, construisons un module qui pourrait gérer à peu près tout ce que vous lui lancez.< / SPAN > < / P > < PRE class = " lia-code-sample line-numbers language-none " > & nbsp ; define([
& nbsp ; & nbsp ; & nbsp ; 'dojox/lang/functional/curry',
& nbsp ; & nbsp ; & nbsp ; 'esri/graphic',
& nbsp ; & nbsp ; & nbsp ; 'esri/graphicsUtils'
& nbsp ; ], function(curry, Graphic, gUtils) {
& nbsp ; & nbsp ; & nbsp ; var zoomToPoint = function(m, geometry) {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var mz = m.getMaxZoom();
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; if (mz & gt;-1) {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; return m.centerAndZoom(geometry, mz - 2);
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; } else {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; return m.centerAndZoom(geometry, 0.25);
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; }
& nbsp ; & nbsp ; & nbsp ; };
& nbsp ; & nbsp ; & nbsp ; var zoomToGeom = function(m, geometry) {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; if (geometry.type === 'point') {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; return zoomToPoint(m, geometry);
& nbsp ; & nbsp ; & nbsp ; & nbsp ; } else {
& nbsp ; & nbsp ; & nbsp ; & nb sp;; return m.setExtent(geometry.getExtent());
& nb sp;; }
& nb sp;; };
& nb sp;; var zoomToGraphics = function(m, graphics) {
& nb sp;; if (!graphics.length) return;
& nb sp;; if (graphics.length > 1) {
& nb sp;; return gUtils.graphicsExtent(graphics);
& nb sp;; } else {
& nb sp;; var g = graphics[0];
& nb sp;; var geometry = g.geometry;
& nb sp;; if (geometry.type === 'point') {
& nb sp;; return zoomToPoint(m, geometry);
& nb sp;; } else {
& nb sp;; return m.setExtent(gUtils.graphicsExtent(graphics));
& nb sp;; }
& nb sp;; }
& nb sp;; };
& nb sp;; var zoomToGraphic = function(m, graphic) {
& nb sp;; return zoomToGeom(m, graphic.geometry);
& nb sp;; };
& nb sp;; var zoom = curry(function(m, gs) {
& nb sp;; if (gs.type) {
& nb sp;; return zoomToGeom(m, gs);
& nb sp;; }
& nb sp;; if (gs instanceof Array) {
& nb sp;; return zoomToGraphics(m, gs);
& nb sp;; }
& nb sp;; if (gs instanceof Graphic) {
& nb sp;; return zoomToGraphic(m, gs);
& nb sp;; }
& nb sp;; });
& nb sp;; return zoom;
& });< / PRE > < P > < / P > < P > < SPAN style = " color : #000000;font-family :Arial;font-size :15px;font-style :normal;font-weight :normal " > Ce module utilise le module esri/graphicsUtils< / A > pour gérer les tableaux de Graphics , il peut gérer un seul Graphic ou Geometry . Cliquez ici pour voir une démo de ce module <\/A> en action.<\/SPAN><\/P>

<\/P>

Bam terminé !<\/STRONG><\/SPAN><\/P>Woah woah<\/EM>. Qu'est-ce que ce

curry<\/A> ? Ok, alors je l'ai glissé ici. Utiliser curry vous permet essentiellement d'évaluer partiellement des fonctions. Ce qui signifie que vous passez la map à la fonction avant d'avoir besoin de passer la géométrie. Voici une explication de curry en JavaScript<\/A>.<\/SPAN><\/P>

Ce n'est pas une exigence stricte, mais cela pimente un peu les choses.<\/SPAN><\/P><\/P>Jouez avec, modifiez-le, abusez-en et codez.<\/SPAN><\/P><\/BODY><\/HTML>