「Preload example (preload.html)」を参考に地図を表示してみます。
説明に次のようにあります。
Example of tile preloading.
The map on the left preloads low resolution tiles. The map on the right
does not use any preloading. Try zooming out and panning to see the
difference.
タイルプリロードの例。
左のマップは低解像度のタイルをプリロード（事前読込み）します。右のマップは、どれもプリロードを使用しません。その差を見るためにズームアウトとパンを試しください。
HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.2.1」->「examples」->「preload.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「preload.js」を開きます。
c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。
d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「266-ol3ex.html」と入力し、「次へ」ボタンをクリックします。
e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。
f 「preload.html」の内容をコピーして「266-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「266-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「preload.js」の内容をコピーして貼り付け、修正します。「preload-require.js」も「266-ol3ex-require.js」に貼り付けます。
「266-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>Preload 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="span6 mapcontainer">
<div id="map" class="map"></div>
</div>
<div class="span6 mapcontainer">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Preload example </h4>
<p id="shortdesc">Example of tile preloading.</p>
<div id="docs">
<p>The map on the left preloads low resolution tiles.
The map on the right does not use any preloading.
Try zooming out and panning to see the difference.</p>
<!--
See the <a href="preload.js" target="_blank">preload.js source</a> to see how this is done.</p>
-->
<!-- ファイル修正 -->
See the <a href="266-ol3ex.js" target="_blank">266-ol3ex.js source</a> to see how this is done.</p>
</div>
<div id="tags">preload, bing</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=preload" type="text/javascript"></script>
-->
<!-- ファイル修正 --> <!-- ディレクトリ修正 -->
<script src="loader.js?id=266-ol3ex" type="text/javascript"></script>
</body>
</html>
