2015年1月22日木曜日

2 - ol3.1ex 50b - Custom tooltips 2

「(button-title.js(250-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「250-ol3ex.js」
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)
    */
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: [-8730000, 5930000],
  rotation: Math.PI / 5,
  /** Math.PI
   * 円周率。約 3.14159 です。
   * (MDN[https://developer.mozilla.org/ja/docs/Web
   * /JavaScript/Reference/Global_Objects/Math/PI])
   */
  zoom: 8
 })
});
$('.ol-zoom-in, .ol-zoom-out').tooltip({
/** Tooltips tooltip.js
 * Inspired by the excellent jQuery.tipsy plugin written 
 * by Jason Frame; Tooltips are an updated version, 
 * which don't rely on images, use CSS3 for animations, 
 * and data-attributes for local title storage.
 * Jason Frame によって書かれた優れたjQuery.tipsyプラグイン
 * に触発されました。Tooltips は、更新されたバージョンで、画像
 * に依存しない、アニメーションに CSS3 を使用し、ローカルタイト
 * ル·ストレージのためのデータの属性です。
 * (Bootstrap[http://getbootstrap.com/javascript/
 * #tooltips])
 * 
 * カーソルを何かの項目に合わせたとき、その項目に覆いかぶさるよう
 * な形で小さな枠が出現し、その枠内には選択された項目に関する補足
 * 情報が表示される。
 * (ツールチップ[http://ja.wikipedia.org/wiki/
 * %E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97])
 */
 placement: 'right'
 /** placement
  * How to position the tooltip - top | bottom | left | 
  * right | auto.
  * ツールチップの配置方法 - top | bottom | left | right | auto
  * (Bootstrap[http://getbootstrap.com/javascript/
  * #tooltips])
   */
});
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
 placement: 'left'
});


「JavaScript Bootstrap(http://getbootstrap.com/javascript/)」の「Tooltips tooltip.js」に次のようにあります。

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
ジェイソンフレームによって書かれた優れた jQuery.tipsy プラグインからインスピレーションを受けています。ツールチップは更新されたバージョンで、画像に依存せずに、アニメーションにCSS3を、および、ローカルタイトル·ストレージのデータ属性を使用しています。

Tooltips with zero-length titles are never displayed.
長さゼロのタイトルのツールチップが表示されることはありません。

$('#example').tooltip(options)
「Options」
Name: placement
Type: string|function
Default: 'top'
Description:
How to position the tooltip - top | bottom | left | right | auto.

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
"オート"を指定した場合、動的に tooltip を再配向します。placement が「auto left」の場合、tooltip は可能なら左に表示され、それ以外の場合は右に表示されます。

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
関数が placement を決定するために使用される場合には、その最初の引数として tooltip のDOMノードと、その第二引数としてトリガー要素のDOMノードとに呼びだされます。このコンテキストは、 tooltip インスタンスに設定されています。


「v3.1.1/ol/ol/control/zoomcontrol.js」の一部を抜粋します。
---
ol.control.Zoom = function(opt_options) {
 var options = goog.isDef(opt_options) ? opt_options : {};
 var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
 var delta = goog.isDef(options.delta) ? options.delta : 1;
 var zoomInLabel = goog.isDef(options.zoomInLabel) ?
  options.zoomInLabel : '+';
 var zoomOutLabel = goog.isDef(options.zoomOutLabel) ?
  options.zoomOutLabel : '\u2212';
 var zoomInTipLabel = goog.isDef(options.zoomInTipLabel) ?
  options.zoomInTipLabel : 'Zoom in';
 var zoomOutTipLabel = goog.isDef(options.zoomOutTipLabel) ?
  options.zoomOutTipLabel : 'Zoom out';
 var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-in',
  'type' : 'button',
  'title': zoomInTipLabel
 }, zoomInLabel);
---
 var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-out',
  'type' : 'button',
  'title': zoomOutTipLabel
 }, zoomOutLabel);

---

2 - ol3.1ex 50a - Custom tooltips 1

「Custom tooltips((button-title.html)」を参考に地図を表示してみます。

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





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





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



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








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











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


「250-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.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <style type="text/css">
   .tooltip-inner {
    white-space: nowrap;
   }
  </style>
  <title>ol3 custom tooltips 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.1.1/examples/"><img src="v3.1.1/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">Custom tooltips</h4>
     <p id="shortdesc">
      This example shows how to customize the buttons tooltips with
      <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
     </p>
     <div id="docs">
      <!--
      See the <a href="button-title.js" target="_blank">button-title.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="250-ol3ex.js" target="_blank">250-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">custom, tooltip</div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   bootstrap.min.js(tooltip など)
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=button-title" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=250-ol3ex" type="text/javascript"></script>
 </body>
</html>

2 - ol3.1ex 49b - XYZ Esri EPSG:4326 tileSize 512 example 2

「xyz-esri-4326-512.js(249-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「249-ol3ex.js」
var attribution = new ol.Attribution({
/** ol.Attribution
 * An attribution for a layer source.
 * レイヤソースに対する attribution。(ol3 API)
 */
 html: 'Copyright:© 2013 ESRI, i-cubed, GeoEye'
});
var projection = ol.proj.get('EPSG:4326');
/** ol.proj.get
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * (0l3 API)
 */
var projectionExtent = projection.getExtent();
/** getExtent()
 * Get the validity extent for this projection.
 * この投影の有効範囲を取得。(ol3 API)
 */

// The tile size supported by the ArcGIS tile service.
// タイルサイズは、ArcGIS タイルサービスでサポートされます。
var tileSize = 512;
/**
 * Calculate the resolutions supported by the ArcGIS tile 
 * service.
 * There are 16 resolutions, with a factor of 2 between 
 * successive esolutions. The max resolution is such that 
 * the world (360°) fits into two (512x512 px) tiles.
 * ArcGIS のタイルサービスによってサポートされている解像度を計算
 * します。
 * 解像度が2倍間隔の16の解像度があります。最大解像度は、世界地図
 * (360°)が 512×512 ピクセルの2個のタイルに収まるものです。
 * (訳注:ESRI_Imagery_World_2D (MapServer)[http://
 * services.arcgisonline.com/ArcGIS/rest/services/
 * ESRI_Imagery_World_2D/MapServer]も参照してください。)
 */
var maxResolution = ol.extent.getWidth(projectionExtent) / (tileSize * 2);
/** ol.extent.getWidth(extent)
 * Return: Width(ol3 API)
 */
var resolutions = new Array(16);
/** 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 z;
for (z = 0; z < 16; ++z) {
 resolutions[z] = maxResolution / Math.pow(2, z);
 /** Math.pow(base, exponent)
  * base を exponent 乗した値、つまり、base^exponent の値を返
  * します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/eference/Global_Objects/Math/pow])
  */
}
var urlTemplate = 'http://services.arcgisonline.com/arcgis/rest/services/' +
 'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}';
var map = new ol.Map({
 target: '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)
   */
   /** ol.source.XYZ and ol.tilegrid.XYZ have no resolutions 
   * config 
   * ol.source.XYZ と ol.tilegrid.XYZ は 解像度の設定があり
   * ません。
   */
   source: new ol.source.TileImage({
   /** ol.source.TileImage 
    * Base class for sources providing images divided into 
    * a tile grid.
    * タイルグリッドに分割された画像を提供するソースの基本クラス。
    * (ol3 API)
    */
    attributions: [attribution],
    tileUrlFunction: function(tileCoord, pixelRatio, projection) {
     var z = tileCoord[0];
     var x = tileCoord[1];
     var y = -tileCoord[2] - 1;
     // wrap the world on the X axis
     // X 軸に世界地図を巻きます。
     var n = Math.pow(2, z + 1); // 2 tiles at z=0
     x = x % n;
     if (x * n < 0) {
     /**
      * x and n differ in sign so add n to wrap the result
      * to the correct sign
      * x と n の符号が異なるので、正しい符号に結果をまとめる 
      * ために n を追加
      */ 
      x = x + n;
     }
     return urlTemplate.replace('{z}', z.toString())
  /** replace(regexp|substr, newSubStr|function[, flags])
  * 正規表現と文字列との間のマッチを見つけ、マッチした部分文
  * 字列を新しい部分文字列に置き換えます。
  * regexp: RegExp オブジェクトです。そのマッチは 第二引数の
  * 戻り値によって置き換えられます。
  * substr: newSubStr によって置き換えられる 文字列 (String) 。
  * newSubStr: 第一引数で受け取った部分文字列を置き換える文字列 。
  * function: ( 第一引数で受け取った部分文字列と置き換える
  * ための)新しい部分文字列を生成するために実行される関数。
  * flags: (SpiderMonkey 拡張) 正規表現のフラグの任意の組み
  * 合わせを含む文字列です。 
  */
     /** Number.prototype.toString( [ radix ] )
      * 指定された Number オブジェクトを表す 文字列を返します。
      * radix: 数値を表すために使われる基数を指定する、2 から 36 
      * までの整数。省略したときは 10。
      * MDN([https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Global_Objects/Number/toString])
      */
      .replace('{y}', y.toString())
      .replace('{x}', x.toString());
    },
    projection: projection,
    tileGrid: new ol.tilegrid.TileGrid({
    /** ol.tilegrid.TileGrid
     * Base class for setting the grid pattern for sources 
     * accessing tiled-image servers.
     * タイル画像サーバにアクセスするソースのグリッドパターンを
     * 設定するための基本クラス。(ol3 API)
     */
    origin: ol.extent.getTopLeft(projectionExtent),
    /** ol.extent.getTopLeft
     * Return: Top left coordinate.
     */
    resolutions: resolutions,
    tileSize: 512
   })
  })
 })
 ],
 view: new ol.View({
  center: [0, 0],
  projection: projection,
  zoom: 2,
  minZoom: 2
 })
});

2 - ol3.1ex 49a - XYZ Esri EPSG:4326 tileSize 512 example 1

「XYZ Esri EPSG:4326 tileSize 512 example(xyz-esri-4326-512.html)」を参考に地図を表示してみます。

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





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





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



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








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











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


「249-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.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>XYZ Esri EPSG:4326 tileSize 512 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.1.1/examples/"><img src="v3.1.1/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">XYZ Esri EPSG:4326 tileSize 512 example</h4>
     <p id="shortdesc">Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.</p>
     <div id="docs">
      <!--
      See the <a href="xyz-esri-4326-512.js" target="_blank">xyz-esri-4326-512.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="249-ol3ex.js" target="_blank">249-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">xyz, esri, tilesize, custom projection</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.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=xyz-esri-4326-512" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=249-ol3ex" type="text/javascript"></script>
 </body>
</html>

2 - ol3.1ex 48b - TileUTFGrid example 2

「tileutfgrid.js(248-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。
「248-ol3ex.js」
var mapLayer = 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.TileJSON({
 /** ol.source.TileJSON 
  * Layer source for tile data in TileJSON format.
  * TileJSON フォーマットのタイルデータのためのレイヤソース。
  *(ol3 API)
  */
  url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
 })
});
var gridSource = new ol.source.TileUTFGrid({
/** ol.source.TileUTFGrid 
 * Layer source for UTFGrid interaction data 
 * loaded from TileJSON format.
 * TileJSO フォーマットからロードされた UTFGrid 
 * インターラクションのデータソース。(ol3 API)
 */
 url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
});
var gridLayer = new ol.layer.Tile({source: gridSource});
var view = new ol.View({
 center: [0, 0],
 zoom: 1
});
var mapElement = document.getElementById('map');
var map = new ol.Map({
 layers: [mapLayer, gridLayer],
 target: mapElement,
 view: view
});
var infoElement = document.getElementById('country-info');
var flagElement = document.getElementById('country-flag');
var nameElement = document.getElementById('country-name');
var infoOverlay = new ol.Overlay({
/** ol.Overlay 
 * Like ol.control.Control, Overlays are visible widgets. 
 * Unlike Controls, they are not in a fixed position on 
 * the screen, but are tied to a geographical coordinate, 
 * so panning the map will move an Overlay but not a Control.
 * ol.control.Controlと同じように、オーバーレイは、目に見える
 * ウィジェットです。コントロールとは異なり、それらは画面上の
 * 固定された位置にありませんが、地理座標に関連付けられている
 * ので、オーバーレイを移動しますが、コントロールできない
 * マップをパンします。(ol3 API)
 */
 element: infoElement,
 offset: [15, 15],
 stopEvent: false
});
map.addOverlay(infoOverlay);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。(ol3 API)
 */
var displayCountryInfo = function(coordinate) {
 var viewResolution = /** @type {number} */ (view.getResolution());
 /** @type 
  * 値のタイプ(型)の説明 - 式などで表示
  * (@use JSDoc[http://usejsdoc.org/]より)
  */
 /** getResolution()
  * Return: The resolution of the view.
  * view(ビュー)の解像度を返します。(ol3 API)
  */
 gridSource.forDataAtCoordinateAndResolution(coordinate, viewResolution,
  function(data) {
  // If you want to use the template from the TileJSON,
  //  load the mustache.js library separately and call
  // TileJSON からテンプレートを使用する場合は、別途 mustache.js
  // ライブラリをロードし、次の式で呼び出します。
  //  info.innerHTML = Mustache.render(gridSource.getTemplate(), data);
   mapElement.style.cursor = data ? 'pointer' : '';
   /** 条件演算子 condition ? expr1 : expr2 
    * condition: true か false かを評価する条件文です。
    * expr1, expr2: 各々の値の場合に実行する式です。
    * condition が true の場合、演算子は expr1 の値を選択します。
    * そうでない場合は expr2 の値を選択します。
    * (MDN[https://developer.mozilla.org/ja/docs/JavaScript/
    * Reference/Operators/Conditional_Operator])
    */
   if (data) {
    /* jshint -W069 */
    /* 予約語でないプロパティ名のとき 、[](角括弧、ブラケット)
     * 内の文字列リテラルを使用してプロパティにアクセスする試み
     * を検出したとき投げられる警告を発行しないように JSHint に
     * 伝えることを意味します。
     * (['{a}'] is better written in dot notation[https://
     * jslinterrors.com/a-is-better-written-in-dot-notation])
     */
    flagElement.src = 'data:image/png;base64,' + data['flag_png'];
    nameElement.innerHTML = data['admin'];
    /* jshint +W069 */
    // 上記警告の発行を有効化します。
   }
   infoOverlay.setPosition(data ? coordinate : undefined);
  /** setPosition()
   * Set the position for this overlay.
   * このオーバーレイに位置を設定します。(ol3 API)
   */
 });
};
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
 * Return: Viewport (ol3 API)
 */
/** jQuery on イベント */
 var coordinate = map.getEventCoordinate(evt.originalEvent);
 /** getEventCoordinate
  * Returns the geographical coordinate for a browser event.
  * ブラウザイベントに対して地理的座標を返します。
  */
 displayCountryInfo(coordinate);
});
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 displayCountryInfo(evt.coordinate);
});

2 - ol3.1ex 48a - TileUTFGrid example 1

2 - ol3.1ex 49a - XYZ Esri EPSG:4326 tileSize 512 example 1 「TileUTFGrid example(tileutfgrid.html)」を参考に地図を表示してみます。
説明に次のようにあります。

This example shows how to read data from a TileUTFGrid layer.
Point to a country to see its name and flag.
Tiles made with TileMill. Hosting on MapBox.com or with open-source TileServer.
この例では、TileUTFGrid レイヤからデータを読み取る方法を示しています。
国をポイントすると、その名前とフラグを表示します。
タイルは、MapBox.com にホスティングサれている TileMill またはオープンソースTileServer で作成されます。

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





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





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



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








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











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


「248-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.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <style type="text/css">
   #country-name {
    color: black;
    font-size: 12pt;
    font-weight: bold;
    text-shadow: white 0.1em 0.1em 0.2em;
   }
  </style>
  <title>TileUTFGrid 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.1.1/examples/"><img src="v3.1.1/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">TileUTFGrid example</h4>
     <p id="shortdesc">This example shows how to read data from a TileUTFGrid layer.</p>
     <p>Point to a country to see its name and flag.</p>
     <div id="docs">
      <p>Tiles made with <a href="http://tilemill.com/">TileMill</a>. 
       Hosting on MapBox.com or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.</p>
      <!--
      See the <a href="tileutfgrid.js" target="_blank">tileutfgrid.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="248-ol3ex.js" target="_blank">248-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">utfgrid, tileutfgrid, tilejson</div>
    </div>
   </div>
  </div>
  <div style="display: none;">
   <!-- Overlay with the country info -->
   <div id="country-info">
    <div id="country-name"> </div>
    <img id="country-flag" src="" />
   </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.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=tileutfgrid" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=248-ol3ex" type="text/javascript"></script>
 </body>
</html>

v3.1.1 の examples を試してみます

OpenLayers 3 のホームページ(http://openlayers.org/)の「LATEST」の文中の「v3.1.1」をクリックします。
開いたページ「Release v3.1.1 - openlayers/ol3 GitHub(https://github.com/openlayers/ol3/releases/tag/v3.1.1)」の「v3.1.1.zip」ボタンをクリックしてダウンロードします。
展開したフォルダを Eclipse の ol3proj にコピーします。

ディレクトリは次のようににしました。

ol3proj
|-v3.0.0/
|-v3.1.1/
|-2xx-ol3ex.html
|-2xx-ol3ex.js
|-2xx-ol3ex-require.js
|-loader.js

v.3.0.0 の loader.js の名前を loader-v3.0.0.js に変更し、v3.1.1/examples/loader.js を ol3proj 直下にコピーします。

ol3proj
|-v3.0.0/
|-v3.1.1/
|-2xx-ol3ex.html
|-2xx-ol3ex.js
|-2xx-ol3ex-require.js
|-loader.js
|-loader-v3.0.0.js

loader.js の内容を次のように修正します。

---
  if (!raw) {
    // document.write('<scr' + 'ipt type="text/javascript" src="../build/ol.js"></scr' + 'ipt>');
     // ディレクトリ修正
    document.write('<scr' + 'ipt type="text/javascript" src="v3.1.1/build/ol.js"></scr' + 'ipt>');
  } else {
    window.CLOSURE_NO_DEPS = true; // we've got our own deps file
    // document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
    // document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
     // ディレクトリ修正
    document.write('<scr' + 'ipt type="text/javascript" src="v3.1.1/closure-library/closure/goog/base.js"></scr' + 'ipt>');
    document.write('<scr' + 'ipt type="text/javascript" src="v3.1.1/build/ol-deps.js"></scr' + 'ipt>');
    document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');
  }
  document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '.js"></scr' + 'ipt>');
}());

jquery.min.js のディレクトリが変更されています。

v3.1.1/resources/jquery.min.js


V3.0.0 の examples の中で次のものが v3.1.1 では削除されていました。

Google Maps integration example(google-map.html)