2015年2月9日月曜日

2 - ol3.1ex 57b - Drag-and-Drop image vector example 2

「drag-and-drop-image-vector.js(257-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。
GeoJSON ファイルをマップ上にドラッグアンドドロップすると、データが表示されます。そのとき、倍率が変わってしまいました。
「257-ol3ex.js」
var defaultStyle = {
 'Point': [new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * (ol3 API)
  */
  image: new ol.style.Circle({
  /** ol.style.Circle
   * Set circle style for vector features.
   * ベクタフィーチャの円のスタイルを設定。(ol3 API)
   */
   fill: new ol.style.Fill({
   /** ol.style.Fill 
    * Set fill style for vector features.
    * ベクタフィーチャの塗りつぶしスタイルを設定。(ol3 API)
    */
    color: 'rgba(255,255,0,0.5)'
   }),
   radius: 5,
   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: '#ff0',
    width: 1
   })
  })
 })],
 'LineString': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: '#f00',
   width: 3
  })
 })],
 'Polygon': [new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'rgba(0,255,255,0.5)'
  }),
  stroke: new ol.style.Stroke({
   color: '#0ff',
   width: 1
  })
 })],
 'MultiPoint': [new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: 'rgba(255,0,255,0.5)'
   }),
   radius: 5,
   stroke: new ol.style.Stroke({
    color: '#f0f',
    width: 1
   })
  })
 })],
 'MultiLineString': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: '#0f0',
   width: 3
  })
 })],
 'MultiPolygon': [new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'rgba(0,0,255,0.5)'
  }),
  stroke: new ol.style.Stroke({
   color: '#00f',
   width: 1
  })
 })]
};
var styleFunction = function(feature, resolution) {
 var featureStyleFunction = feature.getStyleFunction();
 /** getStyleFunction()
  * Get the style function
  * Returns: Layer style function.(ol3 API)
  */
 if (featureStyleFunction) {
  return featureStyleFunction.call(feature, resolution);
  /** Function.prototype.call()
   * The call() method calls a function with a given 
   * this value and arguments provided individually.
   * call メソッドは、与えられた this 値とここに与えられ
   * た引数とともに、関数を呼び出します。
   * (MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Function/call])
   */
 } else {
  return defaultStyle[feature.getGeometry().getType()];
  /** 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)
   */
  /** getType()
   * Get the type of this geometry. 
   * ジオメトリの型を取得。(ol3 API)
   */
 }
};
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
/** ol.interaction.DragAndDrop 
 * Handles input of vector data by drag and drop.
 * ドラッグアンドドロップによってベクタデータの入力を取り扱いま
 * す。(ol3 API)
 */
 formatConstructors: [
  ol.format.GPX,
  /** ol.format.GPX 
   * Feature format for reading and writing data 
   * in the GPX format.
   * GPX フォーマットでデータを読み書きするためのフィー
   * チャのフォーマット。(ol3 API)
   */
  ol.format.GeoJSON,
  /** ol.format.GeoJSON 
   * Feature format for reading and writing data 
   * in the GeoJSON format.
   * GeoJSON フォーマットのデータを読み書きするための
   * フィーチャフォーマット。(ol3 API)
   */
  ol.format.IGC,
  /** ol.format.IGC 
   * Feature format for *.igc flight recording 
   * files.
   * *.igc フライト記録ファイル用のフィーチャフォーマット。
   * (ol3 API)
   */
  ol.format.KML,
  /** ol.format.KML 
   * Feature format for reading and writing data 
   * in the KML format.
   * KML フォーマットでデータを読み書きするためのフィー
   * チャのフォーマット。(ol3 API)
   */
  ol.format.TopoJSON
  /** ol.format.TopoJSON 
   * Feature format for reading and writing data 
   * in the TopoJSON format.
   * TopoJSON フォーマットでデータを読み書きするためのフィー
   * チャのフォーマット。(ol3 API)
   */
 ]
});
var map = new ol.Map({
 interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
 /** ol.interaction.defaults
  * Set of interactions included in maps by default. 
  * Specific interactions can be excluded by setting 
  * the appropriate option to false in the constructor 
  * options, but the order of the interactions is fixed. 
  * If you want to specify a different order for 
  * interactions, you will need to create your own 
  * ol.interaction.Interaction instances and insert 
  * them into a ol.Collection in the order you want 
  * before creating your ol.Map instance.
  * デフォルトでマップに含まれるインターラクションのセット。
  * 具体的なインターラクションは、コンストラクタのオプションで適切
  * なオプションをfalseに設定することで除外することができますが、
  * インターラクションの順番は固定されています。インターラクション
  * に対して別の順番を指定したい場合は、独自の 
  * ol.interaction.Interaction インスタンスを作成し、ol.Map イ
  * ンスタンスを作成する前に、望む順番で ol.Collection にそれ
  * らを挿入する必要があります。(ol3 API)
  *  (訳注:インターラクションの順番は、API を参照してください。)
  */
  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.BingMaps({
   /** ol.source.BingMaps
    * Layer source for Bing Maps tile data.
    * Bing Maps タイルデータのレイヤソース。(ol3 API)
    */
    imagerySet: 'Aerial',
    key: 'Ak-dzM4w...(省略)'
   })
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});
dragAndDropInteraction.on('addfeatures', function(event) {
/** on()
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。
 * Returns: Unique key for the listener.(ol3 API)
 */
 var vectorSource = new ol.source.Vector({
 /** ol.source.Vector 
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを提供します。(ol3 API)
  */
  features: event.features,
  projection: event.projection
 });
 map.getLayers().push(new ol.layer.Image({
 /** getLayers()
  * Get the collection of layers associated with 
  * this map.
  * このマップと関連するレイヤのコレクションを取得します。
  * (ol3 API)
  */
 /** push(elem)
  * Insert the provided element at the end of the 
  * collection.
  * コレクションの最後に供給されたエレメントに挿入します。
  * Name: elem, Type: T, Description: Element
  * (ol3 API)
  */
 /** ol.layer.Image
  * Server-rendered images that are available for arbitrary 
  * extents and resolutions. 
  * 任意の範囲と解像度で利用可能な server-rendered イメージ。
  * (ol3 API)
  */
  source: new ol.source.ImageVector({
  /** ol.source.ImageVector 
   * An image source whose images are canvas elements 
   * into which vector features read from a vector source 
   * (ol.source.Vector) are drawn. An ol.source.ImageVector 
   * object is to be used as the source of an image layer 
   * (ol.layer.Image). Image layers are rotated, scaled, 
   * and translated, as opposed to being re-rendered, 
   * during animations and interactions. So, like any 
   * other image layer, an image layer configured with 
   * an ol.source.ImageVector will exhibit this behaviour. 
   * This is in contrast to a vector layer, where vector 
   * features are re-drawn during animations and interactions.
   * ベクタソース(ol.source.Vector)から読み込まれたベクタ
   * フィーチャがキャンバスエレメントに描画されたイメージのイ
   * メージソース。ol.source.ImageVectorオブジェクトは、
   * イメージレイヤのソース(ol.layer.Image)として使用さ
   * れます。イメージレイヤは、アニメーションとインターラクショ
   * ンの間に、再レンダリングされるのではなく、回転、拡大縮小、
   * および変換されています。それで、他のイメージレイヤと同様に、
   * ol.source.ImageVector で設定されたイメージレイヤは、
   * この動作を表します。これは、ベクタフィーチャがアニメーショ
   * ンとインターラクションの間に再描画されるベクタレイヤとは
   * 対照的です。(ol3 API)
   */
   source: vectorSource,
   style: styleFunction
  })
 }));
 var view = map.getView();
 /** getView()
  * Get the view associated with this map. A view 
  * manages properties such as center and resolution.
  * このマップと関連するビューを取得します。ビューは、
  * 中心や解像度のような属性を管理します。
  * Return: The view that controls this map.(ol3 API)
  */
 view.fitExtent(
 /** fitExtent()
  * Fit the map view to the passed `extent` and 
  * `size`. `size` is the size in pixels of the 
  * box to fit the extent into. In most cases you 
  * will want to use the map size, that is 
  * `map.getSize()`.
  * マップビューを渡された`extent`と` size`に合わせます。
  *  `size`は、範囲に合わせるためボックスのピクセル単位の
  * サイズです。ほとんどの場合は、マップのサイズを使用します
  * が、それは`map.getSizeです()`。
  * (v3.1.1/ol/ol/view.js)
  */
  vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
  /** getExtent()
   * Return: The layer extent.(ol3 API)
   */
  /** @type 
   * 値のタイプ(型)の説明 - 式などで表示
   * (@use JSDoc[http://usejsdoc.org/]より)
   */
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。(ol3 API)
  */
});

var displayFeatureInfo = function(pixel) {
 var features = [];
 map.forEachFeatureAtPixel(pixel, function(feature, layer) {
 /** 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)
  */
  features.push(feature);
 });
 if (features.length > 0) {
  var info = [];
  var i, ii;
  for (i = 0, ii = features.length; i < ii; ++i) {
   info.push(features[i].get('name'));
  /** Array.push
   * 与えられた要素を追加することによって配列を変異させ、
   * その配列の新しい長さを返します。
   * (MDN [https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Array/push])
   */
  /** get(key)
   * Gets a value.
   * (ol3 API[説明は Stable Only のチェックを外すと表示])
   */
  }
  document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
  /** element.innerHTML
   * innerHTML は、与えられた要素に含まれる全てのマークアップ
   * と内容を設定または取得します。
   * (MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/element.innerHTML])
   */
  /** Array.join
   * 配列の全ての要素を繋いで文字列にします。
   * (MDN [https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Array/join])
   */
 } else {
  document.getElementById('info').innerHTML = '&nbsp;';
 }
};
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
 * Return: Viewport (ol3 API)
 */
/** jQuery on イベント */
 var pixel = map.getEventPixel(evt.originalEvent);
 /** getEventPixel
  * Returns the map pixel position for a browser event.
  * ブラウザイベントに対して、マップのピクセル位置を返します。
  * (ol3 API)
  */
 displayFeatureInfo(pixel);
});
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
  displayFeatureInfo(evt.pixel);
});

0 件のコメント: