「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(', ') || ' ';
/** 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 = ' ';
}
};
$(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);
});
