2014年11月30日日曜日

2 - ol3ex 40b - Overlay example 2

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

「240-ol3ex.js」の内容
var layer = 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.MapQuest({layer: 'sat'})
 /** ol.source.MapQuest
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。(ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照)
  */
});
var map = new ol.Map({
 layers: [layer],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});
var pos = ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857');
/** 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)
 */
// Vienna marker
var marker = 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)
 */
 position: pos,
 positioning: 'center-center',
 element: document.getElementById('marker'),
 stopEvent: false
});
map.addOverlay(marker);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。(ol3 API)
 */
// Vienna label
var vienna = new ol.Overlay({
 position: pos,
 element: document.getElementById('vienna')
});
map.addOverlay(vienna);
// Popup showing the position the user clicked
var popup = new ol.Overlay({
 element: document.getElementById('popup')
});
map.addOverlay(popup);
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 var element = popup.getElement();
 /** getElement()
  * Get the DOM element of this overlay.
  * このオーバーレイの DOM エレメントを取得します。
  * (ol3 API)
  */
 var coordinate = evt.coordinate;
 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
 /** ol.coordinate.toStringHDMS()
  * Returns: Hemisphere, degrees, minutes and seconds.
  * (ol3 API)
  */
  coordinate, 'EPSG:3857', 'EPSG:4326'));
 $(element).popover('destroy');
  /** Popovers popover.js
   * Add small overlays of content, like those on the iPad, 
   * to any element for housing secondary information. 
   * Popovers whose both title and content are zero-length 
   * are never displayed.
   * コンテンツの小さなオーバーレイを、iPad上のもののように、
   * ハウジング二次情報のための要素に追加します。
   * タイトルと内容の両方が長さゼロ(の文字列)である Popovers 
   * は、表示されません。
   * (Bootstrap[http://getbootstrap.com/javascript/
   * #popovers])
   */ 
 popup.setPosition(coordinate);
 /** etPosition(position))
  * Set the position for this overlay.
  * このオーバーレイの位置を設定します。(ol3 API)
  */
 /** the keys are quoted to prevent renaming in 
  * ADVANCED_OPTIMIZATIONS mode.
  * キーはADVANCED_OPTIMIZATIONSモードで名前変更を防ぐために、
  * ここで提示します。
  */
 $(element).popover({
  'placement': 'top',
  'animation': false,
  'html': true,
  'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
 });
 $(element).popover('show');
});

2 - ol3ex 40a - Overlay example 1

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

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





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





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



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








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











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


「240-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>Overlay example example</title>
  <style type="text/css">
   #marker {
    width: 20px;
    height: 20px;
    border: 1px solid #088;
    border-radius: 10px;
    background-color: #0FF;
    opacity: 0.5;
   }
   #vienna {
    text-decoration: none;
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: black 0.1em 0.1em 0.2em;
   }
   .popover {
    z-index: auto;
   }
   .popover-content {
    min-width: 180px;
   }
  </style>
 </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">Overlay example</h4>
     <p id="shortdesc">Demonstrates overlays.</p>
     <div id="docs">
      <p>The popups are created using
       <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
     <!--
      <p>See the <a href="overlay.js" target="_blank">overlay.js source</a> to see how this is done.</p>
     -->
       <!-- ファイル修正 -->
      <p>See the <a href="240-ol3ex.js" target="_blank">240-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">overlay, popup, bootstrap, popover, mapquest, openaerial</div>
    </div>
   </div>
  </div>
  <div style="display: none;">
   <!-- Clickable label for Vienna -->
   <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
   <div id="marker" title="Marker"></div>
   <!-- Popup -->
   <div id="popup" title="Welcome to ol3"></div>
  </div>
  <!--
  <script src="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.0.0/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=overlay" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=240-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 39b - Vector labels example 2

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

「239-ol3ex.js」の内容
var myDom = {
 points: {
  text: document.getElementById('points-text'),
  align: document.getElementById('points-align'),
  baseline: document.getElementById('points-baseline'),
  rotation: document.getElementById('points-rotation'),
  font: document.getElementById('points-font'),
  weight: document.getElementById('points-weight'),
  size: document.getElementById('points-size'),
  offsetX: document.getElementById('points-offset-x'),
  offsetY: document.getElementById('points-offset-y'),
  color: document.getElementById('points-color'),
  outline: document.getElementById('points-outline'),
  outlineWidth: document.getElementById('points-outline-width'),
  maxreso: document.getElementById('points-maxreso')
 },
 lines: {
  text: document.getElementById('lines-text'),
  align: document.getElementById('lines-align'),
  baseline: document.getElementById('lines-baseline'),
  rotation: document.getElementById('lines-rotation'),
  font: document.getElementById('lines-font'),
  weight: document.getElementById('lines-weight'),
  size: document.getElementById('lines-size'),
  offsetX: document.getElementById('lines-offset-x'),
  offsetY: document.getElementById('lines-offset-y'),
  color: document.getElementById('lines-color'),
  outline: document.getElementById('lines-outline'),
  outlineWidth: document.getElementById('lines-outline-width'),
  maxreso: document.getElementById('lines-maxreso')
 },
 polygons: {
  text: document.getElementById('polygons-text'),
  align: document.getElementById('polygons-align'),
  baseline: document.getElementById('polygons-baseline'),
  rotation: document.getElementById('polygons-rotation'),
  font: document.getElementById('polygons-font'),
  weight: document.getElementById('polygons-weight'),
  size: document.getElementById('polygons-size'),
  offsetX: document.getElementById('polygons-offset-x'),
  offsetY: document.getElementById('polygons-offset-y'),
  color: document.getElementById('polygons-color'),
  outline: document.getElementById('polygons-outline'),
  outlineWidth: document.getElementById('polygons-outline-width'),
  maxreso: document.getElementById('polygons-maxreso')
 }
};
var getText = function(feature, resolution, dom) {
 var type = dom.text.value;
 var maxResolution = dom.maxreso.value;
 var text = feature.get('name');
 /** get(key)
  * Gets a value.
  * (ol3 API[説明は Stable Only のチェックを外すと表示])
  */
 if (resolution > maxResolution) {
  text = '';
 } else if (type == 'hide') {
  text = '';
 } else if (type == 'shorten') {
  text = text.trunc(12);
 } else if (type == 'wrap') {
  text = stringDivider(text, 16, '\n');
 }
 return text;
};
var createTextStyle = function(feature, resolution, dom) {
 var align = dom.align.value;
 var baseline = dom.baseline.value;
 var size = dom.size.value;
 var offsetX = parseInt(dom.offsetX.value, 10);
 /** parseInt(string, radix)
  * str: 文字列, radix: 基数(進法)
  * 文字列の引数をパースし、指定された基数の整数を返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/parseInt])
  */
 var offsetY = parseInt(dom.offsetY.value, 10);
 var weight = dom.weight.value;
 var rotation = parseFloat(dom.rotation.value);
 /** parseFloat()
  * 引数として与えられた文字列を解析し、浮動小数点数を返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/parseFloat])
  */ 
 var font = weight + ' ' + size + ' ' + dom.font.value;
 var fillColor = dom.color.value;
 var outlineColor = dom.outline.value;
 var outlineWidth = parseInt(dom.outlineWidth.value, 10);
 return new ol.style.Text({
 /** ol.style.Text
  * Set text style for vector features.
  * ベクタフィーチャの文字列のスタイルを設定します。(ol3 API)
  */
  textAlign: align,
  textBaseline: baseline,
  font: font,
  text: getText(feature, resolution, dom),
  fill: new ol.style.Fill({color: fillColor}),
  /** ol.style.Fill 
   * Set fill style for vector features.
   * ベクタフィーチャの塗りつぶしスタイルを設定。(ol3 API)
   */
  stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
  /** 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)
   */
  offsetX: offsetX,
  offsetY: offsetY,
  rotation: rotation
 });
};
// Polygons
var createPolygonStyleFunction = function() {
 return function(feature, resolution) {
  var style = new ol.style.Style({
  /** ol.style.Style 
   * Base class for vector feature rendering styles.
   * ベクタフィーチャがスタイルを描画するための基本クラス。
   * (ol3 API)
   */
   stroke: new ol.style.Stroke({
   color: 'blue',
   width: 1
  }),
   fill: new ol.style.Fill({
    color: 'rgba(0, 0, 255, 0.1)'
   }),
   text: createTextStyle(feature, resolution, myDom.polygons)
  });
  return [style];
 };
};
var vectorPolygons = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。(ol3 API)
 */
 source: new ol.source.GeoJSON({
 /** ol.source.GeoJSON 
  * Static vector source in GeoJSON format
  * GeoJSON フォーマットの静的ベクタソース。(ol3 API)
  */
  projection: 'EPSG:3857',
  // url: 'data/geojson/polygon-samples.geojson'
  url: 'v3.0.0/examples/data/geojson/polygon-samples.geojson' // 修正
 }),
 style: createPolygonStyleFunction()
});
// Lines
var createLineStyleFunction = function() {
 return function(feature, resolution) {
  var style = new ol.style.Style({
   stroke: new ol.style.Stroke({
    color: 'green',
    width: 2
   }),
   text: createTextStyle(feature, resolution, myDom.lines)
  });
  return [style];
 };
};
var vectorLines = new ol.layer.Vector({
 source: new ol.source.GeoJSON({
  projection: 'EPSG:3857',
  // url: 'data/geojson/line-samples.geojson' // 修正
  url: 'v3.0.0/examples/data/geojson/line-samples.geojson'
 }),
 style: createLineStyleFunction()
});
// Points
var createPointStyleFunction = function() {
 return function(feature, resolution) {
  var style = new ol.style.Style({
   image: new ol.style.Circle({
   /** ol.style.Circle
    * Set circle style for vector features.
    * ベクタフィーチャの円のスタイルを設定。(ol3 API)
    */
    radius: 10,
    fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
    stroke: new ol.style.Stroke({color: 'red', width: 1})
   }),
   text: createTextStyle(feature, resolution, myDom.points)
  });
  return [style];
 };
};
var vectorPoints = new ol.layer.Vector({
 source: new ol.source.GeoJSON({
  projection: 'EPSG:3857',
  // url: 'data/geojson/point-samples.geojson' // 修正
  url: 'v3.0.0/examples/data/geojson/point-samples.geojson'
  }),
  style: createPointStyleFunction()
});
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.MapQuest({layer: 'osm'})
   /** ol.source.MapQuest
    * Layer source for the MapQuest tile server.
    * MapQuest タイルサーバのレイヤソース。(ol3 API
    * 2 - ol3ex 23b - MapQuest example 2 参照)
    */
  }),
  vectorPolygons,
  vectorLines,
  vectorPoints
 ],
 target: 'map',
 view: new ol.View({
  center: [-8161939, 6095025],
  zoom: 8
 })
});
$('#refresh-points').click(function() {
/** .click()
 * Bind an event handler to the "click" JavaScript event, 
 * or trigger that event on an element.
 * "click" JavaScript イベントにイベントハンドラをバインド、
 * または要素の上でのイベントをトリガします。
 * (jQuery API Doc.[http://api.jquery.com/click/])
 */
 vectorPoints.setStyle(createPointStyleFunction());
});
$('#refresh-lines').click(function() {
 vectorLines.setStyle(createLineStyleFunction());
});
$('#refresh-polygons').click(function() {
 vectorPolygons.setStyle(createPolygonStyleFunction());
});
/**
 * @param {number} n The max number of characters to keep.
 *  (保持する最大文字数)
 * @return {string} Truncated string.
 *  (切り捨てられた文字列)
 */
/** 「@param」
 * The @param tag provides the name, type, and 
 * description of a function parameter.
 * The @param tag requires you to specify the name of 
 * the parameter you are documenting. You can also 
 * include the parameter's type, enclosed in curly 
 * brackets, and a description of the parameter.
 * @paramタグは、関数パラメータの名前と型、説明を提供します。
 * @paramタグを使用すると、文書化されたパラメータの名前を
 * 指定する必要があります。また、パラメータのタイプと、中括弧
 * で囲まれたおよびパラメータの説明を含めることができます。
 * (@use JSDoc [http://usejsdoc.org/tags-param.html])
 */
/** @return(@returns と同義)
 * The @returns tag documents the value that a function 
 * returns.
 * @returns タグは、関数が返す値について説明します。
 * (@use JSDoc [http://usejsdoc.org/tags-returns..html])
 */
String.prototype.trunc = String.prototype.trunc ||
 function(n) {
  return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0);
  /** String.prototype.substr()
   * The substr() method returns the characters in a 
   * string beginning at the specified location through 
   * the specified number of characters.
   * substr()メソッドは、文字列内の指定した位置から始まり、指定
   * した文字数のまでの文字を返します。
   * (MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/String/substr])
   */
};
// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript
function stringDivider(str, width, spaceReplacer) {
 if (str.length > width) {
  var p = width;
  for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) {
  }
  if (p > 0) {
   var left;
   if (str.substring(p, p + 1) == '-') {
   /** String.prototype.substring()
    * The substring() method returns a subset of a string 
    * between one index and another, or through the end of 
    * the string.
    * substring()メソッドは、インデックス間の文字列のサブセッ
    * ト、または、文字列の終わりまでを返します。
    */
    left = str.substring(0, p + 1);
   } else {
    left = str.substring(0, p);
   }
   var right = str.substring(p + 1);
   return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
  }
 }
 return str;
}

2 - ol3ex 39a - Vector labels example 1

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

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





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





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



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








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











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


「239-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>Vector labels example</title>
  <style type="text/css">
   h2 {
    font-size: 1.5em;
    line-height: 15px;
   }
   .scale-cnt {
    margin: 5px;
   }
   .edit-form-ctn {
   }
   .edit-form {
    float: left;
    margin: 5px;
    width: 230px;
    padding: 4px;
    border: 1px solid black;
   }
   .edit-form input[type="button"] {
    float: right;
   }
   .edit-form-elem label {
    display: block;
    float: left;
    width: 85px;
   }
   .edit-form-elem input[type="text"] {
    width: 60px;
   }
   .edit-form-elem select {
    width: 130px;
   }
  </style>
 </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="edit-form">
    <input id="refresh-points" type="button" value="Refresh" />
     <h2>Points</h2>
     <div class="edit-form-elem">
      <label>Text: </label>
      <select id="points-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
       <option value="shorten" selected="selected">Shorten</option>
       <option value="wrap">Wrap</option>
      </select>
      <br />
      <label title="Max Resolution Denominator">MaxReso.:</label>
      <select id="points-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
       <option value="9600">9,600</option>
       <option value="4800">4,800</option>
       <option value="2400">2,400</option>
       <option value="1200" selected="selected">1,200</option>
       <option value="600">600</option>
       <option value="300">300</option>
       <option value="150">150</option>
       <option value="75">75</option>
       <option value="32">32</option>
       <option value="16">16</option>
       <option value="8">8</option>
      </select>
      <br />
      <label>Align: </label>
      <select id="points-align">
       <option value="center" selected="selected">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
       <option value="start">Start</option>
      </select>
      <br />
      <label>Baseline: </label>
      <select id="points-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
       <option value="hanging">Hanging</option>
       <option value="ideographic">Ideographic</option>
       <option value="middle" selected="selected">Middle</option>
       <option value="top">Top</option>
      </select>
      <br />
      <label>Rotation: </label>
      <select id="points-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
      </select>
      <br />
      <label>Font: </label>
      <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
       <option value="Courier New">Courier New</option>
       <option value="Quattrocento Sans">Quattrocento</option>
       <option value="Verdana">Verdana</option>
      </select>
      <br />
      <label>Weight: </label>
      <select id="points-weight">
       <option value="bold">Bold</option>
       <option value="normal" selected="selected">Normal</option>
      </select>
      <br />
      <label>Size: </label>
      <input type="text" value="12px" id="points-size" />
      <br />
      <label>Offset X:</label>
      <input type="text" value="0" id="points-offset-x" />
      <br />
      <label>Offset Y:</label>
      <input type="text" value="0" id="points-offset-y" />
      <br />
      <label>Color :</label>
      <input type="text" value="#aa3300" id="points-color" />
      <br />
      <label title="Outline Color">O. Color:</label>
      <input type="text" value="#ffffff" id="points-outline" />
      <br />
      <label title="Outline Width">O. Width :</label>
      <input type="text" value="3" id="points-outline-width" />
     </div>
    </div>
    <div class="edit-form">
     <input id="refresh-lines" type="button" value="Refresh" />
     <h2>Lines</h2>
     <div class="edit-form-elem">
      <label>Text: </label>
      <select id="lines-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
       <option value="shorten">Shorten</option>
       <option value="wrap" selected="selected">Wrap</option>
      </select>
      <br />
      <label title="Max Resolution Denominator">MaxReso.:</label>
      <select id="lines-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
       <option value="9600">9,600</option>
       <option value="4800">4,800</option>
       <option value="2400">2,400</option>
       <option value="1200" selected="selected">1,200</option>
       <option value="600">600</option>
       <option value="300">300</option>
       <option value="150">150</option>
       <option value="75">75</option>
       <option value="32">32</option>
       <option value="16">16</option>
       <option value="8">8</option>
      </select>
      <br />
      <label>Align: </label>
      <select id="lines-align">
       <option value="center" selected="selected">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
       <option value="start">Start</option>
      </select>
      <br />
      <label>Baseline: </label>
      <select id="lines-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
       <option value="hanging">Hanging</option>
       <option value="ideographic">Ideographic</option>
       <option value="middle" selected="selected">Middle</option>
       <option value="top">Top</option>
      </select>
      <br />
      <label>Rotation: </label>
      <select id="lines-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
      </select>
      <br />
      <label>Font: </label>
      <select id="lines-font">
       <option value="Arial">Arial</option>
       <option value="Courier New" selected="selected">Courier New</option>
       <option value="Quattrocento Sans">Quattrocento</option>
       <option value="Verdana">Verdana</option>
      </select>
      <br />
      <label>Weight: </label>
      <select id="lines-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
      </select>
      <br />
      <label>Size: </label>
      <input type="text" value="12px" id="lines-size" />
      <br />
      <label>Offset X:</label>
      <input type="text" value="0" id="lines-offset-x" />
      <br />
      <label>Offset Y:</label>
      <input type="text" value="0" id="lines-offset-y" />
      <br />
      <label>Color :</label>
      <input type="text" value="green" id="lines-color" />
      <br />
      <label title="Outline Color">O. Color:</label>
      <input type="text" value="#ffffff" id="lines-outline" />
      <br />
      <label title="Outline Width">O. Width :</label>
      <input type="text" value="3" id="lines-outline-width" />
     </div>
    </div>
    <div class="edit-form">
     <input id="refresh-polygons" type="button" value="Refresh" />
     <h2>Polygons</h2>
     <div class="edit-form-elem">
      <label>Text: </label>
      <select id="polygons-text">
       <option value="hide">Hide</option>
       <option value="normal" selected="selected">Normal</option>
       <option value="shorten">Shorten</option>
       <option value="wrap">Wrap</option>
      </select>
      <br />
      <label title="Max Resolution Denominator">MaxReso.:</label>
      <select id="polygons-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
       <option value="9600">9,600</option>
       <option value="4800">4,800</option>
       <option value="2400">2,400</option>
       <option value="1200" selected="selected">1,200</option>
       <option value="600">600</option>
       <option value="300">300</option>
       <option value="150">150</option>
       <option value="75">75</option>
       <option value="32">32</option>
       <option value="16">16</option>
       <option value="8">8</option>
      </select>
      <br />
      <label>Align: </label>
      <select id="polygons-align">
       <option value="center" selected="selected">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
       <option value="start">Start</option>
      </select>
      <br />
      <label>Baseline: </label>
      <select id="polygons-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
       <option value="hanging">Hanging</option>
       <option value="ideographic">Ideographic</option>
       <option value="middle" selected="selected">Middle</option>
       <option value="top">Top</option>
      </select>
      <br />
      <label>Rotation: </label>
      <select id="polygons-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
      </select>
      <br />
      <label>Font: </label>
      <select id="polygons-font">
       <option value="Arial">Arial</option>
       <option value="Courier New">Courier New</option>
       <option value="Quattrocento Sans">Quattrocento</option>
       <option value="Verdana" selected="selected">Verdana</option>
      </select>
      <br />
      <label>Weight: </label>
      <select id="polygons-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
      </select>
      <br />
      <label>Size: </label>
      <input type="text" value="10px" id="polygons-size" />
      <br />
      <label>Offset X:</label>
      <input type="text" value="0" id="polygons-offset-x" />
      <br />
      <label>Offset Y:</label>
      <input type="text" value="0" id="polygons-offset-y" />
      <br />
      <label>Color :</label>
      <input type="text" value="blue" id="polygons-color" />
      <br />
      <label title="Outline Color">O. Color:</label>
      <input type="text" value="#ffffff" id="polygons-outline" />
      <br />
      <label title="Outline Width">O. Width :</label>
      <input type="text" value="3" id="polygons-outline-width" />
     </div>
    </div>
    <div style="clear:left;"></div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Vector labels example</h4>
     <p id="shortdesc">Example of GeoJSON features with labels.</p>
     <div id="docs">
<!--
      <p>See the <a href="vector-labels.js" target="_blank">vector-labels.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="239-ol3ex.js" target="_blank">239-ol3ex.js source</a> to see how this is done.</p>
      <p><strong>Note:</strong> The 'Text/Wrap' option is currently
       not working properly.  This is because ol3 uses Canvas's strokeText
       and fillText functions that do not support text wrapping.</p>
     </div>
     <div id="tags">geojson, vector, openstreetmap, label</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-label" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=239-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 38b - Popup example 2

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

「238-ol3ex.js」の内容
/**
 * Elements that make up the popup.
 * ポップアップを作成するエレメント。
 */
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 * ポップアップを隠すクリックハンドラを追加。
 * @return {boolean}(戻り値{Boolean 型}) 
 *     href の後にt付けないでください。
 */
/** @return(@returns と同義)
 * The @returns tag documents the value that a function 
 * returns.
 * @returns タグは、関数が返す値について説明します。
 * (@use JSDoc [http://usejsdoc.org/tags-returns..html])
 */
closer.onclick = function() {
/** GlobalEventHandlers.onclick
 * The onclick property returns the click event 
 * handler code on the current element.
 * onclick プロパティは、現在の要素の click イベント
 * ハンドラのコードを返します。
 * (MDN[https://developer.mozilla.org/en-US/
 * docs/Web/API/GlobalEventHandlers.onclick])
 */
 container.style.display = 'none';
 closer.blur();
 /** HTMLElement.blur()
  * The HTMLElement.blur() method removes 
  * keyboard focus from the current element.
  * HTMLElement.blur()メソッドは、現在の要素から
  * キーボードフォーカスを削除します。
  * (MDN[https://developer.mozilla.org/en-US/
  * docs/Web/API/HTMLElement.blur])
  */
 return false;
};
/**
 * Create an overlay to anchor the popup to the map.
 * マップにポップアップを固定するためのオーバーレイを作成します。
 */
var overlay = 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: container
});
/**
 * Create the map.
 */
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.TileJSON({
   /** ol.source.TileJSON 
    * Layer source for tile data in TileJSON format.
    * TileJSON フォーマットのタイルデータのためのレイヤソース。
    *(ol3 API)
    */
    url: 'http://api.tiles.mapbox.com/v3/' +
     'mapbox.natural-earth-hypso-bathy.jsonp',
    crossOrigin: 'anonymous'
   })
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 overlays: [overlay],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});
/**
 * Add a click handler to the map to render the popup.
 * ポップアップをレンダリングするためにマップにクリックハンドラ
 * を追加します。
 */
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 var coordinate = evt.coordinate;
 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
 /** ol.coordinate.toStringHDMS()
  * Returns: Hemisphere, degrees, minutes and seconds.
  * (ol3 API)
  */
 /** 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)
  */
  coordinate, 'EPSG:3857', 'EPSG:4326'));
  overlay.setPosition(coordinate);
  /** setPosition
   * Set the position for this overlay.
   * このオーバーレイに位置を設定します。(ol3 API)
   */
  content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
  '</code>';
  container.style.display = 'block';
});

2 - ol3ex 38a - Popup example 1

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

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





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





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



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








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











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


「238-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>Vector Icon example</title>
  <style type="text/css">
   .ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
   }
   .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
   }
   .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
   }
   .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
   }
   .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
   }
   .ol-popup-closer:after {
    content: "✖";
   }
  </style>
 </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 id="popup"></div>    
     </div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Popup example</h4>
     <p id="shortdesc">Uses an overlay to create a popup.</p>
     <div id="docs">
       <p>Click on the map to get a popup.  The popup is composed
        of a few basic elements: a container, a close button, and
        a place for the content.  To anchor the popup to the map,
        an <code>ol.Overlay</code> is created with the popup 
        container.  A listener is registered for the map's <code>
        click</code> event to display the popup, and another 
        listener is set as the <code>click</code> handler for the 
        close button to hide the popup.</p>
<!--
      <p>See the <a href="popup.js" target="_blank">popup.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="238-ol3ex.js" target="_blank">238-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">overlay, popup, mapquest, openaerial</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=popup" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=238-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 37b - Icon example 2

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

「237-ol3ex.js」の内容
var iconFeature = new ol.Feature({
/** ol.Feature 
 * A vector object for geographic features with a geometry 
 * and other attribute properties, similar to the features 
 * vector file formats like GeoJSON.
 * GeoJSONのようなフィーチャベクタファイルフォーマットと同様の、
 * ジオメトリおよびその他の属性プロパティを持つ地理的フィーチャの
 * ベクタオブジェクト。(ol3 API)
 */
 geometry: new ol.geom.Point([0, 0]),
 /** ol.geom.Point
  * Point geometry.(ol3 API)
  */
 name: 'Null Island',
 population: 4000,
 rainfall: 500
});
var iconStyle = new ol.style.Style({
/** ol.style.Style 
 * Base class for vector feature rendering styles.
 * ベクタフィーチャがスタイルを描画するための基本クラス。
 * (ol3 API)
 */
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 /** ol.style.Icon 
  * Set icon style for vector features.
  * ベクタフィーチャのアイコンスタイルを設定します。(ol3 API)
  */
 /** @type 
  * 値のタイプ(型)の説明 - 式などで表示
  * olx.style.IconOptions の型を使用。
  * (@use JSDoc[http://usejsdoc.org/]より)
  */
  anchor: [0.5, 46],
  anchorXUnits: 'fraction',
  anchorYUnits: 'pixels',
  opacity: 0.75,
  // src: 'data/icon.png'
  src: 'v3.0.0/examples/data/icon.png'
 }))
});
iconFeature.setStyle(iconStyle);
/** setStyle
 * Set the style for this feature.
 * このフィーチャのスタイルを設定します。(ol3 API)
 */
var vectorSource = new ol.source.Vector({
/** ol.source.Vector 
 * Provides a source of features for vector layers.
 * ベクタレイヤのフィーチャのソースを提供します。(ol3 API)
 */
 features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。(ol3 API)
 */
 source: vectorSource
});
var rasterLayer = 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.jsonp'
 })
});
var map = new ol.Map({
 layers: [rasterLayer, vectorLayer],
 target: document.getElementById('map'),
 view: new ol.View({
  center: [0, 0],
  zoom: 3
 })
});
var element = document.getElementById('popup');
var popup = 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: element,
 positioning: 'bottom-center',
 stopEvent: false
});
map.addOverlay(popup);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。(ol3 API)
 */
// display popup on click
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 var feature = map.forEachFeatureAtPixel(evt.pixel,
 /** forEachFeatureAtPixel
  * Detect features that intersect a pixel on the viewport, 
  * and execute a callback with each intersecting feature. 
  * Layers included in the detection can be configured 
  * through opt_layerFilter. Feature overlays will always 
  * be included in the detection.
  * ビューポート上のピクセルと交差するフィーチャを検出し、
  * 各交差するフィーチャとコールバックを実行します。
  * 検出に含まれるレイヤが opt_layerFilter を通じて
  * 設定することができます。フィーチャーオーバーレイは
  * 常に検出に含まれます。(ol3 API)
  */
 function(feature, layer) {
  return feature;
 });
 if (feature) {
  var geometry = feature.getGeometry();
  /** getGeometry()
   *  Returns the Geometry associated with this feature 
   * using the current geometry name property. By default, 
   * this is geometry but it may be changed by calling 
   * setGeometryName.
   * 現在のジオメトリネームプロパティを使用して、この
   * フィーチャに関連したジオメトリを返します。デフォルト
   * では、ジオメトリですが、setGeometryName を呼び出す
   * ことによって変更することができます。(ol3 API)
   */
  var coord = geometry.getCoordinates();
  /** getCoordinates()
   * Returns: Coordinates.(ol3 API)
   */
  popup.setPosition(coord);
  /** setPosition()
   * Set the position for this overlay.
   * このオーバーレイの位置を設定します。(ol3 API)
   */
  $(element).popover({
  /** Popovers popover.js
   * Add small overlays of content, like those on the iPad, 
   * to any element for housing secondary information. 
   * Popovers whose both title and content are zero-length 
   * are never displayed.
   * コンテンツの小さなオーバーレイを、iPad上のもののように、
   * ハウジング二次情報のための要素に追加します。
   * タイトルと内容の両方が長さゼロ(の文字列)である Popovers 
   * は、表示されません。
   * (Bootstrap[http://getbootstrap.com/javascript/
   * #popovers])
   */ 
   'placement': 'top',
   'html': true,
   'content': feature.get('name')
   /** get(key)
    * Gets a value.
    * (ol3 API[説明は Stable Only のチェックを外すと表示])
    */
  });
  $(element).popover('show');
 } else {
  $(element).popover('destroy');
 }
});
// change mouse cursor when over marker
$(map.getViewport()).on('mousemove', function(e) {
/** getViewport()
 * Return: Viewport (ol3 API)
 */
/** jQuery on イベント */
 var pixel = map.getEventPixel(e.originalEvent);
 /** getEventPixel
  * Returns the map pixel position for a browser event.
  * ブラウザイベントに対して、マップのピクセル位置を返します。
  * (ol3 API)
  */
 var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
  return true;
 });
 if (hit) {
  map.getTarget().style.cursor = 'pointer';
  /** getTarget()
   * Get the target in which this map is rendered. 
   * Note that this returns what is entered as an option or  
   * in setTarget: if that was an element, it returns an 
   * element; if a string, it returns that.
   * レンダリングされたこのマップのターゲットを取得します。
   * これはオプションとして、または setTarget に入力されているも
   * のを返すことに注意してください:それが要素ならば、要素を返し
   * ます。文字列ならば、それを返します。(ol3 API)
   */
 } else {
  map.getTarget().style.cursor = '';
 }
});

2 - ol3ex 37a - Icon example 1

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

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





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





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



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








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











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


「237-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>Vector Icon example</title>
  <style>
   #map {
    position: relative;
   }
   #popup {
    padding-bottom: 45px;
   }
  </style>
 </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 id="popup"></div>    
     </div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Icon example</h4>
     <p id="shortdesc">Example using an icon to symbolize a point.</p>
     <div id="docs">
<!--
      <p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="237-ol3ex.js" target="_blank">237-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">vector, style, icon, marker, popup</div>
    </div>
   </div>
  </div>
<!--
  <script src="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.0.0/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=icon" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=237-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3ex 36b - IGC example 2

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

IGCは、グライダーやパラグライダーの3次元のトラッキングに使われ、Andoroid アプリには、「IGC Tacker」などがあります。

IGC ファイルフォーマットについては、

「IGC FILE FORMAT REFERENCE AND DEVELOPERS' GUIDE - Ian Forster-Lewis(http://carrier.csi.cam.ac.uk/forsterlewis/soaring/igc_file_format/igc_format_2008.html)」などを参照してください。

「Clement-Latour.igc」の内容
AXGD123 6030 SN07172 SW3.32
HFDTE190411
HOPLTPILOT: Clement Latour
HOGTYGLIDERTYPE: R10.2
HOGIDGLIDERID: None
HODTM100GPSDATUM: WGS-84
HOCIDCOMPETITIONID: 
HOCCLCOMPETITION CLASS: None
HOSITSite: Marlens
B0853524556201N00651065EA0200502041

---

「236-ol3ex.js」の内容
var colors = {
 'Clement Latour': 'rgba(0, 0, 255, 0.7)',
 'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
 'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
 'Tom Payne': 'rgba(0, 255, 255, 0.7)',
 'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
};
var styleCache = {};
var styleFunction = function(feature, resolution) {
 var color = colors[feature.get('PLT')];
 /** get(key)
  * Gets a value.
  * (ol3 API[説明は Stable Only のチェックを外すと表示])
  */
 var styleArray = styleCache[color];
 if (!styleArray) {
  styleArray = [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: color,
    width: 3
   })
  })];
  styleCache[color] = styleArray;
 }
 return styleArray;
};
var vectorSource = new ol.source.IGC({
/** ol.source.IGC 
 * Static vector source in IGC format
 * IGCフォーマットの静的ベクトルソース。(ol3 API)
 */
 projection: 'EPSG:3857',
 urls: [
  'v3.0.0/examples/data/igc/Clement-Latour.igc', // 修正
  'v3.0.0/examples/data/igc/Damien-de-Baenst.igc',
  'v3.0.0/examples/data/igc/Sylvain-Dhonneur.igc',
  'v3.0.0/examples/data/igc/Tom-Payne.igc',
  'v3.0.0/examples/data/igc/Ulrich-Prinz.igc'
 ]
});
var time = {
 start: Infinity,
 stop: -Infinity,
 duration: 0
};
vectorSource.on('addfeature', function(event) {
/** on()
 * Listen for a certain type of event.
 * あるイベントの型をリッスンします。(al3 API)
 */
 var geometry = event.feature.getGeometry();
 /** event
  * Instance of an Event that is available to an event 
  * handler.
  * イベントハンドラで使用できるイベントのインスタンス。
  */
 /** getGeometry()
  *  Returns the Geometry associated with this feature 
  * using the current geometry name property. By default, 
  * this is geometry but it may be changed by calling 
  * setGeometryName.
  * 現在のジオメトリネームプロパティを使用して、このフィーチャに
  * 関連したジオメトリを返します。デフォルトでは、ジオメトリです
  * が、setGeometryName を呼び出すことによって変更することができ
  * ます。(ol3 API)
  */
 time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
 /** Math.min() 
  * 引数として与えた複数の数の中で最小の数を返します。
  * (MDN [https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/min])
  */
 /** getFirstCoordinate()
  * Return: First coordinate.(ol3 API)
  */
 time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
 /** Math.max() 
  * 引数として与えた複数の数の中で最大の数を返します。
  * (MDN [https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/max])
  */
 /** getLastCoordinate()
  * Return: Last point.(ol3 API)
  */
 time.duration = time.stop - time.start;
});
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)
    */
    attributions: [
     new ol.Attribution({
     /** ol.Attribution
      * An attribution for a layer source.
      * レイヤソースに対する attribution。(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'
   })
  }),
  new ol.layer.Vector({
  /** ol.layer.Vector
   * Vector data that is rendered client-side.
   * クライアント側で描画されるベクタデータ。(ol3 API)
   */
   source: vectorSource,
   style: styleFunction
  })
 ],
 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 
   * 値のタイプ(型)の説明 - 式などで表示
   * attributionOptions の値の型は、
   * olx.control.AttributionOptions の型を使用。
   * (@use JSDoc[http://usejsdoc.org/]より)
   */
   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [703365.7089403362, 5714629.865071137],
  zoom: 9
 })
});
var point = null;
var line = null;
var displaySnap = function(coordinate) {
 var closestFeature =
vectorSource.getClosestFeatureToCoordinate(coordinate);
 /** getClosestFeatureToCoordinate()
  * Returns: Closest feature.(ol3 API)
  */
 var info = document.getElementById('info');
 if (closestFeature === null) {
  point = null;
  line = null;
  info.innerHTML = '&nbsp;';
 } else {
  var geometry = closestFeature.getGeometry();
  var closestPoint = geometry.getClosestPoint(coordinate);
  /** setClosestPoint()
   * Returns: Closest point.(ol3 API)
   */
  if (point === null) {
   point = new ol.geom.Point(closestPoint);
   /** ol.geom.Point
    * Point geometry.(ol3 API)
    */
  } else {
   point.setCoordinates(closestPoint);
   /** setCoordinates()
    * setCoordinates(coordinates) [Type: ol.Coordinate, 
    * Description: Coordinates](ol3 API)
    */
  }
  var date = new Date(closestPoint[2] * 1000);
  /** Date
   * 日付や時刻を扱うことが可能な、JavaScript の Date インスタ
   * ンスを生成します。
   * (MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Date])
   */
  info.innerHTML =
   closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
   /** Date.prototype.toUTCString()
    * The toUTCString() method converts a date to a string, 
    * using the UTC time zone.
    * toUTCString()メソッドは、UTCタイムゾーンを使って、
    * 日時を文字列に変換します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * JavaScript/Reference/Global_Objects/Date/toUTCString])
    */
  var coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
  if (line === null) {
   line = new ol.geom.LineString(coordinates);
   /** ol.geom.LineString
    * Linestring geometry.(ol3 API)
    */
  } else {
   line.setCoordinates(coordinates);
  }
 }
 map.render();
 /** render()
  * Requests a render frame; rendering will effectively occur
  * at the next browser animation frame.
  * レンダーフレームをを要求します。すなわち、レンダリングは、
  * 次のブラウザのアニメーションフレームで、効果的に発生します。
  * (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.
  * ブラウザイベントに対して地理的座標を返します。
  */
 displaySnap(coordinate);
});
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 displaySnap(evt.coordinate);
});
var imageStyle = new ol.style.Circle({
/** ol.style.Circle
 * Set circle style for vector features.
 * ベクタフィーチャの円のスタイルを設定。(ol3 API)
 */
 radius: 5,
 fill: null,
 stroke: new ol.style.Stroke({
  color: 'rgba(255,0,0,0.9)',
  width: 1
 })
});
var strokeStyle = new ol.style.Stroke({
 color: 'rgba(255,0,0,0.9)',
 width: 1
});
map.on('postcompose', function(evt) {
 var vectorContext = evt.vectorContext;
 if (point !== null) {
  vectorContext.setImageStyle(imageStyle);
  vectorContext.drawPointGeometry(point);
 }
 if (line !== null) {
  vectorContext.setFillStrokeStyle(null, strokeStyle);
  vectorContext.drawLineStringGeometry(line);
 }
});
var featureOverlay = new ol.FeatureOverlay({
/** ol.FeatureOverlay
 * A mechanism for changing the style of a small number of 
 * features on a temporary basis, for example highlighting. 
 * This is necessary with the Canvas renderer, where, unlike
 * in SVG, features cannot be individually referenced.
 * ハイライトのように、一時的に少数のフィーチャがスタイルの変更す
 * るためのメカニズム。これは Canvas レンダラが必要で、SVGとは異
 * なり、フィーチャを個別に参照することはできません。(ol3 API)
 */
 map: map,
 style: new ol.style.Style({
  image: new ol.style.Circle({
   radius: 5,
   fill: new ol.style.Fill({
   /** ol.style.Fill 
    * Set fill style for vector features.
    * ベクタフィーチャの塗りつぶしスタイルを設定。(ol3 API)
    */
    color: 'rgba(255,0,0,0.9)'
   }),
   stroke: null
  })
 })
});
$('#time').on('input', function(event) {
 var value = parseInt($(this).val(), 10) / 100;
 /** parseInt(string, radix)
  * str: 文字列, radix: 基数(進法)
  * 文字列の引数をパースし、指定された基数の整数を返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/parseInt])
  */
 var m = time.start + (time.duration * value);
 vectorSource.forEachFeature(function(feature) {
 /** forEachFeature
  * forEachFeature(f) [Type: function, Description: Callback]
  * (ol3 API)
  */
  var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
  var coordinate = geometry.getCoordinateAtM(m, true);
  /** getCoordinateAtM()
   * Returns the coordinate at m using linear interpolation, 
   * or null if no such coordinate exists.
   * 線形補間を使用する m で座標を、または、そのような座標が存在
   * しない場合は null を返します。(ol3 API)
   */
  var highlight = feature.get('highlight');
  if (highlight === undefined) {
   highlight = new ol.Feature(new ol.geom.Point(coordinate));
   /** ol.Feature 
    * A vector object for geographic features with a 
    * geometry and other attribute properties, similar to 
    * the features vector file formats like GeoJSON.
    * GeoJSONのようなフィーチャベクタファイルフォーマットと同様
    * の、ジオメトリおよびその他の属性プロパティを持つ地理的
    * フィーチャのベクタオブジェクト。(ol3 API)
    */
   feature.set('highlight', highlight);
   featureOverlay.addFeature(highlight);
  } else {
   highlight.getGeometry().setCoordinates(coordinate);
  }
 });
 map.render();
});