「Webサイトでのご利用」に「OpenLayersでの利用例」があります。「OpenLayersでのWMTSサービス利用例 (実装例ソースコード)」は OpenLayers 2.x の例ですが、これを参考に ol3 に応用します。
「OpenLayersでのWMTSサービス利用例（https://gbank.gsj.jp/owscontents/ol_example.html#WMTS）」
実装例ソースコード（https://gbank.gsj.jp/owscontents/ol_example_wmts_html.txt）
「wmts.js（220-ol3ex.js）」は、地図を表示するのに必要な javascript です。
「220-ol3ex.js」
var projection = ol.proj.get('EPSG:3857');
// EPSG:900913 -> EPSG:3857 コード名変更（内容は同じ）
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得
* （ol3 API）
*/
var projectionExtent = projection.getExtent(); /** getExtent() * Get the validity extent for this projection. * この投影の有効範囲を取得。（ol3 API） */
var size = ol.extent.getWidth(projectionExtent) / 256; /** ol.extent.getWidth(extent) * Return: Width.（ol3 API） */ var resolutions = new Array(14); /** 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]） */ var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
// この WMTS の解像度と matrixIds 配列の生成。（ol3 API）
resolutions[z] = size / Math.pow(2, z);
/** Math.pow(base, exponent)
* base を exponent 乗した値、つまり、base^exponent の値を返
* します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/pow]）
*/
matrixIds[z] = z;
}
var attribution = new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
/** * html: 'Tiles © <a href="http://services.arcgisonline.com/arcgis/rest/' + * 'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>' */ html: 'Tiles © 産総研地質調査総合センター 20万分の1日本シームレス地質図 (基本版) CC BY-ND' });
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.OSM(),
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
opacity: 0.7 // 透過度
}),
new ol.layer.Tile({
opacity: 0.7,
extent: projectionExtent, // 範囲
source: new ol.source.WMTS({
/** ol.source.WMTS
* Layer source for tile data from WMTS servers.
* WMTSサーバからタイルデータのレイヤソース。（ol3 API）
*/
attributions: [attribution],
/**
* url: 'http://services.arcgisonline.com/arcgis/rest/' +
* 'services/Demographics/USA_Population_Density/MapServer/WMTS/',
*/
url: 'https://gbank.gsj.jp/seamless/tilemap/basic/glfn/{TileMatrix}/{TileRow}/{TileCol}.png',
/** WMTSサービスのベースURLを設定します。
* 標準形式のURLでない場合、URLのテンプレートを設定します。（地質調査総合センター）
*/
// layer: '0', // The layer identifier. layer: 'glfn', /** ベースURLから取得するレイヤ名を設定します。 * このサンプルでは、レイヤ名を固定的に持つURLテンプレートを * 設定しているため使用されることはありませんが、WMTS クラス * コンストラクタの必須パラメータなので省略できません。 * （地質調査総合センター） */
matrixSet: 'EPSG:3857', // EPSG:900913 -> EPSG:3857 コード名変更（内容は同じ） format: 'image/png', projection: projection,
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(projectionExtent),
/** ol.extent.getTopLeft
* Return: Top left coordinate.
*/
resolutions: resolutions,
matrixIds: matrixIds
/** matrixIds
* matrix IDs. The length of this array needs to match
* the length of
* the resolutions array.
* 行列のID。この配列の長さは、解像度配列の数と一致する必要
* があります。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}),
style: 'default',
requestEncoding: "REST" /** リクエスト形式が REST か KVP を設定します。 * 省略するとデフォルトの KVP が適用されます。 * （地質調査総合センター） */ }) }) ],
target: 'map',
controls: ol.control.defaults({
/** controls
* Controls initially added to the map.
* If not specified, ol.control.defaults() is used.
* 初期設定で、マップに追加されたコントロール。
* 明示されていなければ、ol.control.defaults() が使用されます。
* （ol3 API）
*/
/** ol.control.defaults()
* デフォルトでは、マップに含まコントロールのセット。
* 特に設定しない限り、これは、以下の各コントロールの
* インスタンスを含むコレクションを返します。(ol3 API）
* ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
*/
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
* attributionOptions の値の型は、
* olx.control.AttributionOptions の型を使用。
*/
collapsible: false // 折りたたみ }) }),
& view: new ol.View({
// center: [-11158582, 4813697],
center: [15500000,4210000],
// デフォルトの中心座標を指定しています。（地質調査総合センター）
// zoom: 4
zoom: 6
})
});
0 件のコメント:
コメントを投稿