説明に次のようにあります。
This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.
この例では、カスタムCSSを定義するのと同じように、サポートされているオプションを使用して、overviewmap コントロールをカスタマイズする方法を示します。また、概観マップがどのように反応するかを見るために、Shiftキーを使用してマップを回転させることができます。
HTML ファイルの作成
同じように「overviewmap-custom.js」を開きます。
d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「271-ol3ex.html」と入力し、「次へ」ボタンをクリックします。
f 「overviewmap-custom.html」の内容をコピーして「271-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「271-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「overviewmap-custom.js」の内容をコピーして貼り付け、修正します。「overviewmap-custom-require.js」も「271-ol3ex-require.js」に貼り付けます。
「271-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">
<style type="text/css">
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
.ol-rotate {
top: 170px;
right: 0;
}
</style>
<title>ol3 OverviewMap control example with advanced customization</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"> <h4 id="title">OverviewMap control, advanced</h4> <div id="map" class="map"></div>
<div class="row-fluid"> <p id="shortdesc">Example of OverviewMap control customization.</p>
<div id="docs"> <!-- <p>See the <a href="overviewmap-custom.js" target="_blank">overviewmap-custom.js source</a> to see how this is done.</p> --> <!-- ファイル修正 --> <p>See the <a href="271-ol3ex.js" target="_blank">271-ol3ex.js source</a> to see how this is done.</p>
<p>This example demonstrates how you can customize
the overviewmap control using its supported options as
well as defining custom CSS. You can also rotate the
map using the shift key to see how the overview map
reacts.</p>
</div> <div id="tags">overview, overviewmap</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=overviewmap-custom" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=271-ol3ex" type="text/javascript"></script>
</body> </html>
0 件のコメント:
コメントを投稿