*****
This Web Map Tile Service (WMTS) Implementation Standard provides a standard based solution to serve digital maps using predefined image tiles.
このウェッブマップタイルサービス（Web Map Tile Service:WMTS）実装標準は、事前定義された画像タイルを使用してデジタル地図サービスを提供するための標準ベースのソリューションを提供します。
The service advertises the tiles it has available through a standardized declaration in the ServiceMetadata document common to all OGC web services.
サービスは、すべてのOGCのWebサービスに共通するServiceMetadata文書内の標準化された宣言を通じて有効であるタイルを提供します。
This declaration defines the tiles available in each layer (i.e. each type of content), in each graphical representation style, in each format, in each coordinate reference system, at each scale, and over each geographic fragment of the total covered area.
この宣言は、各レイヤ（つまり、各種類のコンテンツ）で、各グラフィック表現のスタイルで、各形式で、各座標参照システムで、各スケールで、全カバーエリアの各地理断片の上に、利用可能タイルを定義しています。
The ServiceMetadata document also declares the communication protocols and encodings through which clients can interact with the server.
ServiceMetadata文書は、クライアントがサーバーと対話可能な通信プロトコルおよびエンコーディングを宣言します。
Clients can interpret the ServiceMetadata document to request specific tiles.
クライアントは、特定のタイルを要求するためにServiceMetadata文書を解釈することができます。
*****
HTML ファイルの作成
同じように「wmts.js」を開きます。
f 「wmts.html」の内容をコピーして「220-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「220-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wmts.js」の内容をコピーして貼り付け、修正します。「wmts-require.js」も「220-ol3ex-require.js」に貼り付けます。
「220-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.0.0/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="v3.0.0/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style>
/** attribution が２行になるので表示できるように */
.ol-attribution ul{
line-height: 15px;
}
.ol-attribution.ol-uncollapsible{
height:2.1em;
line-height:1em;
}
</style>
<title>WMTS 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.0.0/examples/"><img src="v3.0.0/resources/logo.png"> OpenLayers 3 Examples</a>
</div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> <div class="row-fluid"> <div class="span12"> <h4 id="title">WMTS example</h4> <p id="shortdesc">Example of a WMTS source.</p>
<div id="docs"> <!-- <p>See the <a href="wmts.js" target="_blank">wmts.js source</a> to see how this is done.</p> --> <!-- ファイル修正 --> <p>See the <a href="220-ol3ex.js" target="_blank">220-ol3ex.js source</a> to see how this is done.</p>
</div> <div id="tags">wmts</div> </div> </div> </div>
<!-- <script src="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.0.0/examples/jquery.min.js" type="text/javascript"></script> <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
<!-- <script src="loader.js?id=wmts" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=220-ol3ex" type="text/javascript"></script> </body> </html>
0 件のコメント:
コメントを投稿