ラベル Resolutions の投稿を表示しています。 すべての投稿を表示
ラベル Resolutions の投稿を表示しています。 すべての投稿を表示

2015年2月18日水曜日

2 - ol3.2ex 64b -Min/max resolution example 2

「min-max-resolution.js(264-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「264-ol3ex.js」
/**
 * Create the map.
 */
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング(事前描画)を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。(ol3 API)
   */
   source: new ol.source.OSM(),
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
    */
   minResolution: 200,
   maxResolution: 2000
  }),
  new ol.layer.Tile({
   source: new ol.source.TileJSON({
   /** ol.source.TileJSON 
    * Layer source for tile data in TileJSON format.
    * TileJSON フォーマットのタイルデータのためのレイヤソース。
    *(ol3 API)
    */
    url: 'http://api.tiles.mapbox.com/v3/' +
     'mapbox.natural-earth-hypso-bathy.jsonp',
    crossOrigin: 'anonymous'
 /** crossOrigin
  * The crossOrigin attribute for loaded images. Note 
  * that you must provide a crossOrigin value if you 
  * are using the WebGL renderer or if you want to 
  * access pixel data with the Canvas renderer. See 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image for more detail.
  * ロードされたイメージの crossOrigin属性。WebGLのレンダラー
  * を使用している場合、または、キャンバスレンダラでピクセルデー
  * タにアクセスする場合、crossOrigin 値を提供なければならない
  * ことに注意してください。詳細は 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image を参照してください。(ol3 API)
  */
   }),
   minResolution: 2000,
   maxResolution: 20000
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ(型)の説明 - 式などで表示
   * (@use JSDoc[http://usejsdoc.org/]より)
   */
   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [653600, 5723680],
  zoom: 5
 })
});

2 - ol3.2ex 64a - Min/max resolution example 1

「Min/max resolution example (min-max-resolution.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Show/hide layers depending on current view resolution.
Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.
If you continue to zoom in, you'll see the OSM layer also disappear.
The rendering of the layers are here controlled using minResolution and maxResolution options.

現在のビューの解像度に応じた表示/非表示レイヤ。
ズームイン2回で:MapBox レイヤが非表示になり、それに替えて OSM レイヤが表示されます。
ズームインし続けると、OSM レイヤも消えます。
レイヤのレンダリングは、ここでは minResolution と maxResolution オプションを使用して制御しています。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.2.1」->「examples」->「min-max-resolution.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「min-max-resolution.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「264-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「min-max-resolution.html」の内容をコピーして「264-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「264-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「min-max-resolution.js」の内容をコピーして貼り付け、修正します。「min-max-resolution-require.js」も「264-ol3ex-require.js」に貼り付けます。


「264-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.2.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Min/max resolution example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
     <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.2.1/examples/"><img src="v3.2.1/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12 mapcontainer">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Min/max resolution example </h4>
     <p id="shortdesc">Show/hide layers depending on current 
      view resolution.</p>
     <div id="docs">
      <p>Zoom in twice: the MapBox layer should hide whereas 
       the OSM layer should be shown.</p>
      <p>If you continue to zoom in, you'll see the OSM layer 
       also disappear.</p>
      <p>The rendering of the layers are here controlled
       using minResolution and maxResolution options.</p>
      <!--
      See the <a href="min-max-resolution.js" target="_blank">min-max-resolution.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="264-ol3ex.js" target="_blank">264-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">minResolution, maxResolution, resolution</div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.2.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.2.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=min-max-resolution" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=264-ol3ex" type="text/javascript"></script>
 </body>
</html>

2009年12月1日火曜日

OpenLayers 35b TileCache について

serverResolutions について Class Documents を訳してみました。

serverResolutions {Array}
A list of all resolutions available on the server. Only set this property if the map resolutions differs from the server.

サーバー上で利用可能なすべての解像度のリストです。地図の解像度がサーバーと異なるとき、このプロパティを設定します。


また、Tolecache ホームページの

Using TileCache With OpenLayers
http://tilecache.org/docs/README#using-tilecache-with-openlayers

も訳してみました。

Using TileCache With OpenLayers

To run OpenLayers with TileCache the URL passed to the OpenLayers.Layer.WMS constructor must point to the TileCache script, i.e. tilecache.cgi or tilecache.py. As an example see the index.html file included in the TileCache distribution.

TileCacheを使ってOpenLayersを実行するために、OpenLayers.Layer.WMSのコンストラクタに渡したURLは、TileCacheスクリプト、すなわち、tilecache.cgiまたはtilecache.pyを指定しなければなりません。例として、TileCache ディストリビューションに含まれている index.html ファイル参照してください。


Note: index.html assumes TileCache is set up under CGI (see above). If you set up TileCache under mod_python you’d need to slighly modify index.html: the URL passed to the OpenLayers.Layer.WMS constructor must point to the mod_python script as opposed to the CGI script, so replace tilecache.cgi with tilecache.py. Similarly, you would need to edit this URL if you were to use TileCache with the standalone HTTP Server or FastCGI.

注:TileCache を mod_python に設定しているなら,少し index.htmlを変更する必要があります。:OpenLayers.Layer.WMS コンストラクタに渡た URL は、CGI スクリプトに対して mod_python スクリプトを指定しなければなりません。それで、tilecache.py とともに tilecache.cgi を置き換えます。同じように、TileCacheをスタンドアロンの HTTP Server または FastCGI とともに使用した場合には、この URL を編集する必要があります。


The most important thing to do is to ensure that the OpenLayers Layer has the same resolutions and bounding box as your TileCache layer. You can define the resolutions in OpenLayers via the ‘resolutions’ option or the ‘maxResolution’ option on the layer. The maxExtent should be defined to match the bbox parameter of the TileCache layer.

実行ための最も重要なことは、OpenLayers レイヤが TileCache と同じ解像度とバウンディングボックスだということを確認することです。あなたは、レイヤの'resolution'オプションまたは'maxResolution'オプションを介して、OpenLayersの解像度を定義することができます。 maxExtent は、TileCache レイヤの bbox パラメータと一致するように定義する必要があります。


If you are using TileCache for overlays, you should set the ‘reproject’ option on the layer to ‘false’.

オーバーレイとして TileCache を使用している場合は、レイヤー上の 'reproject' オプションを 'false' に設定する必要があります。

2009年11月28日土曜日

OpenLayers 33b OpenLayers.Layer Properties の Resolutions について

Class Documents より

OpenLayers.Layer
Properties
resolutions {Array}
A list of map resolutions (map units per pixel) in descending order. If this is not set in the layer constructor, it will be set based on other resolution related properties (maxExtent, maxResolution, maxScale, etc.).

地図の解像度(1ピクセルあたりの地図単位)の降順のリストです。このレイヤコンストラクタで設定されていないと、他の関連するプロパティ(maxExtent、maxResolution、maxScaleなど)の解像度に基づいて設定されます。


地図を拡大縮小すれば分かりますが、設定した resolutions でだけ表示されます。
minResolution を設定したときは、これ以下の解像度では表示されません。
maxResolution を設定したときは、これ以上の解像度では表示されません。

この地図では、南北方向の範囲は 1104000-1054000=50000m です。
解像度は、50000m/250pixsel=195.3125 となります。
(実際には、Firebug -> DOM -> layer1 の maxResolution 195.3125 から逆算しました。)


OpenLayers の Spherical Mercator の First Map
http://docs.openlayers.org/library/spherical_mercator.html#first-map

に次のような文章がありました。

This map has a set of assumptions about the maxResolution of the map. Specifically, most spherical mercator maps use an extent of the world from -180 to 180 longitude, and from -85.0511 to 85.0511 latitude. Because the mercator projection stretches to infinity as you approach the poles, a cutoff in the north-south direction is required, and this particular cutoff results in a perfect square of projected meters. As you can see from the maxExtent parameter sent in the constructor of the layer, the coordinates stretch from -20037508.34 to 20037508.34 in each direction.

The maxResolution of the map defaults to fitting this extent into 256 pixels, resulting in a maxResolution of 156543.0339. This is handled internally by the layer, and does not need to be set in the layer options.

この地図は、マップのmaxResolutionについての仮定を設定しています。具体的には、ほとんどの球状のメルカトル図法の地図は、-180から180の経度、-85.0511から85.0511の緯度の世界の範囲を使用しています。メートル投影は、極点に近づくほど無限大に延びます、南北方向に切り取りが必要です、この特定のカットオフは、投影されたメータの完全な平面になります。このようにレイヤのコンストラクタで送信されたmaxExtentパラメータからわかるように、座標はそれぞれの方向に-20037508.34から20037508.34に延ばされます。

地図の maxResolution は、256ピクセル(私の意見ですが、tile[タイル]の一辺だと思います)にこの範囲内に合わせるため初期化します、結果として 156543.0339 の maxResolution になります。これは、レイヤによって内部で処理されて、レイヤのオプションを設定する必要はありません。