「2136-ol3ex.js」
var key = 'pk.eyJ...（省略）';
// For how many zoom levels do we want to use the same // vector tiles? 1 means "use tiles from all zoom levels". // 2 means "use the same tiles for 2 subsequent zoom // levels". // どのくらいのズームレベル数で同じベクトルのタイルを使用したい // ですか？ 1 は「すべてのズームレベルからタイル使用する」こと // を意味します。 2 は「2 以降のズームレベルに同じタイルを使用 // する」を意味します。
var reuseZoomLevels = 2;
// Offset of loaded tiles from web mercator zoom level 0. // 0 means "At map zoom level 0, use tiles from zoom // level 0". 1 means "At map zoom level 0, use tiles // from zoom level 1". // ウェブメルカトルズームレベル 0 からロードされたタイルのオフ // セット。0 は「マップのズームレベル 0 では、ズームレベル 0 か // らのタイルを使用する」ことを意味します。1 は「マップのズーム // レベル 0 では、ズームレベル1 からタイルを使用する」ことを意 // 味します。
var zoomOffset = 1;
// Calculation of tile urls var resolutions = [];
for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels)); /** Array.push * 与えられた要素を追加することによって配列を変異させ、 * その配列の新しい長さを返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Array/push]） */
/** Math.pow(base, exponent) * base を exponent 乗した値、つまり、base^exponent の値を返 * します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/pow]） */
}
function tileUrlFunction(tileCoord) {
return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + key)
.replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
/** replace [メソッド]
* 指定された URL に現在の文書を置き換えます。 assign() メ
* ソッドとの違いは、replace() を用いた後、現在のページは、
* セッションの履歴には保持されないことです。つまり、ユーザ
* は、置き換え前のページに戻るために、戻るボタンを使うこと
* ができません。
* （MDN[https://developer.mozilla.org/ja/docs/Web/API/
* Window/location]）
*/
.replace('{x}', String(tileCoord[1]))
.replace('{y}', String(-tileCoord[2] - 1))
.replace('{a-d}', 'abcd'.substr(
((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
}
var map = new ol.Map({
layers: [
new ol.layer.VectorTile({
/** ol.layer.VectorTile
* Layer for vector tile data that is rendered client-side.
* クライアント側でレンダリングされるベクタタイルデータのレイ
* ヤ。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
preload: Infinity,
/** preload (Observable Properties)
* The level to preload tiles up to.
* タイルをプリロードするための最大レベル。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
source: new ol.source.VectorTile({
/** ol.source.VectorTile
* Class for layer sources providing vector data
* divided into a tile grid, to be used with
* ol.layer.VectorTile. Although this source receives
* tiles with vector features from the server, it is
* not meant for feature editing. Features are optimized
* for rendering, their geometries are clipped at or
* near tile boundaries and simplified for a view
* resolution. See ol.source.Vector for vector sources
* that are suitable for feature editing.
* ol.layer.VectorTile を使用するために、タイルのグリッドに
* 分割されたベクタデータを提供するレイヤソースのクラス。この
* ソースは、サーバからのベクタフィーチャと共にタイルを受信し
* ますが、それはフィーチャ編集のためのものではありません。
* フィーチャは、レンダリングのために最適化され、そのジオメト
* リはタイルに、または、その境界付近にクリップされ、ビューの
* 解像度のために簡略化されます。フィーチャの編集に適したベク
* タソースための ol.source.Vector を参照してください。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>'
})],
format: new ol.format.MVT(),
/** ol.format.MVT
* Feature format for reading data in the Mapbox MVT
* format.
* Mapbox MVT フォーマットでデータを描画するためのフィーチャ
* フォーマット。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
tileGrid: new ol.tilegrid.TileGrid({
/** ol.tilegrid.TileGrid
* Base class for setting the grid pattern for
* sources accessing tiled-image servers.
* タイル画像サーバにアクセスするソースのグリッドパターンを
* 設定するための基本クラス。（ol3 API）
*/
extent: ol.proj.get('EPSG:3857').getExtent(),
/** 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 ソースによって要求されません。何の原点
* または原点が構成されていない場合には、原点は範囲の左上
* 隅に設定されます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
resolutions: resolutions
}),
tilePixelRatio: 16,
/** 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 のチェックを外すと表示]）
*/
tileUrlFunction: tileUrlFunction
/** tileUrlFunction
* Optional function to get tile URL given a tile
* coordinate and the projection.
* タイル座標と投影法を指定されたタイル URL を取得するための
* オプション関数。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}),
style: createMapboxStreetsV6Style()
/** style
* Layer style. See ol.style for default style which
* will be used if this is not defined.
* レイヤスタイル。これが定義されていない場合に使用されるデ
* フォルトのスタイルのための ol.style を参照してください。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
minZoom: 1,
zoom: 2
})
});
// ol.style.Fill, ol.style.Icon, ol.style.Stroke, // ol.style.Style and ol.style.Text are required for // createMapboxStreetsV6Style()
0 件のコメント:
コメントを投稿