「2142-ol3ex.js」
// create the WMTS tile grid in the google projection // google 投影法で WMTS タイルグリッドを作成します
var projection = ol.proj.get('EPSG:3857');
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション・オブジェクトを取得。
* （ol3 API）
* projectionLike
* Either a code string which is a combination of authority
* and identifier such as "EPSG:4326", or an existing p
* rojection object, or undefined.
* 「EPSG：4326」のように権限と識別子の組み合わせのコード文字列、
* または、既存の投影オブジェクト、または、未定義のいずれか。
*/
var tileSizePixels = 256;
var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels; /** ol.extent.getWidth(extent) * Return: Width.（ol3 API） */
/** getExtent() * Get the validity extent for this projection. * この投影の有効範囲を取得。（ol3 API） */
var matrixIds = [];
var resolutions = [];
for (var i = 0; i <= 14; i++) {
matrixIds[i] = i;
resolutions[i] = tileSizeMtrs / 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]） */
}
var tileGrid = new ol.tilegrid.WMTS({
/** ol.tilegrid.WMTS
* Set the grid pattern for sources accessing WMTS
* tiled-image servers.
* WMTSタイル画像サーバにアクセスするソースのグリッドパターン
* を設定（ol3 API）
*/
origin: ol.extent.getTopLeft(projection.getExtent()), /** origin: * The tile grid origin, i.e. where the x and y axes meet * ([z, 0, 0]). Tile coordinates increase left to right * and upwards. If not specified, extent or origins must * be provided. * タイルグリッドの原点（origin）、すなわちx軸とy軸が交わる * 場所（[Z、0、0]）。タイル座標は左から右へと上方へ増加しま * す。指定しない場合、範囲または origins が提供されなければ * なりません。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
/** ol.extent.getTopLeft * Return: Bottom left coordinate. */
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. * 解像度。各解像度の配列インデックスは、ズームレベルに一致す * る必要があります。これは minZoom が設定されている場合でも、 * 解像度アレイは、maxZoom+1 の長さを有することを意味します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
matrixIds: matrixIds /** matrixIds * matrix IDs. The length of this array needs to match * the length of the resolutions array. * 行列のID。この配列の長さは、解像度配列の数と一致する必要 * があります。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
});
var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';
var wmtsSource = new ol.source.WMTS({
/** ol.source.WMTS
* Layer source for tile data from WMTS servers.
* WMTSサーバからタイルデータのレイヤソース。（ol3 API）
*/
url: 'http://ts2.scalgo.com/global/wmts?token=' + scalgoToken,
/** url:
* A URL for the service. For the RESTful request
* encoding, this is a URL template. For KVP encoding,
* it is normal URL. A {?-?} template pattern, for
* example subdomain{a-f}.domain.com, may be used i
* nstead of defining each one separately in the urls
* option.
* サービスのURL。 RESTful リクエストエンコーディングに対
* して、これはURLテンプレートです。 KVPエンコーディングに
* 対して、通常のURLです。 {?- ?}テンプレートパターン、たと
* えば subdomain{a-f}.domain.com は、urls オプション
* でそれぞれを個別に定義する替りに使用することができます。
* （ol3 API）
*/
layer: 'hydrosheds:sea-levels', /** layer: * Layer name as advertised in the WMTS capabilities. * Required. * WMTS capabilities でアドバタイズとしてのレイヤ名。必須。 * （ol3 API） */
format: 'image/png', /**format: * Image format. Default is image/jpeg.（ol3 API） */
matrixSet: 'EPSG:3857', /** Matrix * Matrix set. Required.（ol3 API） */
attributions: [
new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '<a href="http://scalgo.com">SCALGO</a>' }),
new ol.Attribution({
html: '<a href="http://www.cgiar-csi.org/data/' +
'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'
}) ], tileGrid: tileGrid,
style: 'default', /** style: * Style name as advertised in the WMTS capabilities. * Required. * WMTS capabilities で advertised（？）としての style * 名。（ol3 API） */
dimensions: {
/** dimensions:
* Additional "dimensions" for tile requests. This is an
* object with properties named like the advertised WMTS
* dimensions.
* タイル要求に対する追加の「dimensions」。これは、advertised
* WMTS dimensions のような名前のプロパティを持つオブジェクト
* です。（ol3 API）
*/
'threshold': 100 } });
var map = new ol.Map({
target: 'map',
view: new ol.View({
projection: projection,
center: [-9871995, 3566245],
zoom: 6
}),
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.OSM()
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
}),
new ol.layer.Tile({
opacity: 0.5,
source: wmtsSource
})
]
});
var updateSourceDimension = function(source, sliderVal) {
source.updateDimensions({'threshold': sliderVal});
/** updateDimensions(dimensions)
* Update the dimensions.
* dimensions を更新します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
};
updateSourceDimension(wmtsSource, 10);
document.getElementById('slider').addEventListener('input',
function() {
/** EventTarget.addEventListener
* addEventListener は、 1 つのイベントターゲットにイベント
* リスナーを1つ登録します。イベントターゲットは、ドキュメント
* 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
* XMLHttpRequest です。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* EventTarget.addEventListener]）
*/
updateSourceDimension(wmtsSource, this.value); });
