説明に次のようにあります。
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.
現在のビューの解像度に応じた表示/非表示レイヤ。
ズームイン２回で：MapBox レイヤが非表示になり、それに替えて OSM レイヤが表示されます。
ズームインし続けると、OSM レイヤも消えます。
レイヤのレンダリングは、ここでは minResolution と maxResolution オプションを使用して制御しています。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.2.1」->「examples」->「min-max-resolution.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「min-max-resolution.js」を開きます。
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>
0 件のコメント:
コメントを投稿