Debianでka-MapのメモプラスOpenLayers とGeoExt: 2 - ol3ex 39b

「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;
}

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

ブログアーカイブ

自己紹介

2014年11月30日日曜日

2 - ol3ex 39b - Vector labels example 2

0 件のコメント:

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

ブログ アーカイブ

自己紹介

2014年11月30日日曜日

2 - ol3ex 39b - Vector labels example 2

0 件のコメント:

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

ブログアーカイブ