2 - ol3.9ex 130b - Z-index layer ordering example 2

「layer-z-index.js（2130-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2130-ol3ex.js」

var stroke = new ol.style.Stroke({color: 'black', width: 1});
/** 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[説明は Stable Only のチェックを外すと表示]）
 */

var styles = {

 'square': [new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  image: new ol.style.RegularShape({
  /** ol.style.RegularShape
   * Set regular shape style for vector features. The 
   * resulting shape will be a regular polygon when 
   * radius is provided, or a star when radius1 and 
   * radius2 are provided.
   * ベクタフィーチャの規則的な形状のスタイルを設定します。生じた
   * 形状は、radius が提供されたとき正多角形になり、または、
   * radius1 と radius2 が提供されたとき星形になります。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

   fill: new ol.style.Fill({color: 'blue'}),
   /** ol.style.Fill 
    * Set fill style for vector features.
    * ベクタフィーチャの塗りつぶしスタイルを設定。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   stroke: stroke,
   points: 4,
   radius: 80,

   angle: Math.PI / 4
   /** Math.PI()
    * 円周率。約 3.14159 です。
    * （MDN[https://developer.mozilla.org/ja/docs/Web
    * /JavaScript/Reference/Global_Objects/Math/PI]）
    */

  })
 })],
 'triangle': [new ol.style.Style({
  image: new ol.style.RegularShape({
   fill: new ol.style.Fill({color: 'red'}),
   stroke: stroke,
   points: 3,
   radius: 80,
   rotation: Math.PI / 4,
   angle: 0
  })
 })],
 'star': [new ol.style.Style({
  image: new ol.style.RegularShape({
   fill: new ol.style.Fill({color: 'green'}),
   stroke: stroke,
   points: 5,
   radius: 80,
   radius2: 4,
   angle: 0
  })
 })]
};

function createLayer(coordinates, styles, zIndex) {

 var feature = new ol.Feature(new ol.geom.Point(coordinates));
/** ol.Feature
 * A vector object for geographic features with a geometry 
 * and other attribute properties, similar to the features 
 * in vector file formats like GeoJSON.
 * GeoJSONのようなベクトルファイル形式のフィーチャに類似した、
 * ジオメトリとその他の属性プロパティを持つ地物フィーチャのため
 * のベクトルオブジェクト。（ol3 API）
 */

/** ol.geom.Point
 * Point geometry.（ol3 API）
 */

 feature.setStyle(styles);

 var source = new ol.source.Vector({
 /** ol.source.Vector
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
  */

  features: [feature]
 });

 var vectorLayer = new ol.layer.Vector({
 /** ol.layer.Vector
  * Vector data that is rendered client-side.
  * クライアント側で描画されたベクタデータ。（ol3 API）
  */

  source: source
 });

 vectorLayer.setZIndex(zIndex);
 /** setZIndex(zindex) 
  * Set Z-index of the layer, which is used to order layers 
  * before rendering. The default Z-index is 0.
  * 描画の前にレイヤを並べるために使用される、レイヤの Z-index を
  * 設定します。デフォルトの Z-index は、0 です。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */ 

 return vectorLayer;
}

var layer0 = createLayer([40, 40], styles['star'], 0);
var layer1 = createLayer([0, 0], styles['square'], 1);
var layer2 = createLayer([0, 40], styles['triangle'], 0);

var layers = [];

layers.push(layer1);
/** push(elem)
 * Insert the provided element at the end of the 
 * collection.
 * コレクションの最後に供給されたエレメントに挿入します。
 * Name: elem, Type: T, Description: Element
 * （ol3 API）
 */

layers.push(layer2);

var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 18
 })
});

layer0.setMap(map);
/** setMap(map)
 * Sets the layer to be rendered on a map. The map will 
 * not manage this layer in its layers collection, layer 
 * filters in ol.Map#forEachLayerAtPixel will not filter 
 * the layer, and it will be rendered on top. This is 
 * useful for temporary layers. To remove an unmanaged 
 * layer from the map, use #setMap(null).
 * To add the layer to a map and have it managed by 
 * the map, use ol.Map#addLayer instead.
 * 地図上に描画するためにレイヤを設定します。マップは、このレ
 * イヤをレイヤコレクションで管理しません。そして、
 * ol.Map＃forEachLayerAtPixel のレイヤフィルタは、レイヤ
 * にフィルタを適用しません。そして、それは一番上にレンダリン
 * グされます。これは一時的なレイヤのために有用です。マップか
 * ら管理されていないレイヤを除去するには、#setMap（null）を
 * 使用します。
 * マップにレイヤを追加し、それをマップによって管理させるため
 * には、代わりに ol.Map＃addLayer を使用してください。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

function bindInputs(id, layer) {
 var idxInput = $('#idx' + id);

 idxInput.on('input change', function() {
 /** .on()
  * Attach an event handler function for one or more events 
  * to the selected elements.
  * イベントハンドラ関数を選択した要素（エレメント）に1つまたは
  * それ以上のイベントで取り付けます。
  * （jQuery[http://api.jquery.com/on/]）
  */

  layer.setZIndex(parseInt(this.value, 10) || 0);
  /** parseInt(string, radix)
   * str: 文字列, radix: 基数（進法）
   * 文字列の引数をパースし、指定された基数の整数を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/parseInt]）
   */

 });

 idxInput.val(String(layer.getZIndex()));
  /** .val()
   * Get the current value of the first element in the set 
   * of matched elements or set the value of every matched 
   * element.
   * マッチした要素のセットの最初の要素（エレメント）の現在の値を
   * 取得したり、すべての一致した要素の値を設定します。
   * （jQuery[http://api.jquery.com/val/]）
   */

}
bindInputs(1, layer1);
bindInputs(2, layer2);