「2140-ol3ex.js」
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 参照）
*/
})
],
renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: [0, 0],
zoom: 1
})
});
var queryInput = document.getElementById('epsg-query');
var searchButton = document.getElementById('epsg-search');
var resultSpan = document.getElementById('epsg-result');
var renderEdgesCheckbox = document.getElementById('render-edges');
function setProjection(code, name, proj4def, bbox) {
if (code === null || name === null || proj4def === null || bbox === null) {
resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
map.setView(new ol.View({
/** setView(view)
* Set the view for this map.
* map の view を設定します。（ol3 API）
*/
projection: 'EPSG:3857', center: [0, 0], zoom: 1 })); return; }
resultSpan.innerHTML = '(' + code + ') ' + name;
var newProjCode = 'EPSG:' + code;
proj4.defs(newProjCode, proj4def);
var newProj = ol.proj.get(newProjCode);
var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);
/** ol.proj.getTransform(source, destination)
* Given the projection-like objects, searches for a
* transformation function to convert a coordinates
* array from the source projection to the destination
* projection.
* projection 系オブジェクトを与えられると、変換関数のための
* 検索は、ソース投影から宛先の投影にの座標の配列に変換します。
* （ol3 API）
*/
// very approximate calculation of projection extent // 投影範囲のより正確な近似計算
var extent = ol.extent.applyTransform( [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat); /** ol.extent.applyTransform(extent, transformFn, * opt_extent) * Apply a transform function to the extent. * 範囲の transform 関数を適用します。（ol3 API） */
newProj.setExtent(extent); /** setExtent(extent) * Set the validity extent for this projection. * この投影の有効範囲を設定します。（ol3 API） */
var newView = new ol.View({
projection: newProj
});
map.setView(newView);
var size = map.getSize(); /** getSize() * Get the size of this map. * Returns: The size in pixels of the map in the DOM. * マップのサイズを取得。（ol3 API） */
if (size) {
newView.fit(extent, size); /** fit(geometry, size, opt_options) * Fit the given geometry or extent based on the given map * size and border. The size is pixel dimensions of the box * to fit the extent into. In most cases you will want to * use the map size, that is map.getSize(). Takes care of * the map angle. * 指定されたマップのサイズと境界線に基づいて、指定されたジオメ * トリまたは範囲を合わせます。サイズは範囲に合わせてピクセル寸 * 法のボックスです。ほとんどの場合、マップのサイズを使用します * が、それは map.getSize（）。マップアングルに注意してくださ * い。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
} }
function search(query) {
resultSpan.innerHTML = 'Searching...';
$.ajax({
/** jQuery.ajax()
* Perform an asynchronous HTTP (Ajax) request.
* 非同期 HTTP（Ajax）リエストを実行します。
* （jQuery[http://api.jquery.com/jquery.ajax/]）
*/
url: 'http://epsg.io/?format=json&q=' + query,
dataType: 'jsonp',
success: function(response) {
if (response) {
var results = response['results'];
if (results && results.length > 0) {
for (var i = 0, ii = results.length; i < ii; i++) {
var result = results[i];
if (result) {
var code = result['code'], name = result['name'],
proj4def = result['proj4'], bbox = result['bbox'];
if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
bbox && bbox.length == 4) {
setProjection(code, name, proj4def, bbox);
return;
}
}
}
}
}
setProjection(null, null, null, null);
}
});
}
/**
* @param {Event} e Change event.
*/
/** 「@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]）
*/
searchButton.onclick = function(e) {
search(queryInput.value);
e.preventDefault(); /** Event.preventDefault() * Cancels the event if it is cancelable, without * stopping further propagation of the event. * イベントのさらなる伝播を停止させることなく、解約された場合 * に、イベントをキャンセルします。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/Event/preventDefault]） */
};
/**
* @param {Event} e Change event.
*/
renderEdgesCheckbox.onchange = function(e) {
/** GlobalEventHandlers.onchange()
* The onchange property sets and returns the event handler
* for the change event.
* onchange プロパティは、change イベントに対してイベントハ
* ンドラを設定、および、返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/GlobalEventHandlers/onchange]）
*/
map.getLayers().forEach(function(layer) {
/** getLayers()
* Get the collection of layers associated with this
* map.
* このマップと関連するレイヤのコレクションを取得します。
* （ol3 API）
*/
if (layer instanceof ol.layer.Tile) {
/** instanceof
* instanceof 演算子は、オブジェクトが自身のプロトタイプに
* コンストラクタの prototype プロパティを持っているかを確
* 認します。
* （MDN[https://developer.mozilla.org/ja/docs/
* JavaScript/Reference/Operators/instanceof]）
*/
var source = layer.getSource();
/** getSource()
* Return the associated tilesource of the the layer.
* タイルレイヤの関連するタイルソースを返します。（ol3 API）
*/
if (source instanceof ol.source.TileImage) {
/** ol.source.TileImage
* Base class for sources providing images divided into
* a tile grid.
* タイルグリッドに分割された画像を提供するソースの基本クラ
* ス。（ol3 API）
*/
source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
/** setRenderReprojectionEdges(render)
* Sets whether to render reprojection edges or not
* (usually for debugging).
* 再投影エッジをレンダリングするかしないか（通常はデバッグ
* 用）を設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} } }); };
