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); });
0 件のコメント:
コメントを投稿