何にでもズーム

ReneRubalcava

<\/HEAD>

<\/P>

短くて簡潔にしましょう。ArcGIS API for JavaScript を使っていて、フィーチャにズームしなければならなかったことは何度ありますか？map#centerAndZoom<\/A> の奇妙な動作に頭を悩ませたことはありませんか？ポイント、ポリゴン、またはポリラインにズームするかどうかによってマップをズームするために switch/case や if/else 文を書いていたかもしれません。<\/SPAN><\/SPAN><\/P><\/P>ドキュメントを読む<\/STRONG><\/SPAN><\/P>フィーチャに簡単にズームする方法を見る前に、なぜ map の centerAndZoom メソッドがあなたを困らせるのか見てみましょう。<\/SPAN><\/P>centerAndZoom のメソッドシグネチャは centerAndZoom(mapPoint, levelOrFactor) です。levelOrFactor とは何でしょう？定義を見てみましょう。<\/SPAN><\/P><\/P>"<\/STRONG>ArcGISTiledMapServiceLayer を使用すると、指定されたレベルにマップがズームされます。DynamicMapServiceLayer を使用すると、指定された係数でマップがズームインまたはズームアウトされます。例えば、0.5 を使うと2倍ズームインし、2.0 を使うと2倍ズームアウトします。"<\/STRONG><\/SPAN><\/EM><\/SPAN><\/P><\/P>これでずっとわかりやすくなりましたね？まだ混乱していますか？基本的には ArcGISTiledMapServiceLayer <\/SPAN> を使っている場合は、マップのズームスライダーのように特定の詳細レベルまでズームできます。しかし DynamicMapServiceLayer <\/SPAN> を使うと挙動が変わります。今度は小数で係数を指定して、2倍ズームインや2倍ズームアウトができます。おそらく2倍ズームインしたいのであれば0.5が安全ですが、0.25なら4倍ズームインになります。<\/SPAN><\/P><\/P>実践しよう<\/STRONG><\/SPAN><\/P>それを踏まえれば、やるべきことはほぼわかります。同じコードを書き続けるのに疲れたので、ジオメトリタイプや様々なシナリオをチェックするこの小さなモジュールを作りました。これで90%の状況には対応できると思います（具体的な数字はありませんが信じてください）。<\/SPAN><\/P>define([
  'dojox\/lang\/functional\/curry'
], function(curry) {
  var zoom = curry(function(map, geometry) {
    if (geometry.type === 'point') {
      var mz = map.getMaxZoom() ;
      if (mz > -1) {
        map.centerAndZoom(geometry, mz - 2);
      } else {
        map.centerAndZoom(geometry, 0.25);
      }
    } else {
      map.setExtent(geometry.getExtent());
    }
  });
  return zoom;
});<\/PRE><\/P>ライブデモはこちら<\/A>です。<\/SPAN><\/P>

<\/P>

基本的にはジオメトリがポイントかどうかをチェックします。ポイントならマップの最大ズームレベルを取得します。この時点で選択肢は二つあります:<\/SPAN><\/P>もし -1 より大きければ、そのレベルまでズームし、近づきすぎないように2引きます。もちろんこれは任意です。<\/SPAN>0.25 の係数でズームインします。つまり現在の4倍のズームレベルになります。<\/SPAN>ジオメトリがポイントでない場合は簡単です。ポリゴン、ポリライン、多点は

範囲(extent)を返すことができるので、そのジオメトリの範囲にマップの現在の範囲を設定すればよいのです。<\/SPAN>

<\/P>

さらに一歩進める<\/STRONG>

この方法でも十分ですが、もっと柔軟な解決策が欲しい場合もあります。上記のバージョンはジオメトリが渡された場合には問題ありませんが、グラフィックやグラフィックの配列の場合はどうでしょう？これらも有効なオブジェクトであり、ズーム対象になることがあります。そのため、それらすべてに対応できるモジュールを作りましょう。<\/SPAN>

  define([
   'dojox/lang/functional/curry',
   'esri/graphic',
   'esri/graphicsUtils'
 ]/function(curry, Graphic, gUtils) {
   if (mz >-1) {
   if (!graphics.length) return;
   if (graphics.length &gt ;1) {
   } else {
   } else {
  } else {
 } else {
});
});< /PRE >< P >< SPAN style = " color  000000 ;font - family :Arial ;font - size :15 px ;font - style :normal ;font - weight :normal " > このモジュールは/ developers . arcgis . com / javascript / jsapi / esri.graphicsutils-amd.html" rel="nofollow noopener noreferrer"> esri / graphicsUtils < / A > モジュールを利用してグラフィック配列を処理し、単一の Graphic または Geometry にも対応できます。こちらから/ jsbin . com / caciji / 1 / edit ? js , output" rel="nofollow   noopener noreferrer">このモジュールのデモ <\/A>を実際にご覧ください。<\/SPAN><\/P>
<\/P>
バム、完了！<\/STRONG><\/SPAN><\/P>おっとおっと<\/EM>。これは何の
curry<\/A>のナンセンス？さて、これはこっそり入れました。curryを使うと基本的に関数を部分的に評価できます。つまり、ジオメトリを渡す前に関数にmapを渡すことができるということです。こちらはJavaScriptにおけるcurryの説明<\/A>です。<\/SPAN><\/P>
これは必須ではありませんが、少しスパイスを加えることができます。<\/SPAN><\/P><\/P>遊んでみて、修正して、酷使してコードを書いてください。<\/SPAN><\/P><\/BODY><\/HTML>