A simple map with an OSM source.
OSM ソースを使用したシンプル（単純な）マップ。
次の内容で index.js と index.html を作成します。（テストで使ったファイルの内容と同じです。）
user@deb9-vmw:~/new-project$ vim index.js
import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM';
const map = new Map({
/** const[JavaScript]
* Constants are block-scoped, much like variables defined
* using the let statement. The value of a constant cannot
* change through reassignment, and it can't be redeclared.
* 定数（const）はブロックスコープで、let ステートメントを
* 使用して定義された変数にとても似ています。定数の値は、再
* 代入による変更はできず、再宣言されません。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* JavaScript/Reference/Statements/const]）
*/
/** Map[ol/Map] * The map is the core component of OpenLayers. For a map * to render, a view, one or more layers, and a target * container are needed: * map（マップ）は、OpenLayers のコアコンポーネントです。 * map を描画するために､view（ビュー）と１つ以上の layers * （レイヤ）と target（ターゲット）コンテナが必要です： * （ol5 API） */
target: 'map', /** target[new Map(options)] * The container for the map, either the element itself * or the id of the element. If not specified at * construction time, module:ol/Map~Map#setTarget must * be called for the map to be rendered. * map のコンテナ、（HTML）エレメント自身、またはエレメント * の id。構築時に指定されていない場合、描画される map のた * めにモジュール：ol/Map~Map#setTarget が呼び出されなけれ * ばなりません。 * （ol5 API） */
layers: [ /** layers[new Map(options)] * Layers. If this is not defined, a map with no layers * will be rendered. Note that layers are rendered in * the order supplied, so if you want, for example, a * vector layer to appear on top of a tile layer, it * must come after the tile layer. * layers（レイヤ）。これが定義されていない場合、layers のな * い map が描画されます。layers は提供される順番で描画され、 * もし、例えば、タイルレイヤの上部にベクタレイヤを表示したい * なら、タイルレイヤの後に来なければなりません。 * （ol5 API） */
new TileLayer({
source: new OSM()
})
],
view: new View({
/** view[new Map(options)]
* The map's view. No layer sources will be fetched unless
* this is specified at construction time or through
* module:ol/Map~Map#setView.
* map（マップ）の view（ビュー）。これが構築時に指定されてい
* ないか、モジュール：ol/Map~Map#setView を通じてなければ、
* 取るレイヤソースはありません。
* （ol5 API）
*/
/** View(ol/View) * A View object represents a simple 2D view of the map. * This is the object to act upon to change the center, * resolution, and rotation of the map. * View（ビュー）オブジェクトは、map（マップ）の 単純な 2D * view を表示します。 * これは、map の center（中心）、resolution（解像度）、 * rotation （回転）を変換を実行するためのオブジェクトです。 * （ol5 API） */
center: [0, 0], /** center[new View(opt_options)] * The initial center for the view. The coordinate system * for the center is specified with the projection option. * Layer sources will not be fetched if this is not set, * but the center can be set later with #setCenter. * view（ビュー）の初期 center（中心）値。 center の座標系 * は、projection（投影法）オプションで指定されます。これが * 設定されなければレイヤソースは取得されませんが、center は * #setCenter で後で設定できます。 * （ol5 API） */
zoom: 2 /** zoom[new View(opt_options)] * Only used if resolution is not defined. Zoom level used * to calculate the initial resolution for the view. The * initial resolution is determined using the * #constrainResolution method. * resolution（解像度）が定義されていない場合のみ使用されま * す。view の初期 resolution（解像度）を計算するために使用 * される zoom（ズーム）レベル。初期 resolution は、 * #constrainResolution メソッドを使用して決定されます。 * （ol5 API） */
}) });
user@deb9-vmw:~/new-project$ vim index.html
npm start を実行します。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Simple Map</title> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> </head> <body> <div id="map"></div> <script src="./index.js"></script> <body> </html>
user@deb9-vmw:~/new-project$ npm start
> new-project@1.0.0 start /home/user/ol5-examples01
> parcel index.html
Server running at http://localhost:1234
✨ Built in 16.23s.
> new-project@1.0.0 start /home/user/ol5-examples01
> parcel index.html
Server running at http://localhost:1234
✨ Built in 16.23s.
Webブラウザのアドレス欄に
http://localhost:1234
と入力して Enter キーを押します。
