説明に次のようにあります。
Image tile sources fire events related to tile loading. You can listen for tileloadstart, tileloadend, and tileloaderror type events to monitor tile loading progress. This example registers listeners for these events and renders a tile loading progress bar at the bottom of the map.
画像タイルソースは、タイルのロードに関連するイベントを発生します。タイルロードの進行状況を監視するために、tileloadstart と tileloadend、tileloaderror タイプのイベントをリッスンすることができます。この例では、これらのイベントのリスナを登録し、マップの下部にあるタイルのロードプログレス（進行状況）バーをレンダリングします。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.3.0」->「examples」->「tile-load-events.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「tile-load-events.js」を開きます。
f 「tile-load-events.html」の内容をコピーして「280-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「280-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「tile-load-events.js」の内容をコピーして貼り付け、修正します。「tile-load-events-require.js」も「280-ol3ex-require.js」に貼り付けます。
「280-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.3.0/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tile load events example</title>
<style>
.map {
background: #E0ECED;
}
.wrapper {
position: relative;
}
#progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: rgba(0, 60, 136, 0.4);
width: 0;
transition: width 250ms;
}
</style>
</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.3.0/examples/"><img src="v3.3.0/resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 wrapper">
<div id="map" class="map"></div>
<div id="progress"></div>
</div>
</div>
<div class="row-fluid"> <div class="span12"> <h4 id="title">Tile load events example</h4> <p id="shortdesc">Example using tile load events.</p>
<div id="docs">
<p>Image tile sources fire events related to tile
loading. You can listen for <code>tileloadstart
</code>, <code>tileloadend</code>, and
<code>tileloaderror</code> type events to monitor
tile loading progress. This example registers
listeners for these events and renders a tile
loading progress bar at the bottom of the map.</p>
<!-- <p>See the <a href="tile-load-events.js" target="_blank">tile-load-events.js source</a> for more detail on how this is done.</p> --> <!-- ファイル修正 --> <p>See the <a href="280-ol3ex.js" target="_blank">280-ol3ex.js source</a> for more detail on how this is done.</p>
</div> <div id="tags">tile, events, loading</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.3.0/resources/jquery.min.js" type="text/javascript"></script> <script src="v3.3.0/resources/example-behaviour.js" type="text/javascript"></script>
<!-- <script src="loader.js?id=tile-load-events" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=280-ol3ex" type="text/javascript"></script>
</body> </html>
0 件のコメント:
コメントを投稿