OpenLayers4 Tutorials - 2 Basic Concepts

● Basic Concepts
（http://openlayers.org/en/latest/doc/tutorials/concepts.html）
基本的概念

Map[マップ]

OpenLayers　コアコンポーネントは、map (ol.Map) です。それは、ターゲット[target]コンテナ (map を含む web ページの div 要素[element]など) に描画されます。すべての map プロパティは、構築時に、または、setTarget() などの setter（セッタ）メソッドを使用して設定できます。

<div id="map" style="width: 100%, height: 400px"></div>
<script>
 var map = new ol.Map({target: 'map'});
</script>

View[ビュー]

ol.Map は、地図の中心、ズームレベル、投影法のようなものを担いません。代わりに、これらは、ol.View インスタンスのプロパティです。

 map.setView(new ol.View({
  center: [0, 0],
  zoom: 2
 }));

ol.View は、projection[投影法]もあります。projection　は、マップ解像度計算のための中心と単位の座標系を決定します。（上記のスニペットのように）指定されていない場合 、初期値の projection は、map[マップ]単位がメートルの球状メルカトル（EPSG:3857）です。

zoom[ズーム]オプションは、map の解像度を指定する便利な方法です。使用可能なズームレベルは、maxZoom（初期値：28）、zoomFactor（初期値：2）、およびmaxResolution（初期値は投影の有効範囲が256x256ピクセルのタイルに収まるように計算されます）によって決まります。maxResolution ピクセル単位の解像度を持つズームレベル 0 から開始し、それ以降のズームレベルは、ズームレベル maxZoom に到達するまで、前のズームレベルの解像度を zoomFactor で割ることによって計算されます。


Source[ソース]

layer[レイヤ]のリモートデータを取得するために、OpenLayers は  ol.source.Source のサブクラスを使用します。これらは、OpenStreetMap や Bing などの無料および商業地図タイルサービスで、WMS や WMTS などの  OGC ソースで、 GeoJSON または KML などのフォーマットの vector[ベクタ]データが使用可能です。

 var osmSource = new ol.source.OSM();

Layer[レイヤ]

layer は、source[ソース]からのデータの視覚的表現です。OpenLayers は、3つの基本的な種類の layer: ol.layer.Tile、ol.layer.Image、ol.layer.Vector があります。

ol.layer.Tile は、事前描画を提供する layer source のためのもので、指定の解像度の zoom[ズーム]レベルによって構成されたグリッドで画像をタイルにします。

ol.layer.Image は、任意の範囲と解像度で使用可能なサーバ描画画像のためのものです。

ol.layer.Vector は、クライアントサイドで描画されるvector[ベクタ]データのためのものです。

 var osmLayer = new ol.layer.Tile({source: osmSource});
 map.addLayer(osmLayer);

すべて一緒に配置

上記のスニペットは、view[ビュー]と layer[レイヤ]を含む自己完結型の map[マップ]設定に統合できます。

<div id="map" style="width: 100%, height: 400px"></div>
<script>
 new ol.Map({
  layers: [
   new ol.layer.Tile({source: new ol.source.OSM()})
  ],
  view: new ol.View({
   center: [0, 0],
   zoom: 2
  }),
   target: 'map'
 });
</script>