「2120-ol3ex.js」
var serviceUrl = 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' + 'services/PDX_Pedestrian_Districts/FeatureServer/'; var layer = '0';
var esrijsonFormat = new ol.format.EsriJSON(); /** ol.format.EsriJSON * Feature format for reading and writing data in the * EsriJSON format. * EsriJSON フォーマットデータの読み込みと書き込みのための * フィーチャフォーマット。（ol3 API） */
var vectorSource = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
*/
loader: function(extent, resolution, projection) {
var url = serviceUrl + layer + '/query/?f=json&' +
'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' +
extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] +
',"spatialReference":{"wkid":102100}}') +
'&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
'&outSR=102100';
$.ajax({url: url, dataType: 'jsonp', success: function(response) {
/** jQuery.ajax( url [, settings ] )
* Perform an asynchronous HTTP (Ajax) request.
* 非同期HTTP（Ajax）要求を実行します。
* （jQuery[http://api.jquery.com/jQuery.ajax/]）
*/
if (response.error) {
alert(response.error.message + '\n' +
response.error.details.join('\n'));
} else {
// dataProjection will be read from document
var features = esrijsonFormat.readFeatures(response, {
/** readFeatures(source, opt_options)
* Read all features from a EsriJSON source.
* Works with both Feature and FeatureCollection
* sources.
* EsriJSON ソースからすべてのフィーチャを読み取ります。
* フィーチャとフィーチャコレクションソースの両方で動作し
* ます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
featureProjection: projection
});
if (features.length > 0) {
vectorSource.addFeatures(features);
/** addFeatures(features)
* Add a batch of features to the source.
* フィーチャのバッチをソースに追加します。（ol3 API）
*/
} } }}); },
strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({
/** ol.loadingstrategy.tile(tileGrid)
* Creates a strategy function for loading features
* based on a tile grid.
* タイルグリッドに基づいて、ローディングフィーチャためのス
* トラテジ関数を作成します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** ol.tilegrid.XYZ * Set the grid pattern for sources accessing XYZ * tiled-image servers. * XYZタイル画像サーバにアクセスするソースのグリッドパターン * を設定します。（ol3 API） */
tileSize: 512 })) });
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: vectorSource });
var draw = new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
source: vectorSource,
type: /** @type {ol.geom.GeometryType} */ ('Polygon')
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
});
var select = new ol.interaction.Select(); /** ol.interaction.Select * Handles selection of vector data. A * ol.FeatureOverlay is maintained internally to * store the selected feature(s). Which features * are selected is determined by the condition * option, and optionally the toggle or add/remove * options. * ベクタデータの選択を処理します。 ol.FeatureOverlay * は、選択したフィーチャを格納するために内部的に維持され * ています。選択されているどのフィーチャでも条件オプショ * ン、そして部分的にトグルまたは追加/削除オプションによっ * て決定されます。（ol3 API） */
select.setActive(false); /** setActive(active) * Activate or deactivate the interaction. * インターラクションを有効または無効にします。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
var selected = select.getFeatures(); /** getFeatures() * Get the selected features. * 選択されたフィーチャを取得します。 * Return: Features collection（ol3 API） */
var modify = new ol.interaction.Modify({
/** ol.interaction.Modify
* Interaction for modifying vector data.
* ベクタデータを変形するためのインタラクション。
* （ol3 API）
*/
features: selected }); modify.setActive(false);
var typeSelect = document.getElementById('type');
/**
* Let user change the interaction type.
* @param {Event} e Change event.
*/
/** 「@param」
* The @param tag provides the name, type, and
* description of a function parameter.
* The @param tag requires you to specify the name of
* the parameter you are documenting. You can also
* include the parameter's type, enclosed in curly
* brackets, and a description of the parameter.
* @paramタグは、関数パラメータの名前と型、説明を提供します。
* @paramタグを使用すると、文書化されたパラメータの名前を
* 指定する必要があります。また、パラメータのタイプと、中括弧
* で囲まれたおよびパラメータの説明を含めることができます。
* （@use JSDoc [http://usejsdoc.org/tags-param.html]）
*/
typeSelect.onchange = function(e) {
/** GlobalEventHandlers.onchange()
* The onchange property sets and returns the event handler
* for the change event.
* onchange プロパティは、change イベントに対してイベントハ
* ンドラを設定、および、返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/GlobalEventHandlers/onchange]）
*/
draw.setActive(typeSelect.value === 'DRAW'); select.setActive(typeSelect.value === 'MODIFY'); modify.setActive(typeSelect.value === 'MODIFY'); };
var dirty = {};
selected.on('add', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
var feature = evt.element;
feature.on('change', function(evt) {
dirty[evt.target.getId()] = true; /** getId() * Return: id（ol3 API） */
}); });
selected.on('remove', function(evt) {
var feature = evt.element;
var fid = feature.getId();
if (dirty[fid] === true) {
var payload = '[' + esrijsonFormat.writeFeature(feature, {
/** writeFeature(feature, opt_options)
* Encode a feature as a EsriJSON Feature string.
* EsriJSON フィーチャ文字列としてフィーチャをエンコード
* （符号化）します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
featureProjection: map.getView().getProjection()
/** 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）
*/
/** getProjection()
* Get the projection associated with the position.
* 位置をともなった投影を取得します。（ol3 API）
*/
}) + ']'; var url = serviceUrl + layer + '/updateFeatures';
$.post(url, { f: 'json', features: payload }).done(function(data) {
/** jQuery.post( url [,data] [,success] [,dataType] )
* Load data from the server using a HTTP POST request.
* HTTP POST リクエストを使ってサーバからデータをロードします。
* （jQUERY[http://api.jquery.com/jquery.post/]）
*/
/** deferred.done( doneCallbacks [, doneCallbacks ] )
* Add handlers to be called when the Deferred object is
* resolved.
* Deferred オブジェクトが resolve のとき呼び出されるハンド
* ラを追加します。
* （jQuery[http://api.jquery.com/deferred.done/]）
*/
var result = JSON.parse(data);
/** JSON.parse()
* JSON.parse() メソッドは文字列を JSON として解析し、また
* 任意で解析によって作り出された値を変換します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/JSON/parse]）
*/
if (result.updateResults && result.updateResults.length > 0) {
if (result.updateResults[0].success !== true) {
var error = result.updateResults[0].error;
alert(error.description + ' (' + error.code + ')');
} else {
delete dirty[fid];
}
}
});
}
});
draw.on('drawend', function(evt) {
var feature = evt.feature;
var payload = '[' + esrijsonFormat.writeFeature(feature, {
featureProjection: map.getView().getProjection()
}) + ']';
var url = serviceUrl + layer + '/addFeatures';
$.post(url, { f: 'json', features: payload }).done(function(data) {
var result = JSON.parse(data);
if (result.addResults && result.addResults.length > 0) {
if (result.addResults[0].success === true) {
feature.setId(result.addResults[0]['objectId']);
/** setId()
* Set a unique id for this feature. The id may be
* used to retrieve a feature from a vector source
* with the ol.source.Vector#getFeatureById method.
* このフィーチャの一意のIDを設定します。 id は
* ol.source.Vector の getFeatureById メソッドによる
* ベクタソースからフィーチャを取り出すために使用する
* ことができます。（ol3 API）
*/
vectorSource.clear();
/** clear(opt_fast)
* Remove all features from the source.
* ソースからすべてのフィーチャを削除します。（ol3 API）
*/
} else {
var error = result.addResults[0].error;
alert(error.description + ' (' + error.code + ')');
}
}
});
});
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/World_Topo_Map/MapServer">ArcGIS</a>' });
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.XYZ({
/** ol.source.XYZ
* Layer source for tile data with URLs in a set XYZ
* format.
* セットXYZ形式のURLを持つタイルデータのレイヤソース。
* （ol3 API）
*/
attributions: [attribution],
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([draw, select, modify]), /** ol.interaction.defaults * Set of interactions included in maps by default. * Specific interactions can be excluded by setting * the appropriate option to false in the constructor * options, but the order of the interactions is fixed. * If you want to specify a different order for * interactions, you will need to create your own * ol.interaction.Interaction instances and insert * them into a ol.Collection in the order you want * before creating your ol.Map instance. * デフォルトでマップに含まれるインターラクションのセット。 * 具体的なインターラクションは、コンストラクタのオプションで * 適切なオプションをfalseに設定することで除外することができます * が、インターラクションの順番は固定されています。インターラク * ションに対して別の順番を指定したい場合は、独自の * ol.interaction.Interaction インスタンスを作成し、 * ol.Map インスタンスを作成する前に、望む順番で * ol.Collection にそれらを挿入する必要があります。（ol3 API） * new ol.interaction.DragRotateAndZoom() *（訳注：インターラクションの順番は、API を参照してください。） */
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'), /** ol.proj.transform(coordinate, source, destination) * Transforms a coordinate from source projection to * destination projection. This returns a new coordinate * (and does not modify the original). * ソース投影から変換先投影に座標変換します。これは、新しい座標 * を返します（オリジナルを変更しません）。（ol3 API） */
zoom: 12 }) });
0 件のコメント:
コメントを投稿