2014年10月30日木曜日

2 - ol3ex 24b - Stamen example 2

「stamen.js(224-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。
maps.stamen.com(http://maps.stamen.com)次のように、説明があります。

*****
For over a decade, Stamen has been exploring cartography with our clients and in research. These maps are presented here for your enjoyment and use wherever you display OpenStreetMap data.
十年以上にわたって、Stamen は、クライアントと研究に地図作成を模索してきました。これらのマップは、楽しみのためここに提示し、OpenStreetMap のデータを表示する場所ならどこでも使えます。
*****

タイルの種類は、Toner、Terrain、Watercolor、Burning Map、Mars??、Trees, Cabs & Crime があります。
ライセンスについては次のようにあります。

*****
How to Use These Tiles Elsewhere
他の場所でのこれらのタイルの使い方
Except otherwise noted, each of these map tile sets are © Stamen Design, under a Creative Commons Attribution (CC BY 3.0) license.
特に断りのない場合を除き、これらのマップタイルセットはそれぞれ、クリエイティブコモンズ(3.0 BY CC)ライセンスの下で、© Stamen Design(すべての著作権の主張)です。

We’d love to see these maps used around the web, so we’ve included some brief instructions to help you use them in the mapping system of your choice. These maps are available free of charge. If you use the tiles we host here, please use this attribution:
ウェブ中で使用されるこれらのマップを見てみたいの で、選択したマッピングシステムでそれらを使用する際に役立ついくつかの簡単な指示を用意しました。これらのマップは無料で使用できます。ここに提供する タイルを使用している場合は、この attribution を使用してください:

Attribution:

For Toner(Toner 用): Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.

For everything else(その他用): Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.

If you roll your own tiles from another source you will still need to credit “Map data by OpenStreetMap, under ODbL.” And if you do use these maps elsewhere, please post a tweet to @stamen!
別のソースから独自のタイルをアレンジした場合でも、「Map data by OpenStreetMap, under ODbL.」のクレジットが必要になります。そして、他の場所でこれらのマップを使用する場合は、@stamen にツイートしてください!

Isn't OSM data provided under the ODbL now? Yes, but the data used in our some of our map tiles pre-dates the license change, so it remains CC BY SA until it's refreshed.
OSM のデータは、今、ODbL の下で提供されてませんか?はい、しかしマップタイルの一部で使用されるデータは、ライセンスの変更にさかのぼるので、それがリフレッシュされるまで、SA BY CC のままです。
*****

「224-ol3ex.js」
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します(オリジナルを変更しません)。(ol3 API)
   */
   source: new ol.source.Stamen({
   /** ol.source.Stamen
    * Layer source for the Stamen tile server.
    * Stamen タイルサーバのレイヤソース。(ol3 API)
    */
    layer: 'watercolor'
   })
  }),
  new ol.layer.Tile({
   source: new ol.source.Stamen({
    layer: 'terrain-labels'
   })
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 // 'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: ol.proj.transform(
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します(オリジナルを変更しません)。(ol3 API)
   */
   // [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
   [139.72, 35.68], 'EPSG:4326', 'EPSG:3857'),//東京周辺に修正
  zoom: 12
 })
});

2 - ol3ex 24a - Stamen example 1

「Stamen example(stamen.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「stamen.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「stamen.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「224-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「stamen.html」の内容をコピーして「224-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「224-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「stamen.js」の内容をコピーして貼り付け、修正します。「stamen-require.js」も「224-ol3ex-require.js」に貼り付けます。


「224-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">
  <title&gt;Stamen 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">Stamen example</h4>
     <p id="shortdesc">Example of a Stamen tile source. Two layers
       are composed:the watercolor base layer with the terrain labels.</p>
<!--
      <p>See the <a href="stamen.js" target="_blank">stamen.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="224-ol3ex.js" target="_blank">224-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">stamen, watercolor, terrain-labels, two-layers</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=stamen" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=224-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 23b - MapQuest example 2

「mapquest.js(223-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。
「MapQuest(http://wiki.openstreetmap.org/wiki/MapQuest)」に、次のようにあります。
MapQuest is an online mapping company based in the United States and is wholly-owned by AOL.
MapQuest は、米国に拠点を置くオンライン地図会社であり、AOLに完全所有されています。
MapQuest is one of the pioneers in online mapping and holds a significant market share in the U.S.
MapQuest は、オンラインマッピングの先駆者の一つであり、米国で大きな市場シェアを保持しています。
During the State Of The Map 2010, the company announced their support for OpenStreetMap making MapQuest the first large online mapping service to embrace OSM.
State Of The Map 2010 の期間に、同社は MapQuest を、OpenStreetMap を採用した最初の大規模なオンラインマッピングサービスにするために、OSM に対するサポートを発表しました。

また、「mapquest company(http://company.mapquest.com/)」には、次のようにあります。
Welcome to MapQuest.
MapQuest, Inc. offers online, mobile, business and developer solutions that help people discover and explore where they would like to go, how to get there and what to do along the way and at your destination.
MapQuest 社は、道中や目的地について、行きたい場所、そこに着く方法、行うことを発見し、探る手助けをするオンライン、モバイル、ビジネスおよび開発ソリューションを提供しています。

Building on the core premise of providing accurate maps and directions to millions of people everyday, MapQuest.com is committed to making it easy for you to find local information, create your trips or journeys and customize, personalize and share them with others.
毎日、何百万人もの人に正確な地 図と方向を提供することを前提にしたコアを再構築するために、MapQuest.comは、簡単にローカル情報を検索し、日帰りや長期の旅行を作成し、そ してそれらを、カスタマイズし、パーソナライズし、他の人と共有できるように取り組んでいます。

ライセンスについて は、「mapquest developer」の「Licensed Data vs. Open Data(http://developer.mapquest.com/web/tools/getting-started/platform /licensed-vs-open)」を参照してください。

「223-ol3ex.js」
var layers = [
 new ol.layer.Tile({
 /** ol.layer.Tile 
  * For layer sources that provide pre-rendered, tiled 
  * images in grids that are organized by zoom levels for 
  * specific resolutions. 
  * プリレンダリング(事前描画)を提供するレイヤソースのための、
  * 特定の解像度でのズームレベルによって編成されているグリッドの
  * タイルイメージ。(ol3 API)
  */
  style: 'Road',
  source: new ol.source.MapQuest({layer: 'osm'})
  /** ol.source.MapQuest
   * Layer source for the MapQuest tile server.
   * MapQuest タイルサーバのレイヤソース。(ol3 API
   * 2 - ol3ex 23b - MapQuest example 2 参照)
   */
  // Source for this layer.(このレイヤのソース。ol3 API)
 }),
 new ol.layer.Tile({
  style: 'Aerial',
  visible: false,
  // Visibility. Default is true (表示。ol3 API)
  source: new ol.source.MapQuest({layer: 'sat'})
 }),
 new ol.layer.Group({
 /** ol.layer.Group
  * A ol.Collection of layers that are handled together.
  * 同時に扱うレイヤの ol.Collection(ol3 API)
  */
 /** ol.Collection
  * An expanded version of standard JS Array, adding 
  * convenience methods for manipulation. Add and remove 
  * changes to the Collection trigger a Collection event. 
  * Note that this does not cover changes to the objects 
  * within the Collection; they trigger events on the 
  * appropriate object, not on the Collection as a whole.
  * 操作のための便利なメソッドを追加する、標準JSアレイの拡張バー
  * ジョン。コレクションイベントをトリガするコレクションの変更の
  * 追加と削除をします。これはコレクション内のオブジェクトへの変
  * 更に及ばないことに注意してください。コレクション全体としてで
  * はなく、適切なオブジェクトにイベントをトリガします。
  * Because a Collection is itself an ol.Object, it can 
  * be bound to any other Object or Collection such 
  * that a change in one will automatically be reflected 
  * in the other.
  * コレクションは、ol.Object そのものであるため、ある変化が自
  * 動的に他方に反映されるように、他のオブジェクトまたはコレク
  * ションに結合させることができます。
  * (ol3 API)
  */
  style: 'AerialWithLabels',
  visible: false,
  layers: [
   new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
   }),
   new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'hyb'})
   })
  ]
 })
];
var map = new ol.Map({
 layers: layers,
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: ol.proj.transform(
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します(オリジナルを変更しません)。(ol3 API)
   */
// [-73.979378, 40.702222], 'EPSG:4326', 'EPSG:3857'),
   [139.42, 35.68], 'EPSG:4326', 'EPSG:3857'),//東京周辺に修正
  zoom: 9
 })
});
// リストから選んだスタイルに変更するコード
$('#layer-select').change(function() {
// 223-ol3ex.html の select タグの id
/** .change(handler)
 * Bind an event handler to the "change" JavaScript event, or 
 * trigger that event on an element.
 * 「change」JavaScript イベントにイベントハンドラをバインド、ま
 * たは、要素についてそのイベントをトリガします。
 * (jQuery[https://api.jquery.com/change/])
 */
 var style = $(this).find(':selected').val();
 // 223-ol3ex.html の select タグで挟まれた option タグの要素
 (初期表示)
 /** .find(selector)
  * Get the descendants of each element in the current set of 
  * matched elements, filtered by a selector, jQuery object, 
  * or element.
  * セレクタによるフィルタリングで、マッチした要素、または、
  * jQueryオブジェクト、要素の現在のセット中の各要素の子孫要素
  * を取得します。(jQuery[https://api.jquery.com/find/])
  */
 /** .val()
  * Get the current value of the first element in the set of 
  * matched elements or set the value of every matched 
  * element.
  * マッチした要素のセットの最初の要素の現在の値を取得、または、
  * すべての一致した要素の値を設定します。
  * (jQuery[https://api.jquery.com/val/])
  */
 var i, ii;
 for (i = 0, ii = layers.length; i < ii; ++i) {
  layers[i].set('visible', (layers[i].get('style') == style));
  //layers(配列)から合った ol.layer.* のオプション(visible, 
  //style)に変更
  /** set(key, value) 
   * Sets a value.
   * (ol3 API[説明は Stable Only のチェックを外すと表示])
   */
  /** get(key)
   * Gets a value.
   * (ol3 API[説明は Stable Only のチェックを外すと表示])
   */
 }
});
$('#layer-select').trigger('change');
/**.trigger(eventType [,extraParameters]
 * Execute all handlers and behaviors attached to the 
 * matched elements for the given event type.
 * 指定されたイベントタイプにマッチした要素に接続されているすべ
 * てのハンドラや動作を実行します。
 * (jQuery[https://api.jquery.com/trigger/])
 */

2 - ol3ex 23a - MapQuest example 1

「MapQuest example(mapquest.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「mapquest.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mapquest.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「223-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mapquest.html」の内容をコピーして「223-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「223-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mapquest.js」の内容をコピーして貼り付け、修正します。「mapquest-require.js」も「223-ol3ex-require.js」に貼り付けます。


「223-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">
  <title&gt;MapQuest 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>
      <select id="layer-select">
       <option value="Aerial">Aerial</option>
       <option value="AerialWithLabels">Aerial with labels</option>
       <option value="Road" selected>Road</option>
      </select>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">MapQuest example</h4>
     <p id="shortdesc">Example of a MapQuest map.</p>
<!--
      <p>See the <a href="mapquest.js" target="_blank">mapquest.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="223-ol3ex.js" target="_blank">223-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">mapquest</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=mapquest" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=223-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 22b - Localized OpenStreetMap example 2

OpenCycleMap と OpenSeaMap は、OpenStreetMap を元に作成された地図です。
日本で、OpenCycleMap は作成されていますが、 OpenSeaMap はありません。(OpenSeaMap は、ドイツ北部の海域をサポートしています。)

OpenCycleMap(http://www.opencyclemap.org/)
OpenCycleMap(http://www.opencyclemap.org/docs/)に次のようにあります。

The OpenCycleMap global cycling map is based on data from the OpenStreetMap project. At low zoom levels it is intended for overviews of national cycling networks; at higher zoom levels it should help with planning which streets to cycle on, where you can park your bike and so on.
OpenCycleMap グローバルサイクリングマップは、OpenStreetMap のプロジェクトのデータに基づいています。低いズームレベルでは、全国のサイクリングネットワークの概要を対象としています。高いズームレベルでは、バイクを駐車できる場所のように、サイクルリング(ツーリング)の行程の計画に役立てることができます。
The map is updated every few days with the latest data from OpenStreetMap. News about OpenCycleMap can be found in the OpenStreetMap archives on my blog.
マップは、OpenStreetMap の最新データで数日ごとに更新されます。 OpenCycleMap についてのニュースは、私のブログで OpenStreetMap のアーカイブで見つけることができます。

OpenSeaMap(http://www.openseamap.org/)
OpenSeaMap Wiki(http://wiki.openstreetmap.org/wiki/OpenSeaMap)に次のようにあります。

History and fundamentals
OpenSeaMap was created in 2009 in response to a great need for freely-accessible seafaring maps. OpenSeaMap's goal is to add nautical and tourism information that would interest sailors OSM, and to present it in a pleasing way. This includes beacons, buoys and other seamarks, port information, repair shops, ship supplies and much more, but also shops, restaurants and places of interest. OpenSeaMap is part of OpenStreetMap and uses its database.
OpenSeaMap は、自由にアクセス可能な船乗り用マップに対する大きな要求に応じて、2009年に作成されました。 OpenSeaMap の目標は、航路や船員のOSMの興味になる観光の情報を追加することと、楽しい方法でそれを提示するです。これはショップ、レストラン、興味のある場所だけでなく、ビーコン、ブイ、他の航路目標、ポート情報、修理工場、船舶用品やさらに多くのものが含まれています。 OpenSeaMap は OpenStreetMap の一部であり、そのデータベースを使用しています。

「222-ol3ex.js」
/** tiles.openseamap.org does not set CORS headers, so we 
 * have to disable crossOrigin and we cannot use WebGL.
 * tiles.openseamap.org は CORS ヘッダを設定していないので、
 * crossOrigin を無効にする必要があり、WebGL を使用するこ
 * とはできません。
 */
var openCycleMapLayer = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング(事前描画)を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。(ol3 API)
 */
 source: new ol.source.OSM({
 /** ol.source.OSM 
  * Layer source for the OpenStreetMap tile server.
  * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
  */
  attributions: [
   new ol.Attribution({
   /** ol.Attribution
    * An attribution for a layer source.
    * レイヤソースの属性(ol3 API)
    */
    html: 'All maps &copy; ' +
     '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
   }),
   ol.source.OSM.DATA_ATTRIBUTION
   // v3.1.0 以降 ol.source.OSM.ATTRIBUTION を使用
  ],
  url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
 })
});
var openSeaMapLayer = new ol.layer.Tile({
 source: new ol.source.OSM({
  attributions: [
   new ol.Attribution({
    html: 'All maps &copy; ' +
     '<a href="http://www.openseamap.org/">OpenSeaMap</a>'
    }),
    ol.source.OSM.DATA_ATTRIBUTION
   // v3.1.0 以降 ol.source.OSM.ATTRIBUTION を使用
  ],
  crossOrigin: null,
  /** crossOrigin
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if you want to 
   * access pixel data with the Canvas renderer. See 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image for more detail.
   * ロードされたイメージの crossOrigin属性。WebGLのレンダ
   * ラーを使用している場合、または、キャンバスレンダラでピ
   * クセルデータにアクセスする場合、crossOrigin 値を提供な
   * ければならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。(ol3 API)
   */
  url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
 })
});
var map = new ol.Map({
 layers: [
  openCycleMapLayer,
  openSeaMapLayer
 ],
 target: 'map',
 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(API Doc より)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ(型)の説明 - 式などで表示
   * attributionOptions の値の型は、
   * olx.control.AttributionOptions の型を使用。
   * (@use JSDoc[http://usejsdoc.org/]より)
   */
   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  maxZoom: 18,
  center: [-244780.24508882355, 5986452.183179816],
  zoom: 15
 })
});
 

2 - ol3ex 22a - Localized OpenStreetMap example 1

「Simple example(localized-openstreetmap.html)」を参考に地図を表示してみます。説明には、

Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
カスタムタイルサーバとカスタムアトリビューションを使用した、場所を限定した OpenSeaMap マップの例。
The base layer is OpenCycleMap with an overlay from OpenSeaMap. The OpenSeaMap tile server does not support CORS headers.
ベースレイヤは、OpenSeaMap からのオーバーレイを使用した OpenCycleMap です。 OpenSeaMap タイルサーバは、CORS((Cross-Origin Resource Sharing)ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組み) ヘッダをサポートしていません。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「localized-openstreetmap.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「localized-openstreetmap.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「222-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「localized-openstreetmap.html」の内容をコピーして「222-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「222-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「localized-openstreetmap.js」の内容をコピーして貼り付け、修正します。「localized-openstreetmap-require.js」も「222-ol3ex-require.js」に貼り付けます。


「222-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">
  <title>Localized OpenStreetMap 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">Localized OpenStreetMap example</h4>
     <p id="shortdesc">Example of a Localized OpenStreetMap with  custom tile server and a custom attribution.</p>
     <div id="docs">
      <p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> 
       with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. 
       The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
<!--
      <p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="222-ol3ex.js" target="_blank">222-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</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=localized-openstreetmap" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=222-ol3ex" type="text/javascript"></script>

 </body>
</html>

2014年10月22日水曜日

2 - ol3ex 21b - WFS example 2

OpenLayers 2 では、ドメインの違うサーバから WFS でデータを取得するのに、proxy.cgi ファイルを設定しました。OpenLayers 3 は、別の手順で取得します。
vector-wfs.js で、自分の GeoServer から WFS のデータを次のようにリクエストします。
var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
 'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
 'outputFormat=text/javascript&format_options=callback:loadFeatures' +
 '&srsname=EPSG:2451&bbox=' + extent.join(',') + ',EPSG:2451';

Geoserver に WFS をリクエストするとき、オプションを 「outputFormat=text/javascript」とすると、JSON形式で取得できます。

vector レイヤは表示されませんでした。
Firebug を起動して再表示すると、次のように表示されました。

データが、XML(GML)で送信されています。
Google で検索すると、「Geographic Information Systems Stack Exchange」の「GeoServer 2.3 how to enable jsonp(http://gis.stackexchange.com/questions/57494/geoserver-2-3-how-to-enable-jsonp)」に、

---
Add to this file: /tomcat/webapps/geoserver/WEB-INF/web.xml
<context-param>
 <param-name>ENABLE_JSONP</param-name>
 <param-value>true</param-value>
</context-param>
---

とあります。自分のサーバでは、

user@debian7-vmw:~$ su
パスワード:
root@debian7-vmw:/home/user# vim /etc/tomcat7/web.xml
---
 <context-param>
  <param-name>ENABLE_JSONP</param-name>
  <param-value>true</param-value>
 </context-param>

</web-app>
:wq

と、ファイルに追加し、tomcat7 を再起動します。

root@debian7-vmw:/home/user# /etc/init.d/tomcat7 restart
[ ok ] Stopping Tomcat servlet engine: tomcat7.
[ ok ] Starting Tomcat servlet engine: tomcat7.

Firebug に何も表示されませんが、地図にも表示されません。
Webブラウザのアドレスバーに次のように入力します。

http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&outputFormat=text/javascript&format_options=callback:loadFeatures&srsname=EPSG:2451
loadFeatures({
 "type":"FeatureCollection",
 "features":[{
  "type":"Feature",
  "id":"akiruno_suiiki.1",
  "geometry":{
   "type":"MultiPolygon",
   "coordinates":[[[[-45875.83465282351,-29805.840956966127],
---
   [-45875.83465282351,-29805.840956966127]]]]},
  "geometry_name":"the_geom",
  "properties":{
   "id":"K12_1",
   "uuid":"fgoid:10-00200-11-6554-5598",
   "presences":2.0120305E7,
   "presencef":2.9991231E7,
   "finished":2.0120305E7,
   "orggilvl":"2500",
   "orgmdid":null,
   "category":"表示",
   "flag":"既存",
   "type":"湖池",
   "name":null}},
---

このままでは変換が必要ですが、「srsname=EPSG:3857」にすると座標が EPSG:3857 になります。

http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&outputFormat=text/javascript&format_options=callback:loadFeatures&srsname=EPSG:3857
loadFeatures({
 "type":"FeatureCollection",
 "features":[{"type":"Feature",
 "id":"akiruno_suiiki.1",
 "geometry":{
  "type":"MultiPolygon",
  "coordinates":[[[[1.5509721608105533E7,4263571.24847886],
---
  [1.5509721608105533E7,4263571.24847886]]]]},
 "geometry_name":"the_geom",
 "properties":{
  "id":"K12_1",
  "uuid":"fgoid:10-00200-11-6554-5598",
  "presences":2.0120305E7,
  "presencef":2.9991231E7,
  "finished":2.0120305E7,
  "orggilvl":"2500",
  "orgmdid":null,
  "category":"表示",
  "flag":"既存",
  "type":"湖池",
  "name":null}},
---

「url」を次のようにすると地図が表示されました。
var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
 'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
 'outputFormat=text/javascript&format_options=callback:loadFeatures' +
 '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';

「vector-wfs.js(221-ol3ex.js)」は、地図を表示するのに必要な javascript です。
「221-ol3ex.js」
var vectorSource = new ol.source.ServerVector({
/** ol.source.ServerVector
 * A vector source in one of the supported formats, using
 * a custom function to read in the data from a remote 
 * server.
 * サポートされている形式の一つのベクトルソースは、
 * カスタム関数を使用してリモートサーバからデータを読み取ります。
 * (ol3 APL)
 */
 format: new ol.format.GeoJSON(),
 /** ol.format.GeoJSON 
  * Feature format for reading and writing data 
  * in the GeoJSON format.
  * GeoJSON フォーマットのデータを読み書きするための
  * フィーチャフォーマット。(ol3 API)
  */
 loader: function(extent, resolution, projection) {
  /**var url = 'http://demo.opengeo.org/geoserver/wfs?service=WFS&' +
   *  'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
   *  'outputFormat=text/javascript&format_options=callback:loadFeatures' +
   *  '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
   */
  var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
   'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
   'outputFormat=text/javascript&format_options=callback:loadFeatures' +
   '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
   // outputFormat=text/javascript: JSONP 形式で返信
  $.ajax({
  /** $.ajax( [url] [, settings] )
   * 非同期HTTP通信(Ajax)を行い、データの取得・処理を行います。
   * [url] String リクエスト送信先のURL
   * [settings] Object Ajaxリクエストでのオプションを記述したオ
   * ブジェクト(jQuery)
   */
   url: url,
   dataType: 'jsonp'
   /** JSONP (JSON with Padding)
    * さまざまなドメインから、JSON データを持った JavaScript を
    * 動的に挿入することができます。
    */
  });
 },
 strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
 /** ol.loadingstrategy
  * Strategies for loading vector data.
  * ベクタデータをローディングするための方法。
  * createTile 
  * ol.loadingstrategy のメソッド
  * (ol3 API)
  */
 /** ol.tilegrid.XYZ
  * Set the grid pattern for sources accessing XYZ 
  * tiled-image servers.
  * XYZタイル画像サーバにアクセスするソースのグリッドパターンを
  * 設定します。
  * (ol3 API)
  */
  maxZoom: 19
 })),
 projection: 'EPSG:3857',
 attributions: [new ol.Attribution({
 /** ol.Attribution
  * An attribution for a layer source.
  * レイヤソースの属性(ol3 API)
  */
  html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + 
   '国土地理院</a> 基盤地図情報'
 })],
});
var loadFeatures = function(response) {
 vectorSource.addFeatures(vectorSource.readFeatures(response));
 /** addFeatures
  * ol.source.GeoJSON (Static vector source in GeoJSON 
  * format[GeoJSONフォーマットの静的ベクトルソース])のメソッド
  */
 /** readFeatures
  * ol.format.GeoJSON  (Feature format for reading and 
  * writing data in the GeoJSON format. [GeoJSONフォーマットで
  * データを読み書きするための機能の形式。])のメソッド
  * Read all features from a GeoJSON source. 
  * GeoJSONソースからすべてのフィーチャをお読み込む。
  * Works with both Feature and FeatureCollection sources.
  * フィーチャおよびフィーチャコレクションソースの両方で動作。
  * (ol3 API)
  */
};
var vector = new ol.layer.Vector({
/** ol.layer.Vector 
 * Vector data that is rendered client-side. Note that any 
 * property set in the options is set as a ol.Object property
 * on the layer object; for example, setting title: 'My 
 * Title' in the options means that title is observable, and 
 * has get/set accessors.
 * クライアント側で描画されたベクタデータ。オプションで設定した任
 * 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
 * として設定されていることに注意してください。たとえば、オプショ
 * ンで、title:'My Title' を設定することは、タイトルは 
 * observable で、アクセサを取得/設定することを意味します。
 * (ol3 API)
 */
 source: vectorSource,
 style: new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * (ol3 API)
  */
  stroke: new ol.style.Stroke({
  /** ol.style.Stroke 
   * Set stroke style for vector features. 
   * Note that the defaults given are the Canvas defaults, 
   * which will be used if option is not defined. 
   * The get functions return whatever was entered in the 
   * options; they will not return the default.
   * ベクタフィーチャのためのストロークスタイルの設定。
   * デフォルトは、オプションが定義されていない場合に使用され
   * る Canvas のデフォルトを与えられることに注意してください。 
   * GET関数は、オプションで入力されたものはすべて返します。
   * それらはデフォルトを返しません。(ol3 API)
   */
   color: 'rgba(0, 0, 255, 1.0)',
   width: 2
  })
 })
});
var raster = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング(事前描画)を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。(ol3 API)
 */
 source: new ol.source.BingMaps({
 /** ol.source.BingMaps
  * Layer source for Bing Maps tile data.
  * Bing Maps タイルデータのレイヤソース。(ol3 API)
  */
  imagerySet: 'Aerial',
  key: 'Ak-dzM4***' // 省略してます
 })
});
var map = new ol.Map({
 layers: [raster, vector],
 target: document.getElementById('map'),
 view: new ol.View({
  //center: [-8908887.277395891, 5381918.072437216]
  center: [15499413.571008531, 4264076.282950245],
  maxZoom: 19,
  zoom: 12
 })
});

2 - ol3ex 21a - WFS example 1

「WFS example(vector-wfs.html)」を参考に地図を表示してみます。

OGC(http://www.opengeospatial.org/) の 「OpenGIS Web Map Tile Service Implementation Standard(http://www.opengeospatial.org/standards/wmts)」には、次ように書かれています。
*****
The OGC Web Map Service allows a client to overlay map images for display served from multiple Web Map Services on the Internet.
OGC の ウェッブマップサービス(WMS)は、クライアントにインターネット上で複数のウェッブマップサービス(WMS)から提供される、表示するためのマップ画像をオーバーレイすることを可能にします。

In a similar fashion, the OGC Web Feature Service allows a client to retrieve and update geospatial data encoded in Geography Markup Language (GML) from multiple Web Feature Services.
同様に、OGC のウェッブフィーチャサービス(WFS)は、クライアントに、複数のウェッブフィーチャサービス(WFS)からジオグラフィマークアップラングエッジ(GML)でエンコードされた地理空間データを取得し、更新することを可能にします。

The requirements for a Web Feature Service are:
ウェブフィーチャサービスのための要件は次のとおりです。
1. The interfaces must be defined in XML.
インターフェイスは、XMLで定義する必要があります。
2. GML must be used to express features within the interface.
GMLは、インタフェース内の地物を表現するために使用されなければなりません。
3. At a minimum a WFS must be able to present features using GML.
最低限、WFS が GML を使用しての地物を提示することができなければなりません。
4. The predicate or filter language will be defined in XML and be derived from CQL as defined in the OpenGIS Catalogue Interface Implementation Specification.
OpenGIS Catalogue Interface Implementation Specification で定められた通り、述語型言語またはフィルタ言語は、XMLで定められ、CQLに由来します。
5. The datastore used to store geographic features should be opaque to client applications and their only view of the data should be through the WFS interface.
地理的特徴物を格納するために使用されるデータストアは、クライアント·アプリケーションに対して不透明であるべきであり、データの唯一のビューは、WFSインタフェースを介さなければなりません。
6.The use of a subset of XPath expressions for referencing properties.
プロパティを参照するためのXPath式のサブセットを使用します。
*****

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「vector-wfs.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「vector-wfs.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「221-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「vector-wfs.html」の内容をコピーして「221-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「221-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「vector-wfs.js」の内容をコピーして貼り付け、修正します。「vector-wfs-require.js」も「221-ol3ex-require.js」に貼り付けます。


「221-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">
  <title>WFS 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">WFS example</h4>
     <p id="shortdesc">Example of using WFS with a BBOX strategy.</p>
     <div id="docs">
<!--
      <p>See the <a href="vector-wfs.js" target="_blank">vector-wfs.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="221-ol3ex.js" target="_blank">221-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">vector, WFS, bbox, loading, server</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=vector-wfs" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=221-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 20b - WMTS example 2

WMTS データは、「独立行政法人 産業技術総合研究所(http://www.aist.go.jp/)」の「GSJ 地質調査総合センター(https://www.gsj.jp/HomePageJP.html)」の「地質情報配信サービス(https://gbank.gsj.jp/owscontents/)」の「20万分の1日本シームレス地質図 基本版(https://gbank.gsj.jp/seamless/tilemap/basic/WMTSCapabilities.xml)」を使用します。

「Webサイトでのご利用」に「OpenLayersでの利用例」があります。「OpenLayersでのWMTSサービス利用例 (実装例ソースコード)」は OpenLayers 2.x の例ですが、これを参考に ol3 に応用します。

「OpenLayersでのWMTSサービス利用例(https://gbank.gsj.jp/owscontents/ol_example.html#WMTS)」
実装例ソースコード(https://gbank.gsj.jp/owscontents/ol_example_wmts_html.txt)

「wmts.js(220-ol3ex.js)」は、地図を表示するのに必要な javascript です。
「220-ol3ex.js」
var projection = ol.proj.get('EPSG:3857');
// EPSG:900913 -> EPSG:3857 コード名変更(内容は同じ)
/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * (ol3 API)
 */
var projectionExtent = projection.getExtent();
/** getExtent()
 * Get the validity extent for this projection.
 * この投影の有効範囲を取得。(ol3 API)
 */
var size = ol.extent.getWidth(projectionExtent) / 256;
/** ol.extent.getWidth(extent)
 * Return: Width.(ol3 API)
 */
var resolutions = new Array(14);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複数
 * のデータの集合であり、JavaScript のグローバルオブジェクトであ 
 * る Array は、高位の、(C言語等で云うところの)「リスト」の様
 * な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数(arrayLength)に 0 
 * から 4,294,967,295( 232-1 ) までの整数値を指定する場合は、そ
 * の値を要素数とする配列が作成されます。その際に範囲外の値を指
 * 定した場合には、例外: RangeError がスローされます。
 * (MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array])
 */
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
 // generate resolutions and matrixIds arrays for this WMTS
 // この WMTS の解像度と matrixIds 配列の生成。(ol3 API)
 resolutions[z] = size / Math.pow(2, z);
 /** Math.pow(base, exponent)
  * base を exponent 乗した値、つまり、base^exponent の値を返
  * します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/pow])
  */
 matrixIds[z] = z;
}
var attribution = new ol.Attribution({
/** ol.Attribution
 * An attribution for a layer source.
 * レイヤソースの属性(ol3 API)
 */
/**
 * html: 'Tiles &copy; <a href="http://services.arcgisonline.com/arcgis/rest/' +
 * 'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
 */
 html: 'Tiles &copy; 産総研地質調査総合センター 20万分の1日本シームレス地質図 (基本版) CC BY-ND'
});
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング(事前描画)を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。(ol3 API)
   */
   source: new ol.source.OSM(),
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
    */
   opacity: 0.7 // 透過度
  }),
  new ol.layer.Tile({
   opacity: 0.7,
   extent: projectionExtent, // 範囲
   source: new ol.source.WMTS({
   /** ol.source.WMTS
    * Layer source for tile data from WMTS servers.
    * WMTSサーバからタイルデータのレイヤソース。(ol3 API)
    */
    attributions: [attribution],
    /**
     * url: 'http://services.arcgisonline.com/arcgis/rest/' +
     * 'services/Demographics/USA_Population_Density/MapServer/WMTS/',
     */
    url: 'https://gbank.gsj.jp/seamless/tilemap/basic/glfn/{TileMatrix}/{TileRow}/{TileCol}.png',
    /** WMTSサービスのベースURLを設定します。
      * 標準形式のURLでない場合、URLのテンプレートを設定します。(地質調査総合センター)
      */
    // layer: '0', // The layer identifier.
    layer: 'glfn',
     /** ベースURLから取得するレイヤ名を設定します。
      * このサンプルでは、レイヤ名を固定的に持つURLテンプレートを
      * 設定しているため使用されることはありませんが、WMTS クラス
      * コンストラクタの必須パラメータなので省略できません。
      * (地質調査総合センター)
      */
    matrixSet: 'EPSG:3857',
    // EPSG:900913 -> EPSG:3857 コード名変更(内容は同じ)
    format: 'image/png',
    projection: projection,
    tileGrid: new ol.tilegrid.WMTS({
    /** ol.tilegrid.WMTS
     * Set the grid pattern for sources accessing WMTS tiled-image servers.
     * WMTSタイル画像サーバにアクセスするソースのグリッドパターンを設定(ol3 API)
     */
     origin: ol.extent.getTopLeft(projectionExtent),
     /** ol.extent.getTopLeft
      * Return: Top left coordinate.
      */
     resolutions: resolutions,
     matrixIds: matrixIds
     /** matrixIds
      * matrix IDs. The length of this array needs to match 
      * the length of 
      * the resolutions array.
      * 行列のID。この配列の長さは、解像度配列の数と一致する必要
      * があります。
      * (ol3 API[説明は Stable Only のチェックを外すと表示])
      */
    }),
    style: 'default',
    requestEncoding: "REST"
     /** リクエスト形式が REST か KVP を設定します。
      * 省略するとデフォルトの KVP が適用されます。
      * (地質調査総合センター)
      */
   })
  })
 ],
 target: 'map',
 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ(型)の説明 - 式などで表示
   * (@use JSDoc[http://usejsdoc.org/]より)
   * attributionOptions の値の型は、
   * olx.control.AttributionOptions の型を使用。
    */
   collapsible: false // 折りたたみ
  })
 }),
& view: new ol.View({
  // center: [-11158582, 4813697],
  center: [15500000,4210000],
  // デフォルトの中心座標を指定しています。(地質調査総合センター)
  //  zoom: 4
  zoom: 6
 })
});

2 - ol3ex 20a - WMTS example 1

「WMTS example(wmts.html)」を参考に地図を表示してみます。WMTS については、OGC(http://www.opengeospatial.org/) の 「OpenGIS Web Map Tile Service Implementation Standard(http://www.opengeospatial.org/standards/wmts)」に、次ように書かれています。

*****
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 ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「wmts.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wmts.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「220-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











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 が2行になるので表示できるように */
   .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>

2 - ol3ex 19b - EPSG:4326 example 2

「epsg-4326.js(219-ol3ex.js)」は、地図を表示するのに必要な javascript です。「219-ol3ex.js」
var layers = [
 new ol.layer.Tile({
 /** ol.layer.Tile 
  * For layer sources that provide pre-rendered, tiled 
  * images in grids that are organized by zoom levels for 
  * specific resolutions. 
  * プリレンダリング(事前描画)を提供するレイヤソースのための、
  * 特定の解像度でのズームレベルによって編成されているグリッドの
  * タイルイメージ。(ol3 API)
  */
  source: new ol.source.TileWMS({
  /** ol.source.TileWMS
   * Layer source for tile data from WMS servers.
   * WMS サーバからのタイルデータのレイヤソース。
   * (ol3 API)
   */
/**
 * url: 'http://demo.opengeo.org/geoserver/wms',
 * params: {
 *  'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
 */
   url: 'http://localhost:8080/geoserver/wms?',
   attributions: [new ol.Attribution({
    html: '国土交通省 国土数値情報'
   })],
   params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
   serverType: 'geoserver'
  })
 })
];
var map = new ol.Map({
 controls: ol.control.defaults().extend([
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
  new ol.control.ScaleLine({
  /** ol.control.ScaleLine
   * A control displaying rough x-axis distances, calculated 
   * for the center of the viewport. No scale line will be 
   * shown when the x-axis distance cannot be calculated in 
   * the view projection (e.g. at or beyond the poles in 
   * EPSG:4326). By default the scale line will show in the 
   * bottom left portion of the map, but this can be changed 
   * by using the css selector .ol-scale-line.
   * 粗いx軸の距離を表示するコントロール、ビューポートの中心に
   * 対して計算します。 x軸距離がビュー投影(例えば、
   * EPSG:4326 の極で、または、超えて)で計算することができ
   * ないときにスケールラインは表示されません。デフォルトでは、
   * スケールラインがマップの左下部分に表示されますが、これは 
   * CSSセレクタ .ol-scale-line を使用して変更することが
   * できます。(ol3 API)
   */
   units: 'degrees'
  })
 ]),
 layers: layers,
 target: 'map',
 view: new ol.View({
  projection: 'EPSG:4326',
//center: [0, 0],
  center: [139.42, 35.68],
//zoom: 2
  zoom: 10
 })
});

2 - ol3ex 19a - EPSG:4326 example 1

「EPSG:4326 example(epsg-4326.html)」を参考に地図を表示してみます。EPSG については、OGP(International Association of Oil & Gas Producer)[http://www.ogp.org.uk/]の「About the EPSG Dataset(http://www.epsg.org/)」に説明があります。その一部を引用すると、

*****
The OGP’s EPSG Geodetic Parameter Dataset is a collection of definitions of coordinate reference systems and coordinate transformations which may be global, regional, national or local in application.
OGPのEPSG測地パラメータデータセットは、基準座標系とアプリケーションの、世界、地域、国、地方の座標変換の定義の集合です。

The EPSG Geodetic Parameter Dataset is maintained by the Geodesy Subcommittee of the OGP Geomatics Committee.
EPSG測地パラメータデータセットは、OGP空間情報科学委員会の測地学分科会によって維持されます。
*****

とあります。
EPSG:4326 は、epsg.io の「WGS84-...(http://epsg.io/4326)」に、「WGS84 - World Geodetic System 1984, used in GPS」とあります。
WGS84は、アメリカで管理されている GPS 用の測地系です。内容は以下のようになっています。

*****
Center coordinates
0.00000000 0.00000000
WGS84 bounds:
-180.0 -90.0
180.0 90.0

Attributes
Unit: degree (supplier to define representation)
Geodetic CRS: WGS 84
Datum: World Geodetic System 1984
Ellipsoid: WGS 84
Prime meridian: Greenwich
Data source: OGP
Information source: EPSG. See 3D CRS for original information source.

Revision date: 2007-08-27
*****

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「epsg-4326.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「epsg-4326.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「219-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「epsg-4326.html」の内容をコピーして「219-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「219-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「epsg-4326.js」の内容をコピーして貼り付け、修正します。「epsg-4326-require.js」も「219-ol3ex-require.js」に貼り付けます。


「219-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">
  <title>EPSG:4326 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">EPSG:4326 example</h4>
     <p id="shortdesc">Example of a map in EPSG:4326.</p>
     <div id="docs">
<!--
      <p>See the <a href="epsg-4326.js" target="_blank">epsg-4326.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="219-ol3ex.js" target="_blank">219-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">epsg4326</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=epsg-4326" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=219-ol3ex" type="text/javascript"></script>

 </body>
</html>