「2119-ol3ex.js」
var serviceUrl = 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' + 'Petroleum/KSFields/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 styleCache = {
'ABANDONED': [
new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(225, 225, 225, 255)'
}),
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）
*/
color: 'rgba(0, 0, 0, 255)',
width: 0.4
})
})
],
'GAS': [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4
})
})
],
'OIL': [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(56, 168, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0
})
})
],
'OILGAS': [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(168, 112, 0, 255)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(110, 110, 110, 255)',
width: 0.4
})
})
]
};
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,
style: function(feature, resolution) {
var classify = feature.get('activeprod');
/** get(key) * Gets a value.（ol3 API） */
return styleCache[classify]; } });
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({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([-97.6114, 38.8403], '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: 7 }) });
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
/** forEachFeatureAtPixel
* Detect features that intersect a pixel on the viewport,
* and execute a callback with each intersecting feature.
* Layers included in the detection can be configured
* through opt_layerFilter. Feature overlays will always
* be included in the detection.
* ビューポート上のピクセルと交差するフィーチャを検出し、
* 各交差するフィーチャとコールバックを実行します。
* 検出に含まれるレイヤが opt_layerFilter を通じて
* 設定することができます。フィーチャーオーバーレイは
* 常に検出に含まれます。（ol3 API）
*/
features.push(feature); /** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
});
if (features.length > 0) {
var info = [];
var i, ii;
for (i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('field_name'));
/** Array.push
* 与えられた要素を追加することによって配列を変異させ、
* その配列の新しい長さを返します。
* （MDN [https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/push]）
*/
}
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
/** element.innerHTML
* innerHTML は、与えられた要素に含まれる全てのマークアップ
* と内容を設定または取得します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/element.innerHTML]）
*/
/** Array.join * 配列の全ての要素を繋いで文字列にします。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Array/join]） */
map.getTarget().style.cursor = 'pointer'; /** getTarget() * Get the target in which this map is rendered. * Note that this returns what is entered as an option or * in setTarget: if that was an element, it returns an * element; if a string, it returns that. * レンダリングされたこのマップのターゲットを取得します。 * これはオプションとして、または setTarget に入力されている * ものを返すことに注意してください：それが要素ならば、要素 * を返します。文字列ならば、それを返します。（ol3 API） */
} else {
document.getElementById('info').innerHTML = ' ';
map.getTarget().style.cursor = '';
}
};
map.on('pointermove', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
/** pointermove * Triggered when a pointer is moved. Note that on * touch devices this is triggered when the map is * panned, so is not the same as mousemove. * ポインタが移動されたときにトリガされます。タッチデバイス * で、マップがパンされるときにこれはトリガーされ、 mousemove * と同じではないことに注意してください。 * （ol3 API） */
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent); /** getEventPixel() * Returns the map pixel position for a browser event. * ブラウザイベントに対して、マップのピクセル位置を返します。 * （ol3 API） */
displayFeatureInfo(pixel); });
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
0 件のコメント:
コメントを投稿