「2157-ol3ex.js」
var vectorSource = new ol.source.Vector(); /** ol.source.Vector * Provides a source of features for vector layers. * Vector features provided by this source are * suitable for editing. See ol.source.VectorTile for * vector data that is optimized for rendering. * ベクタレイヤのフィーチャのソースを用意します。このソース * が提供するベクタフィーチャは、編集に適しています。レンダ * リングのために最適化されたベクタデータの * ol.source.VectorTile を参照してください。（ol3 API） */
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: vectorSource,
style: new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the
* feature or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered
* in the options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用さ
* れる Canvas のデフォルトを与えられることに注意してくだ
* さい。GET 関数は、オプションで入力されたものはすべて返
* す。それらはデフォルトを返しません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
color: 'rgba(0, 0, 255, 1.0)', width: 2 }) }) });
var raster = 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.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
imagerySet: 'Aerial', key: 'AkGbx...（省略）' }) });
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
// generate a GetFeature request
var f = ol.format.ogc.filter; /** filter * This namespace contains convenience functions to * create filters for ol.format.WFS#writeGetFeature. * この名前空間は、ol.format.WFS#writeGetFeature 用のフィ * ルタを作成するために便利な機能が含まれています。（訳注： * 使用例は API を参照してください。） * （ol3 API） */
var featureRequest = new ol.format.WFS().writeGetFeature({
/** writeGetFeature
* Encode format as WFS GetFeature and return the Node.
* WFS GetFeature としてフォーマットをエンコードし、ノードを
* 返します。（ol3 API）
*/
srsName: 'EPSG:3857', /** srsName * SRS name. No srsName attribute will be set on * geometries when this is not provided. * SRS 名。これが提供されていないときジオメトリについて設定 * されている srsName 属性はありません。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
featureNS: 'http://openstreemap.org', /** featureNS * The namespace URI used for features. Required. * フィーチャに使用される名前空間 URI。必須。（ol3 API） */
featurePrefix: 'osm', /** featurePrefix * The prefix for the feature namespace. Required. * フィーチャ名前空間の拡張子。必須。（ol3 API） */
featureTypes: ['water_areas'], /** featureTypes * The feature type names. Required. * フィーチャタイプ名。必須。（ol3 API） */
outputFormat: 'application/json',
filter: f.and( /** filter * OGC filter condition. See ol.format.ogc.filter * for more information. * OGC フィルタ条件。詳細については、ol.format.ogc.filter * を参照。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
/** ol.format.ogc.filter.and(conditionA, conditionB) * Create a logicaloperator between two filter * conditions. * ２つのフィルタ条件の論理 演算子を作成します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
f.like('name', 'Mississippi*'),
/** ol.format.ogc.filter.like(propertyName, pattern,
* opt_wildCard, opt_singleChar, opt_escapeChar,
* opt_matchCase)
* Represents a comparison operator
* that matches a string property value against a
* text pattern.
* テキストパターンに対して文字列プロパティの値と一致する
* 比較演算子を表します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
f.equalTo('waterway', 'riverbank')
/** ol.format.ogc.filter.equalTo(propertyName,
* expression, opt_matchCase)
* Creates a comparison operator.
* 比較演算子を作成します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
) });
// then post the request and add the received features // to a layer // 要求を受信し、受け取ったフィーチャをレイヤに追加します
fetch('http://demo.boundlessgeo.com/geoserver/wfs', {
/** 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]）
*/
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest) /** XMLSerializer * XMLSerializer can be used to convert DOM subtree or * DOM document into text. XMLSerializer is available * to unprivileged scripts. * XmlSerializerは、DOM サブツリー、または、DOM ドキュメント * をテキストに変換するために使用できます。 XmlSerializerを非 * 特権スクリプトで使用可能です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/XMLSerializer]） */
/** serializeToString() * Returns the serialized subtree of a string. * シリアル化された文字列のサブツリーを返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/XMLSerializer]） */
}).then(function(response) {
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]） */
/** body.json()(This is an experimental technology) * The json() method of the Body mixin takes a Response * stream and reads it to completion. It returns a promise * that resolves with an object literal containing the * JSON data. * Body mixin の json() メソッドは、Response ストリームを受け * 取り、それを完了させるために読み込みます。これは、JSON デー * タを含むオブジェクトリテラルで解決する約束（promise）を返し * ます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/Body/json/]） */
}).then(function(json) {
var features = new ol.format.GeoJSON().readFeatures(json); /** ol.format.GeoJSON * Feature format for reading and writing data in the * GeoJSON format. * GeoJSON フォーマットのデータを読み書きするためのフィー * チャフォーマット。（ol3 API） */
/** readFeatures(source, opt_options) * Read all features from a GeoJSON source. * Works with both Feature and FeatureCollection * sources. * GeoJSON ソースからすべてのフィーチャを読み取ります。 * フィーチャとフィーチャコレクションソースの両方で動作しま * す。（ol3 API） */
vectorSource.addFeatures(features); /** addFeatures(features) * Add a batch of features to the source. * フィーチャのバッチをソースに追加します。（ol3 API） */
map.getView().fit(vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
/** getView()
* Get the view associated with this map. A view
* manages properties such as center and resolution.
* このマップと関連するビューを取得します。ビューは、
* 中心や解像度のような属性を管理します。
* Return: The view that controls this map.（ol3 API）
*/
/** fit(geometry, size, opt_options) * Fit the given geometry or extent based on the given * map size and border. The size is pixel dimensions of * the box to fit the extent into. In most cases you * will want to use the map size, that is map.getSize(). * Takes care of the map angle. * 指定されたマップのサイズと境界線に基づいて、指定されたジ * オメトリまたは範囲を合わせます。サイズは範囲に合わせてピ * クセル寸法のボックスです。ほとんどの場合、マップのサイズ * を使用しますが、それは map.getSize（）。マップアングルに * 注意してください。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
/** getExtent() * Get the extent of the features currently in the source. * ソースの現在のフィーチャの有効範囲を取得します。（ol3 API） */
/** getSize() * Get the size of this map. * Returns: The size in pixels of the map in the DOM. * マップのサイズを取得。（ol3 API） */
});
0 件のコメント:
コメントを投稿