Debianでka-MapのメモプラスOpenLayers とGeoExt: 2 - ol3.8ex 126b

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

「2126-ol3ex.js」

function growRegion(inputs, data) {
 var image = inputs[0];
 var seed = data.pixel;
 var delta = parseInt(data.delta);

 /** parseInt(string, radix)
  * str: 文字列, radix: 基数（進法）
  * 文字列の引数をパースし、指定された基数の整数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/parseInt]）
  */
 if (!seed) {
  return image;
 }

 seed = seed.map(Math.round);
 /** Math.round()
  * 引数として与えた数を四捨五入して、最も近似の整数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/round]）
  */

 var width = image.width;
 var height = image.height;
 var inputData = image.data;
 var outputData = new Uint8ClampedArray(inputData);

 /** Uint8ClampedArray
  * The Uint8ClampedArray typed array represents an 
  * array of 8-bit unsigned integers clamped to 0-255. 
  * The contents are initialized to 0. Once established, 
  * you can reference elements in the array using the 
  * object's methods, or using standard array index 
  * syntax (that is, using bracket notation).
  * Uint8ClampedArray に分類された配列は、0〜255に固定された
  * 8 ビット符号なし整数の配列を表します。コンテンツは、0に初期
  * 化されます。一度確立されると、オブジェクトメソッドを使用し
  * て、または、標準配列インデックス構文を使用（つまり、ブラケッ
  * ト表記を使用）して、配列内の要素を参照することができます。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Uint8ClampedArray]）
  */

 var seedIdx = (seed[1] * width + seed[0]) * 4;
 var seedR = inputData[seedIdx];
 var seedG = inputData[seedIdx + 1];
 var seedB = inputData[seedIdx + 2];
 var edge = [seed];
 while (edge.length) {
  var newedge = [];
  for (var i = 0, ii = edge.length; i < ii; i++) {

 /** As noted in the Raster source constructor, this 
  * function is provided using the `lib` option. Other 
  * functions will NOT be visible unless provided using 
  * the `lib` option.
  * ラスターソースのコンストラクタで述べたように、この関数は 
  * `lib` オプションを使用して提供されます。 他の関数は、`lib` 
  * オプションを使用して提供しない限り、表示されません。
  */

   var next = nextEdges(edge[i]);
   for (var j = 0, jj = next.length; j < jj; j++) {
    var s = next[j][0], t = next[j][1];

    if (s >= 0 && s < width && t >= 0 && t < height) {
     var ci = (t * width + s) * 4;
     var cr = inputData[ci];
     var cg = inputData[ci + 1];
     var cb = inputData[ci + 2];
     var ca = inputData[ci + 3];
     // if alpha is zero, carry on
     if (ca === 0) {
      continue;
     }

     if (Math.abs(seedR - cr) < delta && Math.abs(seedG - cg)
      < delta && Math.abs(seedB - cb) < delta) {
  /** Math.abs()
   * 引数として与えた数の絶対値を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/abs]）
   */

       outputData[ci] = 255;
       outputData[ci + 1] = 0;
       outputData[ci + 2] = 0;
       outputData[ci + 3] = 255;
       newedge.push([s, t]);
     }
     // mark as visited
     inputData[ci + 3] = 0;
    }
   }
  }
  edge = newedge;
 }
 return new ImageData(outputData, width, height);
}

function next4Edges(edge) {
 var x = edge[0], y = edge[1];
 return [
  [x + 1, y],
  [x - 1, y],
  [x, y + 1],
  [x, y - 1]
 ];
}

var key = 'Ak-dzM...（省略）';

var imagery = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング（事前描画）を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。（ol3 API）
 */

 source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
 /** ol.source.BingMaps
  * Layer source for Bing Maps tile data.
  * Bing Maps タイルデータのレイヤソース。（ol3 API）
  */

});

var raster = new ol.source.Raster({
/** ol.source.Raster
 * A source that transforms data from any number of input 
 * sources using an array of ol.raster.Operation functions 
 * to transform input pixel values into output pixel values.
 * 入力画素値を出力画素値に変換するために ol.raster.Operation
 * 関数の配列を使用して、任意の数の入力ソースからデータを変換す
 * るソース。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 sources: [imagery.getSource()],
 /** getSource()
  * Return the associated source of the image layer.
  * 画像レイヤの関連するソースを返します。（ol3 API）
  */

 operationType: 'image',

 operation: growRegion,
 /** operation
  * Raster operation. The operation will be called with data 
  * from input sources and the output will be assigned to the
  * raster source.
  * ラスタオペレーション。operation は入力ソースからデータととも
  * に呼び出され、出力データはラスタ·ソースに割り当てられます。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 // Functions in the `lib` object will be available to the 
 // operation run in the web worker.

 lib: {
 /** lib
  * Functions that will be made available to operations 
  * run in a worker.
  * ワーカで実行される operation が利用可能となる関数。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  nextEdges: next4Edges
 }
});

var rasterImage = new ol.layer.Image({
/** ol.layer.Image
 * Server-rendered images that are available for arbitrary 
 * extents and resolutions. 
 * 任意の範囲と解像度で利用可能な server-rendered イメージ。
 * （ol3 API）
 */

 opacity: 0.7,
 source: raster
});

var map = new ol.Map({
 layers: [imagery, rasterImage],
 target: 'map',
 view: new ol.View({

  center: ol.proj.fromLonLat([-119.07, 47.65]),
 /** ol.proj.fromLonLat(coordinate, opt_projection)
  * Transforms a coordinate from longitude/latitude to a 
  * different projection.
  * 緯度/経度座標から異なる投影に変換します。（ol3 API）
  */

  zoom: 11
 })
});

var coordinate;

map.on('click', function(event) {
/**　on(type, listener, opt_this)
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

 coordinate = event.coordinate;
 raster.changed();

 /** changed()
  * Increases the revision counter and dispatches a 'change' 
  * event.
  * リビジョンカウンタを増加し、「change」イベントを送出します。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */
});

raster.on('beforeoperations', function(event) {
/**　on(type, listener, opt_this)
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

 // the event.data object will be passed to operations
 var data = event.data;
 data.delta = thresholdControl.value;
 if (coordinate) {

  data.pixel = map.getPixelFromCoordinate(coordinate);
 /** getPixelFromCoordinate(coordinate)
  * Get the pixel for a coordinate. This takes a coordinate 
  * in the map view projection and returns the 
  * corresponding pixel.
  * 座標のピクセルを取得します。これは、マップビューの投影で座標
  * を取得し、対応するピクセルを返します。（ol3 API）
  */

 }
});

var thresholdControl = document.getElementById('threshold');

function updateControlValue() {
 document.getElementById('threshold-value').innerText = thresholdControl.value;
}

updateControlValue();

thresholdControl.addEventListener('input', function() {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1 つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 updateControlValue();

 raster.changed();
  /** changed()
   * Increases the revision counter and dispatches a 0
   * 'change' event.
   * リビジョンカウンタを増加し、「change」イベントを送出します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */
});

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2015年8月25日火曜日

2 - ol3.8ex 126b - Region Growing 2

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ

自己紹介

2015年8月25日火曜日

2 - ol3.8ex 126b - Region Growing 2

0 件のコメント:

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ