Overpass APIは、「Overpass API-OpenStreetMap Wiki（http://wiki.openstreetmap.org/wiki/Overpass_API）」の「Introduction」に、次のようにあります。
****
The Overpass API (or OSM3S) is a read-only API that serves up custom selected parts of the OSM map data. It acts as a database over the web: the client sends a query to the API and gets back the data set that corresponds to the query.
オーバーパス API（または OSM3S）は、OSM マップデータのクライアントが選択した部分を提供している読み取り専用の API です。これは、Web 上のデータベースとして機能します。すなわち、クライアントは、API にクエリを送信し、クエリに対応するデータセットを受け取ります。
Unlike the main API, which is optimized for editing, Overpass API is optimized for data consumers that need a few elements within a glimpse or up to roughly 100 million elements in some minutes, both selected by search criteria like e.g. location, type of objects, tag properties, proximity, or combinations of them. It acts as a database backend for various services.
編集用に最適化されている主要な API とは異なり、オーバーパス API は、検索基準、（例えば、場所、オブジェクトの種類、タグプロパティ、近接、またはそれらの組み合わせのような）で選択された、ちらっと見る、または、数分で最大およそ１億の要素のうち、いくつかの要素を必要とするデータコンシューマ向けに最適化されています。それは、様々なサービスのためのデータベースのバックエンドとして機能します。
Overpass API has a powerful query language (language guide, language reference, an IDE) beyond XAPI, but also has a compatibility layer to allow a smooth transition from XAPI.*
オーバーパスAPIは、XAPI 越しに強力なクエリ言語（言語ガイド、言語リファレンス、IDE）を持っていますが、また、XAPI からの円滑な移行を可能にする互換性レイヤを持っています。
To support small and well scaling OSM main services, Overpass API is run as a third party service. You can use the public visible instances:
小さくてうまいスケーリング OSM のメインサービスをサポートするために、オーバーパス API は、サードパーティのサービスとして実行されます。あなたは、パブリックビジブルインスタンスを使用することができます。
http://overpass-api.de/ with query base address http://overpass-api.de/api/ (4 physical cores, 32 GB RAM).
http://overpass.osm.rambler.ru/ with query base address http://overpass.osm.rambler.ru/cgi/ (8 cores, 64 GB RAM).
Overpass API on openstreetmap.fr
*****
「230-ol3ex.js」
var styles = {
'amenity': {
'parking': [
new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
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(170, 170, 170, 1.0)', width: 1 }),
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(170, 170, 170, 0.3)' }) }) ] },
'building': {
'.*': [
new ol.style.Style({
zIndex: 100,
stroke: new ol.style.Stroke({
color: 'rgba(246, 99, 79, 1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(246, 99, 79, 0.3)'
})
})
]
},
'highway': {
'service': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1.0)',
width: 2
})
})
],
'.*': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1.0)',
width: 3
})
})
]
},
'landuse': {
'forest|grass|allotments': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(140, 208, 95, 1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(140, 208, 95, 0.3)'
})
})
]
},
'natural': {
'tree': [
new ol.style.Style({
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 2,
fill: new ol.style.Fill({
color: 'rgba(140, 208, 95, 1.0)'
}),
stroke: null
})
})
]
}
};
var vectorSource = new ol.source.ServerVector({
/** ol.source.ServerVector
* A vector source in one of the supported formats, using
* a custom function to read in the data from a remote server.
* リモートサーバからのデータを読むためのカスタムファンクション
* （独自関数）を使うための、サポートされたフォーマットのベクタ
* ソース。（ol3 API）
*/
format: new ol.format.OSMXML(), /** ol.format.OSMXML * Feature format for reading data in the OSMXML format. * OSMXML フォーマットのデータを読み込むためのフィーチャ * フォーマット（ol3 API） */
loader: function(extent, resolution, projection) {
var epsg4326Extent = ol.proj.transformExtent(extent, projection, 'EPSG:4326'); /** ol.proj.transformExtent(extent, source, destination) * Transforms an extent from source projection to * destination projection. This returns a new extent * (and does not modify the original). * ソースの投影法から変換先の投影法へ範囲を変換します。 * これは、新しい範囲（オリジナルを変形しません）を返します。 * （ol3 API） */
var url = 'http://overpass-api.de/api/xapi?map?bbox=' +
epsg4326Extent.join(',');
$.ajax(url).then(function(response) {
/** $.ajax( [url] [, settings] )
* 非同期HTTP通信(Ajax)を行い、データの取得・処理を行います。
* [url] String リクエスト送信先のURL
* [settings] Object Ajaxリクエストでのオプションを記述した
* オブジェクト（jQuery）
*/
vectorSource.addFeatures(vectorSource.readFeatures(response)); }); },
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
/** ol.loadingstrategy
* Strategies for loading vector data.
* ベクタデータをローディングするための方法。
* createTile
* ol.loadingstrategy のメソッド
* （ol3 API）
*/
/** ol.tilegrid.XYZ * Set the grid pattern for sources accessing XYZ * tiled-image servers. * XYZタイル画像サーバにアクセスするソースのグリッドパターンを * 設定します。（ol3 API） */
maxZoom: 19 })), projection: 'EPSG:3857' });
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: vectorSource,
style: function(feature, resolution) {
for (var key in styles) {
var value = feature.get(key);
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
if (value !== undefined) {
for (var regexp in styles[key]) {
if (new RegExp(regexp).test(value)) {
/** RegExp
* パターンに従ったテキストにマッチする正規表現オブジェク
* トを生成します。
* (MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/RegExp])
*/
/** RegExp.prototype.test()
* 正規表現と対象の文字列の間のマッチを調べるための検索を
* 実行し、結果を示す真偽値 ( true / false )を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/RegExp/test]）
*/
return styles[key][regexp]; } } } } return null; } });
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: 'Ak-dzM...（省略）'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
controls: ol.control.defaults({
/** controls
* Controls initially added to the map.
* If not specified, ol.control.defaults() is used.
* 初期設定で、マップに追加されたコントロール。
* 明示されていなければ、ol.control.defaults() が使用されます。
* （ol3 API）
*/
/** ol.control.defaults()
* デフォルトでは、マップに含まコントロールのセット。
* 特に設定しない限り、これは、以下の各コントロールの
* インスタンスを含むコレクションを返します。(API Doc より）
* ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
*/
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* attributionOptions の値の型は、
* olx.control.AttributionOptions の型を使用。
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ
})
}),
view: new ol.View({
center: [739218, 5906096],
maxZoom: 19,
zoom: 17
})
});
