「reprojection.js（2139-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「2139-ol3ex.js」
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
'+units=m +no_defs');
var proj27700 = ol.proj.get('EPSG:27700');
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得
* （ol3 API）
*/
proj27700.setExtent([0, 0, 700000, 1300000]);
/** setExtent(extent)
* Set the validity extent for this projection.
* この投影の有効範囲を設定します。（ol3 API）
*/
proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' +
'+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
var proj23032 = ol.proj.get('EPSG:23032');
proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);
proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
'-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' +
'+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
var proj5479 = ol.proj.get('EPSG:5479');
proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' +
'+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
'+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
var proj21781 = ol.proj.get('EPSG:21781');
proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' +
'+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
var proj3413 = ol.proj.get('EPSG:3413');
proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' +
'+a=6370997 +b=6370997 +units=m +no_defs');
var proj2163 = ol.proj.get('EPSG:2163');
proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]);
proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' +
'+units=m +no_defs');
var proj54009 = ol.proj.get('ESRI:54009');
proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
var layers = [];
layers['bng'] = 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.XYZ({
/** ol.source.XYZ
* Layer source for tile data with URLs in a set XYZ
* format that are defined in a URL template. By
* default, this follows the widely-used Google grid
* where x 0 and y 0 are in the top left. Grids like
* TMS where x 0 and y 0 are in the bottom left can
* be used by using the {-y} placeholder in the URL
* template, so long as the source does not have a
* custom tile grid. In this case, ol.source.TileImage
* can be used with a tileUrlFunction such as:
*
* tileUrlFunction: function(coordinate) {
* return 'http://mapserver.com/'
* + coordinate[0] + '/'
* + coordinate[1] + '/'
* + coordinate[2] + '.png'; }
*
* URL テンプレートで定義されているセット XYZ 形式の URL
* を持つタイルデータのレイヤソース。デフォルトでは、これは、
* x0 と y0 が左上にある広く使用されている Google のグリッド
* に従います。x0 と y0 が左下にある TMS のようなグリッドは、
* ソースがカスタムタイルグリッドを持っていない限り、URL テ
* ンプレートに {-y} プレースホルダを使用して使用することが
* できます。この場合、ol.source.TileImage は tileUrlFunction
* で次のように使用できます。（ol3 API）
*/
projection: 'EPSG:27700',
url: 'http://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png',
/** url
* URL template. Must include {x}, {y} or {-y}, and
* {z} placeholders. A {?-?} template pattern, for
* example subdomain{a-f}.domain.com, may be used
* instead of defining each one separately in the
* urls option.
* URLテンプレート。 {x}、{y} または {-y}、と {z} プレース
* ホルダを含める必要があります。例えば
* subdomain{a-f}.domain.com の {?-?} テンプレートパターン
* は、urls オプションでそれぞれを個別に定義する代わりに、
* 使用することができます。（ol3 API）
*/
crossOrigin: '',
/** crossOrigin
* The crossOrigin attribute for loaded images. Note
* that you must provide a crossOrigin value if you
* are using the WebGL renderer or if you want to
* access pixel data with the Canvas renderer. See
* https://developer.mozilla.org/en-US/docs/Web/HTML/
* CORS_enabled_image for more detail.
* ロードされたイメージの crossOrigin属性。WebGLのレンダ
* ラーを使用している場合、または、キャンバスレンダラでピ
* クセルデータにアクセスする場合、crossOrigin 値を提供な
* ければならないことに注意してください。詳細は
* https://developer.mozilla.org/en-US/docs/Web/HTML/
* CORS_enabled_image を参照してください。（ol3 API）
*/
maxZoom: 6
})
});
layers['mapquest'] = new ol.layer.Tile({
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 参照）
*/
});
layers['wms4326'] = new ol.layer.Tile({
source: new ol.source.TileWMS({
/** ol.source.TileWMS
* Layer source for tile data from WMS servers.
* WMS サーバからのタイルデータのレイヤソース。
* （ol3 API）
*/
url: 'http://demo.boundlessgeo.com/geoserver/wms',
crossOrigin: '',
params: {
/** params
* WMS request parameters. At least a LAYERS param is
* required. STYLES is '' by default. VERSION is
* 1.3.0 by default. WIDTH, HEIGHT, BBOX and CRS (SRS
* for WMS version < 1.3.0) will be set dynamically.
* Required.
* WMSは、パラメータを要求します。少なくとも LAYERS の
* param が必要です。スタイルは「デフォルト」に従います。
* VERSION は、デフォルトでは 1.3.0 です。WIDTH、HIGHT、
* BBOX と CRS（WMS バージョン 1.3.0 未満用 SRS）は、動的
* に設定されます。 必須。（ol3 API）
*/
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
},
projection: 'EPSG:4326'
})
});
layers['wms21781'] = new ol.layer.Tile({
source: new ol.source.TileWMS({
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '© ' +
'<a href="http://www.geo.admin.ch/internet/geoportal/' +
'en/home.html"≶' +
'Pixelmap 1:1000000 / geo.admin.ch</a≶'
})],
crossOrigin: 'anonymous',
params: {
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
'FORMAT': 'image/jpeg'
},
url: 'http://wms.geo.admin.ch/',
projection: 'EPSG:21781'
})
});
var parser = new ol.format.WMTSCapabilities();
/** ol.format.WMTSCapabilities
* Format for reading WMTS capabilities data
* WMTS capabilities データを読み込むためのフォーマット。
* （ol3 API）
*/
$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) {
/** jQuery.ajax()
* Perform an asynchronous HTTP (Ajax) request.
* 非同期 HTTP（Ajax）リエストを実行します。
* （jQuery[http://api.jquery.com/jquery.ajax/]）
*/
/** deferred.then()
* Add handlers to be called when the Deferred object is
* resolved, rejected, or still in progress.
* deferred オブジェクトが resolved、rejected か、まだ処理
* 途中（progress）のとき呼び出されるハンドラを追加します。
* （juery[http://api.jquery.com/deferred.then/]）
*/
var result = parser.read(response);
/** read()
* Read a WMTS capabilities document.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var options = ol.source.WMTS.optionsFromCapabilities(result,
/** ol.source.WMTS.optionsFromCapabilities
* Return: WMTS source options object.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
{layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
options.crossOrigin = '';
options.projection = 'EPSG:3413';
options.wrapX = false;
layers['wmts3413'] = new ol.layer.Tile({
source: new ol.source.WMTS(options)
});
});
layers['grandcanyon'] = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
crossOrigin: '',
tilePixelRatio: 2,
/** tilePixelRatio
* The pixel ratio used by the tile service. For
* example, if the tile service advertizes 256px by
* 256px tiles but actually sends 512px by 512px
* tiles (for retina/hidpi devices) then
* tilePixelRatio should be set to 2. Default is 1.
* タイルサービスによって使用されるピクセル比。たとえば、タ
* イルサービスが 256px x 256px タイルを通知する場合、実際
* には 512px x 512px タイル（retina / hidpiデバイス用）
* を送信し、それから、タイル Pixel Ratio は 2 に設定しな
* ければなりません。デフォルトは 1 です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
maxZoom: 15,
attributions: [new ol.Attribution({
html: 'Tiles © USGS, rendered with ' +
'<a href="http://www.maptiler.com/"≶MapTiler</a≶'
})]
})
});
var startResolution =
ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) / 256;
/** ol.extent.getWidth(extent)
* Return: Width.（ol3 API）
*/
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得
* （ol3 API）
*/
/** getExtent()
* Get the validity extent for this projection.
* この投影の有効範囲を取得。（ol3 API）
*/
var resolutions = new Array(22);
/** Array(arraylength)
* JavaScript は配列を扱うことができます。配列とは順序を持つ複
* 数のデータの集合であり、JavaScript のグローバルオブジェクト
* である Array は、高位の、（C言語等で云うところの）「リス
* ト」の様な、配列のコンストラクタです。
* arraylength
* Array コンストラクタに渡される唯一の引数（arrayLength）に
* 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合
* その値を要素数とする配列が作成されます。その際に範囲外の値
* は、を指定した場合には、例外: RangeError がスローされます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array]）
*/
for (var i = 0, ii = resolutions.length; i < ii; ++i) {
resolutions[i] = startResolution / Math.pow(2, i);
/** Math.pow(base, exponent)
* base を exponent 乗した値、つまり、base^exponent の
* 値を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/pow]）
*/
}
layers['states'] = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
crossOrigin: '',
params: {'LAYERS': 'topp:states', 'TILED': true},
serverType: 'geoserver',
/** serverType
* The type of the remote WMS server. Currently
* only used when hidpi is true. Default is
* undefined.
* リモート WMS サーバのタイプ。 現在、hidpi が true
* の場合のみ使用。デフォルトでは定義されていません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
tileGrid: new ol.tilegrid.TileGrid({
/** tileGrid
* Tile grid. Base this on the resolutions,
* tilesize and extent supported by the server.
* If this is not defined, a default grid will be
* used: if there is a projection extent, the
* grid will be based on that; if not, a grid
* based on a global extent with origin at
* 0,0 will be used.
* タイルグリッド。サーバーがサポートしていル解像度、タイル
* サイズと範囲に関してこれに基づいています。これが定義され
* ていない場合、デフォルトのグリッドが使用されます：投影範
* 囲が存在する場合、グリッドはそれに基づくことになります。
* そうでない場合は、0, 0 を原点とするグローバルな範囲に基
* づいたグリッドが使用されます。（ol3 API）
*/
/** ol.tilegrid.TileGrid
* Base class for setting the grid pattern for
* sources accessing tiled-image servers.
* タイル画像サーバにアクセスするソースのグリッドパターンを
* 設定するための基本クラス。（ol3 API）
*/
extent: [-13884991, 2870341, -7455066, 6338219],
/** extent
* Extent for the tile grid. No tiles outside this
* extent will be requested by ol.source.Tile
* sources. When no origin or origins are
* configured, the origin will be set to the
* top-left corner of the extent.
* タイルグリッドの範囲。この範囲外ではタイルは
* ol.source.Tile ソースによって要求されません。origin
* がない、または、origins が構成されていない場合には、原点
* は exten の左上隅に設定されます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
resolutions: resolutions,
/** resolutions
* Resolutions. The array index of each resolution
* needs to match the zoom level. This means that
* even if a minZoom is configured, the resolutions
* array will have a length of maxZoom + 1. Required.
* 解像度。各解像度の配列インデックスは、ズームレベルを一
* 致させる必要があります。これは minZoom が設定されている
* 場合でも、解像度配列は maxZoom+1 の長さを有することを意
* 味します。必須。（ol3 API）
*/
tileSize: [512, 256]
}),
projection: 'EPSG:3857'
})
});
var map = new ol.Map({
layers: [
layers['mapquest'],
layers['bng']
],
renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: [0, 0],
zoom: 2
})
});
var baseLayerSelect = document.getElementById('base-layer');
var overlayLayerSelect = document.getElementById('overlay-layer');
var viewProjSelect = document.getElementById('view-projection');
var renderEdgesCheckbox = document.getElementById('render-edges');
var renderEdges = false;
function updateViewProjection() {
var newProj = ol.proj.get(viewProjSelect.value);
var newProjExtent = newProj.getExtent();
var newView = new ol.View({
projection: newProj,
center: ol.extent.getCenter(newProjExtent || [0, 0, 0, 0]),
/** ol.extent.getCenter(extent)
* Get the center coordinate of an extent.
* 範囲の中心座標を取得します。（ol3 API）
*/
zoom: 0,
extent: newProjExtent || undefined
});
map.setView(newView);
/** setView(view)
* Set the view for this map.
* map の view を設定します。（ol3 API）
*/
// Example how to prevent double occurence of
// map by limiting layer extent
// レイヤの範囲を制限することで、マップの二重の発生を防止
// する方法の例。
if (newProj == ol.proj.get('EPSG:3857')) {
layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
} else {
layers['bng'].setExtent(undefined);
}
}
/**
* @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]）
*/
viewProjSelect.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]）
*/
updateViewProjection();
};
updateViewProjection();
var updateRenderEdgesOnLayer = function(layer) {
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(renderEdges);
/** setRenderReprojectionEdges(render)
* Sets whether to render reprojection edges or not
* (usually for debugging).
* 再投影エッジをレンダリングするかしないか（通常はデバッ
* グ用）を設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}
}
};
/**
* @param {Event} e Change event.
*/
baseLayerSelect.onchange = function(e) {
var layer = layers[baseLayerSelect.value];
if (layer) {
layer.setOpacity(1);
/** setOpacity(opacity)
* Set the opacity of the layer, allowed values range
* from 0 to 1.
* レイヤの不透明度を設定します。許可される値は0から1まで
* の範囲。（ol3 API）
*/
updateRenderEdgesOnLayer(layer);
map.getLayers().setAt(0, layer);
/** getLayers()
* Get the collection of layers associated with this
* map.
* このマップと関連するレイヤのコレクションを取得します。
* （ol3 API）
*/
/** setAt(index, elem)
* Set the element at the provided index
* 提供されたインデックス位置にあるエレメントを設定します
* （ol3 API）
*/
}
};
/**
* @param {Event} e Change event.
*/
overlayLayerSelect.onchange = function(e) {
var layer = layers[overlayLayerSelect.value];
if (layer) {
layer.setOpacity(0.7);
updateRenderEdgesOnLayer(layer);
map.getLayers().setAt(1, layer);
}
};
/**
* @param {Event} e Change event.
*/
renderEdgesCheckbox.onchange = function(e) {
renderEdges = renderEdgesCheckbox.checked;
map.getLayers().forEach(function(layer) {
/** forEach(f, opt_this)
* Iterate over each element, calling the provided
* callback.
* 提供されるコールバックを呼び出して、各エレメントを反復
* 処理します。（ol3 API）
*/
updateRenderEdgesOnLayer(layer);
});
};
