「2166-ol4ex.js」
var replacer = function(key, value) {
if (value.geometry) {
var type;
var rawType = value.type;
var geometry = value.geometry;
if (rawType === 1) {
type = geometry.length === 1 ? 'Point' : 'MultiPoint';
/** 条件演算子 condition ? expr1 : expr2
* condition: true か false かを評価する条件文です。
* expr1, expr2: 各々の値の場合に実行する式です。
* condition が true の場合、演算子は expr1 の値を選択しま
* す。そうでない場合は expr2 の値を選択します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Operators/
* Conditional_Operators]）
*/
} else if (rawType === 2) {
type = geometry.length === 1 ? 'LineString' : 'MultiLineString';
} else if (rawType === 3) {
type = geometry.length === 1 ? 'Polygon' : 'MultiPolygon';
}
return {
'type': 'Feature',
'geometry': {
'type': type,
'coordinates': geometry.length == 1 ? geometry : [geometry]
},
'properties': value.tags
};
} else {
return value;
}
};
var tilePixels = new ol.proj.Projection({
/** ol.proj.Projection
* Projection definition class. One of these is created
* for each projection supported in the application and
* stored in the ol.proj namespace. You can use these in
* applications, but this is not required, as API params
* and options use ol.proj.ProjectionLike which means the
* simple string code will suffice.
* 投影定義クラス。これらの一つは、アプリケーションでサポートさ
* れ、ol.proj名前空間に格納されている各投影に対して作成されま
* す。アプリケーションでこれらを使用することができますが、API
* のパラメータとオプションは、単純な文字列コードで十分であるこ
* とを意味する ol.proj.ProjectionLike を使用するので、これ
* は必要ありません。（ol4 API）
*/
code: 'TILE_PIXELS', /** code: * The SRS identifier code, e.g. EPSG:4326. Required. * SRS 識別子。例えば EPSG:4326。必須。（ol4 API） */
units: 'tile-pixels' /** units: * Units. Required unless a proj4 projection is defined * for code. * 単位。コードに proj4 projection が定義されていなければ必須。 * （ol4 API） */
});
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.
* プリレンダリング（事前描画）を提供するレイヤソースのため
* の、特定の解像度でのズームレベルによって編成されているグ
* リッドのタイルイメージ。（ol4 API）
*/
source: new ol.source.OSM()
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol4 API）
*/
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var url = 'data/geojson/countries.geojson';
fetch(url).then(function(response) {
/** GlobalFetch.fetch()(This is an experimental technology)
* The fetch() method of the GlobalFetch interface starts
* the process of fetching a resource. This returns a
* promise that resolves to the Response object
* representing the response to your request.
* GlobalFetch インタフェースの fetch() メソッドは、リソー
* スを取得する処理を開始します。これは要求に対する応答を表す
* Response オブジェクトに解決のプロミス（promise）を返しま
* す。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* FGlobalFetch/fetch]）
*/
return response.json(); /** Response(This is an experimental technology) * The Response interface of the Fetch API represents * the response to a request. * Fetch API の Response インタフェースは、要求に対する応答 * を表します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/Response]） */
}).then(function(json) {
var tileIndex = geojsonvt(json, {
// build an initial index of tiles（geojson-vt）
extent: 4096, // tile extent (both width and height)
debug: 1 // logging level (0 to disable, 1 or 2)
});
var vectorSource = 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 を参照してください。
* （ol4 API）
*/
format: new ol.format.GeoJSON(), /** format: * Feature format for tiles. Used and required by * the default tileLoadFunction. * タイルのためのフィーチャフォーマット。デフォルトの * tileLoadFunction によって使用され、必要とされます。 * （ol4 API） */
/** ol.format.GeoJSON * Feature format for reading and writing data in the * GeoJSON format. * GeoJSON フォーマットのデータを読み書きするためのフィー * チャフォーマット。（ol4 API） */
tileGrid: ol.tilegrid.createXYZ(), /** tileGrid * Tile grid.（ol4 API） */
/** ol.tilegrid.createXYZ(opt_options) * Creates a tile grid with a standard XYZ tiling * scheme. * 標準のXYZタイルスキーマを持つタイルグリッドを作成します。 * （ol4 API） */
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. * タイルサービスで使用されるピクセル比率。 例えば、タイル * サービスは 256×256 ピクセルのタイルを提供しますがが、実 * 際には、（retina/hipdi デバイスの場合）512 ×512 ピクセ * ルのタイルを送信する場合、tilePixelRatio は2に設定する必 * 要があります。デフォルトは1です。（ol4 API） */
tileLoadFunction: function(tile) {
/** tileLoadFunction:
* Optional function to load a tile given a URL.
* URL を指定されたタイルをロードするためのオプション関数
* （function）。
* Could look like this:
*
* function(tile, url) {
* tile.setLoader(function() {
* var data = // ... fetch data
* var format = tile.getFormat();
* tile.setFeatures(format.readFeatures(data));
* tile.setProjection(format.readProjection(data));
* };
* });
* （ol4 API）
*/
var format = tile.getFormat();
/** getFormat()
* Get the format associated with this source.
* このソースに関連付けられたフォーマットを取得します。
* （ol4 API）
*/
var tileCoord = tile.getTileCoord();
/** getTileCoord()
* Get the tile coordinate for this tile.
* （ol4 API）
*/
var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1); // request a particular tile（geojson-vt）
var features = format.readFeatures(
/** readFeatures(source, opt_options)
* Read all features from a GeoJSON source. Works for
* all GeoJSON types. If the source includes only
* geometries, features will be created with those
* geometries.
* GeoJSON ソースからすべてのフィーチャを読み込みます。
* すべて のGeoJSON タイプに対応しています。 ソースにジオ
* メトリのみが含まれている場合、そのジオメトリでフィーチャ
* が作成されます。（ol4 API）
*/
JSON.stringify({
/** JSON.stringify(value[, replacer[, space]])
* JSON.stringify() メソッドは JavaScript の値を JSON
* 文字列に変換します。置き換え関数を指定して値を置き
* 換えたり、置き換え配列を指定して指定されたプロパティ
* のみを含むようにしたりできます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/JSON/stringify]）
*/
type: 'FeatureCollection',
features: data ? data.features : []
}, replacer));
tile.setLoader(function() {
/** setLoader(loader)
* Set the feature loader for reading this tile's
* features.
* このタイルのフィーチャを読み取るためのフィーチャローダを
* 設定します。（ol4 API）
*/
tile.setFeatures(features);
/** setFeatures(features)
* （ol4 API）
*/
tile.setProjection(tilePixels);
/** setProjection(projection)
* Set the projection of the features that were added
* with #setFeatures.
* #setFeaturesで追加されたフィーチャの投影を設定します。
* （ol4 API）
*/
}); },
url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
});
var vectorLayer = new ol.layer.VectorTile({
/** ol.layer.VectorTile
* Layer for vector tile data that is rendered client-side.
* Note that any property set in the options is set as a
* ol.Object property on the layer object.
*
* クライアント側にレンダリングされるベクタタイルデータのレイ
* ヤ。オプションに設定されたプロパティは、レイヤオブジェクト
* の ol.Object プロパティとして設定されます。
* （ol4 API）
*/
source: vectorSource });
map.addLayer(vectorLayer); /** addLayer(layer) * Adds the given layer to the top of this map. * 与えられたレイヤをこのマップの一番上に追加します。（ol4 API） */
});
0 件のコメント:
コメントを投稿