OpenLayers5 Tutorials - 2 Basic Concepts

Basic Concepts Map
マップ

The core component of OpenLayers is the map (ol/Map). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. setTarget().

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

The markup below could be used to create a that contains your map.

下記のマークアップは、map を含む 6lt;div> を作成するために使用されます。

6lt;div id="map" style="width: 100%, height: 400px">6lt;/div>

The script below constructs a map that is rendered in the 6lt;div> above, using the map id of the element as a selector.

下記のスクリプトは、セレクタとしてエレメントの map id を使用することによって、上記の 6lt;div> に描画されるマップを構築します。

import Map from 'ol/Map';

var map = new Map({target: 'map'});

View
ビュー

The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a ol/View instance.

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

import View from 'ol/View';

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

A View also has a projection. The projection determines the coordinate system of the center and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.

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

The zoom option is a convenient way to specify the map resolution. The available zoom levels are determined by maxZoom (default: 28), zoomFactor (default: 2) and maxResolution (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of maxResolution units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by zoomFactor, until zoom level maxZoom is reached.

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


Source
ソース

To get remote data for a layer, OpenLayers uses ol/source/Source subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.

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

import OSM from 'ol/source/OSM';

var osmSource = OSM();

Layer
レイヤ

A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:

layer（レイヤ）は、source（ソース）からのデータの視覚的表現です。OpenLayers は、4つの基本的な種類の layer があります:

● ol/layer/Tile - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
● ol/layer/Image - Renders sources that provide map images at arbitrary extents and resolutions.
● ol/layer/Vector - Renders vector data client-side.
● ol/layer/VectorTile - Renders data that is provided as vector tiles.

● ol/layer/Tile - 指定の解像度の ズームレベルによって構成されたグリッドでタイルイメージ（画像）を提供するソース（source）を描画します。
● ol/layer/Image - 任意の範囲と解像度でマップイメージ（画像）を提供するソース（source）を描画します。
● ol/layer/Vector - クライアントサイドのベクタ（vector）データを描画します。
● ol/layer/VectorTile - ベクタ（vector）タイルとして提供されるデータを描画します。

import TileLayer from 'ol/layer/Tile';

var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);

Putting it all together
すべて一緒に配置

The above snippets can be combined into a single script that renders a map with a single tile layer:

上記のスニペットは、単一タイルレイヤでマップを描画する単一のスクリプトに結合できます：

import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/source/Tile';

new Map({
 layers: [
  new TileLayer({source: new OSM()})
 ],
 view: new View({
  center: [0, 0],
  zoom: 2
 }),
 target: 'map'
});