2018年8月23日木曜日

OpenLayers5 Tutorials - 4 Raster Reprojection

Raster Reprojection
ラスタ再投影
(図は使用していないので、OpenLayers のホームページを参照してください。)

OpenLayers has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server. Transformation of the map projections of the image happens directly in a web browser. The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.

OpenLayers は、サーバから配信されるよりも、異なる座標系の WMS、WMTS、静的なイメージ、その他の多くのソースからラスタデータを表示する機能があります。イメージのマップ投影法の変換は、web ブラウザーで直接行われます。座標参照系がサポートされている Proj4js の view が可能で、以前は互換性のないレイヤが、現在、結合とオーバレイすることができます。


Usage
使い方

The API usage is very simple. Just specify proper projection (e.g. using EPSG code) on ol/View:

API の使用方法は非常に簡単です。ol/View で適切な投影法 (例えば、EPSG コードを使用) を指定するだけです。
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

var map = new Map({
 target: 'map',
 view: new View({
  projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
  center: [0, 0],
  zoom: 2
 }),
 layers: [
  new TileLayer({
   source: new TileWMS({
    projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
    url: 'http://demo.boundlessgeo.com/geoserver/wms',
    params: {
     'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
    }
   })
  })
 ]
});
If a source (based on ol/source/TileImage or ol/source/Image) has a projection different from the current ol/View’s projection then the reprojection happens automatically under the hood.

(ol/source/TileImage または ol/source/Image に基づく) ソースが現在の ol/View の投影法と別の投影法である場合、再投影は「内部で」で自動的に行われます。

Examples
OpenLayers サイトの Examples にある例

● Raster reprojection demo
● OpenStreetMap to WGS84 reprojection
● Reprojection with EPSG.io database search
● Image reprojection

Custom projection
カスタム投影法

The easiest way to use a custom projection is to add the Proj4js library to your project and then define the projection using a proj4 definition string. It can be installed with

カスタム投影法を使用する最も簡単な方法は、Proj4js ライブラリをプロジェクトに追加し、それから、proj4 定義文字列を使用して投影法を定義することです。次のコマンドでインストールできます

npm install proj4

Following example shows definition of a British National Grid:

次の例は、British National Grid の定義を示しています。
import proj4 from 'proj4';
import {get as getProjection, register} from 'ol/proj';

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
 '+x_0=400000 +y_0=-100000 +ellps=airy ' +
 '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
 '+units=m +no_defs');
register(proj4);
var proj27700 = getProjection('EPSG:27700');
proj27700.setExtent([0, 0, 700000, 1300000]);
Change of the view projection
view projection(ビュー投影法)の変更

To switch the projection used to display the map you have to set a new ol/View with selected projection on the ol/Map:br />
マップを表示するために使用される投影法を切り替えるために、ol.Map 上の選択される投影法を使用して、new ol.View を設定しなければなりません:
map.setView(new View({
 projection: 'EPSG:27700',
 center: [400000, 650000],
 zoom: 4
}));

TileGrid and Extents
TileGrid と範囲

When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles. The TileGrid of the reprojected tiles is by default internally constructed using ol/tilegrid~getForProjection(projection). The projection should have extent defined (see above) for this to work properly.

投影法が必要な場合、(ターゲット投影法の)新しいタイルは、「内部で」元のソースタイルから作成されます。再投影されたタイルの TileGrid は、デフォルトでは ol/tilegrid~getForProjection(projection) を使用して内部的に構築されています。投影は、これが正常に動作するために定義される(上記参照)範囲が必要です。

Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using ol/source/TileImage~setTileGridForProjection(projection, tilegrid). This TileGrid will then be used when reprojecting to the specified projection instead of creating the default one. In certain cases, this can be used to optimize performance (by tweaking tile sizes) or visual quality (by specifying resolutions).

また、カスタムターゲット TileGrid は、手動で構成され、ol/source/TileImage~setTileGridForProjection (projection, tilegrid) を使用してソースインスタンスに設定されます。この TileGrid は、デフォルトのものを作成する代わりに指定された投影法で再投影するとき、使用されます。特定のケースで、これは(タイルサイズを調整することによる)パフォーマンスや(解像度を指定することによる)画質を最適化するために使用できます。


How it works
動作の仕方

The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using ol/proj capabilities (proj4js is usually utilized to define custom transformations). The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):

再投影プロセはス三角形に基づいています--ターゲットラスタは、ol/proj 機能を使用する頂点変換を使用して、三角形の限られた数に分かれています。(proj4js は、カスタム変換の定義に通常利用されます。)三角形の内側のピクセルの再投影は、 (canvas 2d コンテキストによるハードウェア加速のレンダリングで) アフィン(affine)変換で近似されます。

図 How it works

This way we can support a wide range of projections from proj4js (or even custom transformation functions) on almost any hardware (with canvas 2d support) with a relatively small number of actual transformation calculations.

このように、実際の変換の計算の数が比較的少ない(canvas 2d をサポートする)ほぼすべてのハードウェアの proj4js (またはカスタム変換関数) からの投影の広い範囲をサポートできます。

The precision of the reprojection is then limited by the number of triangles.

再投影の精度は、そのとき、三角形の数によって制限されます。

The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent.

再投影プロセスは、ソース(png または gif)から供給されたラスタデータの透明度を維持し、再投影によって生成されたギャップとデータなしのピクセルは自動的に透明になります。

Dynamic triangulation
動的な三角形分割

The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857). The error can be minimized by increasing the number of triangles used.

上記の上のイメージは、元のイメージ(左;EPSG:27700)が限られた数の三角形だけで変換変換される(右のEPSG:3857)とき、顕著なエラー(特にエッジ上)を示します。エラーは、使用される三角形の数を増やすことで最小化できます。

Since some transformations require a more detail triangulation network, the dynamic triangulation process automatically measures reprojection error and iteratively subdivides to meet a specific error threshold:

いくつかの変換は、より詳細な三角分割ネットワークを必要とするので、動的な三角形分割プロセスは再投影誤差を自動的に測定し、特定のエラーしきい値に合わせて繰り返し細分化します:

図 Iterative triangulation

For debugging, rendering of the reprojection edges can be enabled by ol.source.TileImage#setRenderReprojectionEdges(true).

デバッグのため、再投影エッジのレンダリングは、ol/source/TileImage#setRenderReprojectionEdges(render) で有効にできます。


Advanced
上級

Triangulation precision threshold
三角形分割精度のしきい値

The default triangulation error threshold in pixels is given by ERROR_THRESHOLD (0.5 pixel). In case a different threshold needs to be defined for different sources, the reprojectionErrorThreshold option can be passed when constructing the tile image source.

ピクセル単位でデフォルトの三角形分割エラーしきい値は、ERROR_THRESHOLD (0.5 ピクセル) で与えられます。異なるしきい値が異なるソースに定義される必要がある場合は、タイルイメージソースを構築するとき reprojectionErrorThreshold オプションが渡されます。

Limiting visibility of reprojected map by extent
範囲による再投影されるマップの可視性の制限

The reprojection algorithm uses inverse transformation (from view projection to data projection). For certain coordinate systems this can result in a "double occurrence" of the source data on a map. For example, when reprojecting a map of Switzerland from EPSG:21781 to EPSG:3857, it is displayed twice: once at the proper place in Europe, but also in the Pacific Ocean near New Zealand, on the opposite side of the globe.

再投影アルゴリズムは、(view の投影法からデータの投影法への) 逆変換を使用します。特定の座標系では、これはマップのソースデータの「二重出現」をもたらす可能性があります。たとえば、EPSG:21781 から EPSG:3857 へスイス連邦共和国のマップを再投影するとき、ヨーロッパの適切な場所に1回、しかし、地球の反対側のニュージーランド近くの太平洋にもう1回、計2回表示されます。

図 Double occurrence of a reprojected map

Although this is mathematically correct behavior of the inverse transformation, visibility of the layer on multiple places is not expected by users. A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations).

これは逆変換の数学的に正しい動作ですが、複数の場所でレイヤの表示はユーザに期待されていません。考えられる一般的な解決策は、すべての頂点の順変換を計算することですが、これは(特に計算コストの高い変換の場合)パフォーマンスを大幅に低下させます。

Therefore a recommended workaround is to define a proper visibility extent on the ol.layer.Tile in the view projection. Setting such a limit is demonstrated in the reprojection demo example.

したがって、推奨される回避策は、view projection(投影法)の ol/layer/Tile に適切な表示の範囲を定義します。このような制限再の設定は、再投影デモの例(Raster Reprojection[reprojection.html])に示します。

Resolution calculation
解像度計算

When determining source tiles to load, the ideal source resolution needs to be calculated. The ol/reproj~calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution) function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.

読み込むソースタイルを決定するときは、理想的なソースの解像度を計算する必要があります。ol/reproj-calculateSourceResolution(sourceProj、targetProj、targetCenter、targetResolution) 関数は、再投影の間に 1:1 にできるだけ近いピクセルマッピングを達成するために最適な値を計算し、そのときソースから適切なズームレベルを選択するために使用します。

It is, however, generally not practical to use the same source zoom level for the whole target zoom level -- different projections can have significantly different resolutions in different parts of the world (e.g. polar regions in EPSG:3857 vs EPSG:4326) and enforcing a single resolution for the whole zoom level would result in some tiles being scaled up/down, possibly requiring a huge number of source tiles to be loaded. Therefore, the resolution mapping is calculated separately for each reprojected tile (in the middle of the tile extent).

しかしながら、すべてのターゲットズームレベルのために同じソースのズームレベルを使うことは実用的ではありません--異なる投影法は、世界の異なる部分で大幅に異なる解像度を持つことができ(例えば極地 EPSG:3857 対 EPSG:4326 ) 、全体のズームレベルに単一の解像度を適用すると、いくつかのタイルが拡大/縮小され、ロードされる膨大な数のソースタイルを必要とする可能性があります。したがって、解像度マッピングは (タイル範囲の中央に) 再投影されたタイルごとに個別に計算されます。

OpenLayers5 Tutorials - 3 Some Background on OpenLayers

Introduction
Objectives
目的

OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.

OpenLayers は、マップと地理空間データで表示とインタラクションのための、モジュール方式で高性能、機能をパッケージにしたライブラリです。

The library comes with built-in support for a wide range of commercial and free image and vector tile sources, and the most popular open and proprietary vector data formats. With OpenLayers's map projection support, data can be in any projection.

ライブラリは、商用やフリーの広い範囲のイメージやベクタタイルソース、および、最も一般的なオープンや著作権のあるベクタデータフォーマットのためのビルトインサポートを備えています。OpenLayers のマッププロジェクション(地図投影法)サポートで、データはすべてのプロジェクション(投影法)になることができます。

Public API
パブリック API

OpenLayers is available as ol npm package, which provides all modules of the officially supported API.

OpenLayers は、ol npm package として利用でき、公式にサポートされている API のモジュールがすべて提供されています。

Renderers and Browser Support
レンダラとブラウザのサポート

By default, OpenLayers uses a performance optimized Canvas renderer. An experimental WebGL renderer (without text rendering support) is also avaialble.

デフォルトでは、OpenLayers は、パフォーマンスに最適化された Canvas レンダラを使用します。実験的な WebGL レンダラ(テキスト描画サポートを除く)も利用できます。

OpenLayers runs on all modern browsers that support HTML5 and ECMAScript 5. This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, polyfills, the application bundle needs to be transpiled (e.g. using Babel) and bundled with polyfills for requestAnimationFrame, Element.prototype.classList and URL.

OpenLayers は、HTML5 や ECMAScript 5 をサポートするすべての近代的なブラウザで動作します。これには、Chrome、Firefox、Safari、Edge を含みます。Internet Explorer(バージョン9まで)や Android 4.x などの古いブラウザやプラットフォームのために、polyfills、アプリケーションバンドルは、(例えば、Babel を使用する)transpile(transcompile) され、requestAnimationFrame と Element.prototype.classList と URL のためのポリフィルでバンドルされることが必要です。

訳注:transpile transcompile の短縮形。(transitive) To compile (source code) by translating from one source programming language to another, producing translated source code in the other language.
あるプログラミング言語から他のものへ翻訳することによって(ソースコードを)コンパイルすること、他の言語でソースコードが翻訳された生成物。[Weblio より]

The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.

ライブラリは、デスクトップ/ラップトップとモバイルデバイス両方に使用するために意図され、ポインタとタッチインタラクションをサポートします。

Module and Naming Conventions
モジュールと命名規則

OpenLayers modules with CamelCase names provide classes as default exports, and may contain additional constants or functions as named exports:

キャメルケース名を使用した OpenLayers モジュールは、default exports としてクラスを提供し、named exports として追加 constants 、または、functions を含めることができます:

import Map from 'ol/Map';
import View from 'ol/View';

Class hierarchies grouped by their parent are provided in a subfolder of the package, e.g. layer/.

親によってグループ化されたクラス階層は、パッケージのサブホルダ、例えば layer/、に提供されます。

For convenience, these are also available as named exports, e.g.

便宜上、これらは、例えば次のように、named exports として利用できます。

import {Map, View} from 'ol';
import {Tile, Vector} from 'ol/layer';

In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:

これらの再エクスポートクラスに加えて、小文字名のモジュールは named exports として constants、または、functions も提供します:

import {inherits} from 'ol';
import {fromLonLat} from 'ol/proj';

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'
});

OpenLayers5 Tutorials - 1b Building an OpenLayers Application

Initial steps
最初の手順

Create a new empty directory for your project and navigate to it by running mkdir new-project && cd new-project. Initialize your project using npm init and answer the questions asked.

プロジェクト用に新しい空のディレクトリを作成し、mkdir new-project && cd new-project を実行して、そのディレクトリに移動します。npm init を使用してプロジェクトを初期化し、質問に回答します。

Add OpenLayers as dependency to your application with

OpenLayers を依存関係としてアプリケーションに追加します

npm install ol

At this point you can ask NPM to add required development dependencies by running

この時点で、実行によって必要とされる開発依存関係を追加するよう NPM に尋ねることができます。

npm install --save-dev parcel-bundler


■□ Debian9 で試します■□
mkdir new-project && cd new-project を実行します。

user@deb9-vmw:~$ mkdir new-project && cd new-project

プロジェクトディレクトリ new-project の依存関係を管理するために、npm init で package.json を作成します。

user@deb9-vmw:~/new-project$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (new-project) [以下すべて空欄でEnterキーを押す]
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/nob61/new-project/package.json:

{
  "name": "new-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

│   Update available 5.6.0 → 6.3.0    │
│     Run npm i -g npm to update      │
npm のアップデートを支持されたので実行します。

user@deb9-vmw:~/new-project$ ls
package.json
user@deb9-vmw:~/new-project$ npm -v
5.6.0
user@deb9-vmw:~/new-project$ su
パスワード:
root@deb9-vmw:/home/nob61/new-project# npm i -g npm
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.3.0
added 283 packages, removed 363 packages and updated 41
packages in 13.391s
root@deb9-vmw:/home/nob61/new-project# exit
exit
user@deb9-vmw:~/new-project$ npm -v
6.3.0

npm install ol を実行します。

user@deb9-vmw:~/new-project$ npm install ol npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN new-project@1.0.0 No description
npm WARN new-project@1.0.0 No repository field.

+ ol@5.1.3
added 8 packages from 6 contributors and audited 8 packages in 3.083s
found 0 vulnerabilities

npm install --save-dev parcel-bundler を実行します。

user@deb9-vmw:~/new-project$ npm install --save-dev parcel-bundler
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> deasync@0.1.13 install /home/nob61/new-project/node_modules/deasync
> node ./build.js

`linux-x64-node-8` exists; testing
Binary is fine; exiting

> parcel-bundler@1.9.7 postinstall /home/nob61/new-project/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
> https://opencollective.com/parcel/donate
npm WARN new-project@1.0.0 No description
npm WARN new-project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ parcel-bundler@1.9.7
added 680 packages from 534 contributors and audited 7354 packages in 47.215s
found 0 vulnerabilities
user@deb9-vmw:~/new-project$ ls
node_modules package-lock.json package.json

■□ここまで■□

Application code and index.html
アプリケーション コードと index.html

Place your application code in index.js. Here is a simple

starting point:index.js にアプリケーション コードを配置します。ここに簡単な出発点があります。
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
 target: 'map',
 layers: [
  new TileLayer({
   source: new OSM()
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 0
 })
});
You will also need an ìndex.html file that will use your bundle. Here is a simple example:

バンドルを使用する ìndex.html ファイルも必要です。ここには簡単な例があります。
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Parcel with OpenLayers</title>
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="./index.js"></script>
 <body>
</html>


■□ Debian9 で試します■□
次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
 target: 'map',
 layers: [
  new TileLayer({
   source: new OSM()
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 0
 })
});
次の内容で index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Parcel with OpenLayers</title>
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="./index.js"></script>
 <body>
</html>
 ■□ここまで■□

Creating a bundle
バンドルの作成

With simple scripts you can introduce the commands npm run build and npm start to manually build your bundle and watch for changes, respectively. Add the following to the script section in package.json:

簡単なスクリプトで、バンドルと変更の監視を、それぞれ、手動でビルドするために、npm run build と npm start コマンドを導入することができます。package.json の script[スクリプト]セクションに次のものを追加します

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "parcel index.html",
 "build": "parcel build --public-url . index.html"
}

That's it. Now to run your application, enter

これで終わりです。アプリケーションを実行するために、直ちに、

npm start

in your console. To test your application, open http://localhost:1234/ in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.

とコンソールに入力します。アプリケーションをテストするために、ブラウザで http://localhost:1234/ を開きます。何かを変更するといつでも、変更の結果を表示するために、ページは自動的にリロードします。

Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.

アプリケーションコードすべてとアプリケーションに使用されるすべての依存関係が一緒の単体の JavaScript ファイルが作成されることに注意してください。OpenLayers パッケージから、必要とされるコンポーネントだけ含まれます。

To create a production bundle of your application, simply type

アプリケーションの本番のバンドルを作成するために、単に

npm run build

and copy the dist/ folder to your production server.

とタイプし、本番サーバに dist/ ホルダをコピーます。

■□ Debian9 で試します■□
package.json に script セクションを次のように追加します。

user@deb9-vmw:~/public_html/new-project$ vim package.json
{
  "name": "browserify_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ol": "^5.1.3"
  },
    "parcel-bundler": "^1.9.7"
  }
}
npm start と npm run build を実行します。

user@deb9-vmw:~/new-project$ npm start

> new-project@1.0.0 start /home/user/new-project
> parcel index.html

Server running at http://localhost:1234
✨ Built in 14.58s.

Webブラウザのアドレス欄に

http://localhost/:1234

と入力して Enter キーを押します。


index.js を編集(例えば、"zoom: 1" に修正)して index.html を再読込するとマップが拡大されます。


サーバを停止(Ctrl + c)して npm run build を実行します。

^Cuser@deb9-vmw:~/new-project$ user@deb9-vmw:~/new-project$ npm run build
> new-project@1.0.0 build /home/uer/new-project
> parcel build --public-url . index.html

✨  Built in 33.24s.

dist/new-project.72267420.map    ⚠️  2.38 MB     374ms
dist/new-project.72267420.js      608.47 KB    27.94s
dist/new-project.3e5e72c1.css        3.6 KB     6.87s
dist/index.html                       296 B     4.81s
user@deb9-vmw:~/new-project$ ls
dist  index.html  index.js  node_modules  package-lock.json  package.json
user@deb9-vmw:~/new-project$ ls -l dist/
合計 7804
-rw-r--r-- 1 user user     339  8月 16 11:09 index.html
-rw-r--r-- 1 user user    3688  8月 16 11:02 new-project.3e5e72c1.css
-rw-r--r-- 1 user user  623078  8月 16 11:02 new-project.72267420.js
-rw-r--r-- 1 user user 2497278  8月 16 11:02 new-project.72267420.map
-rw-r--r-- 1 user user    4478  8月 16 11:09 new-project.890281e4.css
-rw-r--r-- 1 user user 1907618  8月 16 11:20 new-project.890281e4.js
-rw-r--r-- 1 user user 2940632  8月 16 11:20 new-project.890281e4.map
■□ここまで■□

OpenLayers5 Tutorials - 1a Building an OpenLayers Application

Introduction
はじめに

Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the ol package. This tutorial walks you through setting up a simple dev environment, which requires node for everything to work.

モダンな JavaScript は、モジュールを使用して編集するとき最高の動作をします。OpenLayers を使用する推奨される方法は、ol パッケージをインストールすることです。このチュートリアルは、動作するすべての node を必要とする簡単な開発環境を設定をします。

In this tutorial, we will be using Parcel to bundle our application. There are several other options, some of which are linked from the README.

このチュートリアルは、アプリケーションをパンドルするための Parcel を使用します。他にもいくつかのオプションがあり、README からリンクされたものもあります。


■□ Debian9 で試します■□
Debian9(stretch)に、最新の Node.js をインストールしてみます。Debian9.5 にアップデートしたとき、更新されなかった APT も修正しています。

「How to Install Latest NodeJs & NPM on Debian 9/8/7(https://tecadmin.net/install-latest-nodejs-npm-on-debian/)」と「パッケージマネージャを利用した Node.js のインストール(https://nodejs.org/ja/download/package-manager/)」、「NodeSource Node.js Binary Distributions(https://github.com/nodesource/distributions)」を参考にします。

最初に、「curl」をインストールします。「curl(https://curl.haxx.se/)」は、コマンドライン、または、スクリプトでデータを転送するために使用されます。

root@deb9-vmw:~# apt-cache policy curl
curl:
  インストールされているバージョン: (なし)
  候補:               7.52.1-5+deb9u6
  バージョンテーブル:
     7.52.1-5+deb9u6 500
        500 http://ftp.jp.debian.org/debian stretch/main amd64 Packages
user@deb9-vmw:~$ su -
パスワード:
root@deb9-vmw:~# apt-get install curl
root@deb9-vmw:~# apt-cache policy curl
curl:
  インストールされているバージョン: 7.52.1-5+deb9u6
  候補:               7.52.1-5+deb9u6
  バージョンテーブル:
 *** 7.52.1-5+deb9u6 500
        500 http://ftp.jp.debian.org/debian stretch/main amd64 Packages
        100 /var/lib/dpkg/status
次に、node.js をインストールします。一緒に NPM もインストールされます。「npm(https://www.npmjs.com/)」は、JavaScript と世界最大のソフトウェアレジストリのパッケージマネージャです。
root@deb9-vmw:~# curl -sL https://deb.nodesource.com/setup_8.x | bash -

## Installing the NodeSource Node.js 8.x LTS Carbon repo...


## Populating apt-get cache...

+ apt-get update
無視:1 http://ftp.jp.debian.org/debian stretch InRelease
---
無視:15 http://deb.debian.org/debian stretch/updates/main DEP-11 64x64 Icons
パッケージリストを読み込んでいます... 完了
W: http://ftp.jp.debian.org/debian/dists/stretch-updates/InRelease: The key(s) in the keyring /etc/apt/trusted.gpg are ignored as the file is not readable by user '_apt' executing apt-key.
W: http://ftp.jp.debian.org/debian/dists/stretch/Release.gpg: The key(s) in the keyring /etc/apt/trusted.gpg are ignored as the file is not readable by user '_apt' executing apt-key.
W: リポジトリ http://deb.debian.org/debian stretch/updates Release には Release ファイルがありません。
N: このようなリポジトリから取得したデータは認証できないので、データの使用は潜在的に危険です。
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
E: http://deb.debian.org/debian/dists/stretch/updates/main/source/Sources の取得に失敗しました  404  Not Found [IP: 151.101.196.204 80]
E: いくつかのインデックスファイルのダウンロードに失敗しました。これらは無視されるか、古いものが代わりに使われます。
Error executing command, exiting

次に、node.js をインストールします。一緒に NPM もインストールされます。「npm(https://www.npmjs.com/)」は、JavaScript と世界最大のソフトウェアレジストリのパッケージマネージャです。

root@deb9-vmw:~# apt-get install -y nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
以下の追加パッケージがインストールされます:
  libuv1
以下のパッケージが新たにインストールされます:
  libuv1 nodejs
アップグレード: 0 個、新規インストール: 2 個、削除: 0 個、保留: 0 個。
3,524 kB 中 0 B のアーカイブを取得する必要があります。
この操作後に追加で 14.5 MB のディスク容量が消費されます。
以前に未選択のパッケージ libuv1:amd64 を選択しています。
(データベースを読み込んでいます ... 現在 174735 個のファイルとディレクトリがインストールされています。)
.../libuv1_1.9.1-3_amd64.deb を展開する準備をしています ...
libuv1:amd64 (1.9.1-3) を展開しています...
以前に未選択のパッケージ nodejs を選択しています。
.../nodejs_4.8.2~dfsg-1_amd64.deb を展開する準備をしています ...
nodejs (4.8.2~dfsg-1) を展開しています...
libuv1:amd64 (1.9.1-3) を設定しています ...
libc-bin (2.24-11+deb9u3) のトリガを処理しています ...
man-db (2.7.6.1-2) のトリガを処理しています ...
nodejs (4.8.2~dfsg-1) を設定しています ...
update-alternatives: /usr/bin/js (js) を提供するために自動モードで /usr/bin/nodejs を使います

それでは、node.js と npm のバージョンを確認します。

root@deb9-vmw:~# exit
ログアウト
user@deb9-vmw:~$ node -v
-su: node: コマンドが見つかりません
user@deb9-vmw:~$ npm -v
-su: npm: コマンドが見つかりません

インストールに失敗しているようです。nodejs のバージョンを見てみると古いバージョンがインストールされています。

root@deb9-vmw:~# nodejs -v
v4.8.2

色々メッセージが表示されていますが、「The key(s) in the keyring /etc/apt/trusted.gpg are ignored as the file is not readable by user '_apt' executing apt-key.」で検索した結果、aptが実行前にサーバが正しいかどうかを公開鍵でするチェックに問題があるようです。『Debian テスト版の「apt-get update時の警告メッセージ」(https://blogs.yahoo.co.jp/jeaou/40499468.html)』を参考に次のようにしました。
以前から Synaptic パッケージマネージャで「パッケージ情報の再読込」を実行すると同様のメッセージが表示されていました。

nodejs を削除します。

root@deb9-vmw:~# apt remove nodejs
root@deb9-vmw:~# apt autoremove

公開鍵を /etc/apt/trusted.gpg に変更します。

root@deb9-vmw:~# mv /etc/apt/trusted.gpg /etc/apt/trusted.gpg_org
root@deb9-vmw:~# cp /usr/share/keyrings/debian-archive-keyring.gpg /etc/apt/trusted.gpg

「W: リポジトリ http://deb.debian.org/debian stretch/updates Release には Release ファイルがありません。」で検索した結果、 /etc/apt/sources.list の「deb http://deb.debian.org/debian/ stretch/updates」に問題があるようです。「Debian: The repository does not have a Release file(https://unix.stackexchange.com/questions/371890/debian-the-repository-does-not-have-a-release-file)」を参考に /etc/apt/sources.list の次の行を修正します。

root@deb9-vmw:~# vim /etc/apt/sources.list
---
# deb http://deb.debian.org/debian/ stretch/updates main
# deb-src http://deb.debian.org/debian/ stretch/updates main

deb http://security.debian.org/debian-security stretch/updates main
deb-src http://security.debian.org/debian-security stretch/updates main
---

再度、node.js をインストールします。
root@deb9-vmw:~# curl -sL https://deb.nodesource.com/setup_8.x | bash -

## Installing the NodeSource Node.js 8.x LTS Carbon repo...


## Populating apt-get cache...

+ apt-get update
無視:1 http://ftp.jp.debian.org/debian stretch InRelease
ヒット:2 http://ftp.jp.debian.org/debian stretch-updates InRelease        
ヒット:3 http://ftp.jp.debian.org/debian stretch Release                       
ヒット:4 http://security.debian.org/debian-security stretch/updates InRelease  
パッケージリストを読み込んでいます... 完了                 

## Installing packages required for setup: apt-transport-https...

+ apt-get install -y apt-transport-https > /dev/null 2>&1

## Confirming "stretch" is supported...

+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_8.x/dists/stretch/Release'

## Adding the NodeSource signing key to your keyring...

+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK

## Creating apt sources list file for the NodeSource Node.js 8.x LTS Carbon repo...

+ echo 'deb https://deb.nodesource.com/node_8.x stretch main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_8.x stretch main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
無視:1 http://ftp.jp.debian.org/debian stretch InRelease
ヒット:2 http://ftp.jp.debian.org/debian stretch-updates InRelease             
ヒット:3 http://ftp.jp.debian.org/debian stretch Release                       
ヒット:4 http://security.debian.org/debian-security stretch/updates InRelease  
取得:6 https://deb.nodesource.com/node_8.x stretch InRelease [4,647 B]
取得:7 https://deb.nodesource.com/node_8.x stretch/main Sources [762 B]
取得:8 https://deb.nodesource.com/node_8.x stretch/main amd64 Packages [1,006 B]
6,415 B を 1秒 で取得しました (5,263 B/s)
パッケージリストを読み込んでいます... 完了

## Run `sudo apt-get install -y nodejs` to install Node.js 8.x LTS Carbon and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn
root@deb9-vmw:~# apt-get install -y nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
以下のパッケージが新たにインストールされます:
  nodejs
アップグレード: 0 個、新規インストール: 1 個、削除: 0 個、保留: 0 個。
12.7 MB のアーカイブを取得する必要があります。
この操作後に追加で 61.4 MB のディスク容量が消費されます。
取得:1 https://deb.nodesource.com/node_8.x stretch/main amd64 nodejs amd64 8.11.3-1nodesource1 [12.7 MB]
12.7 MB を 9秒 で取得しました (1,380 kB/s)
以前に未選択のパッケージ nodejs を選択しています。
(データベースを読み込んでいます ... 現在 174743 個のファイルとディレクトリがインストールされています。)
.../nodejs_8.11.3-1nodesource1_amd64.deb を展開する準備をしています ...
nodejs (8.11.3-1nodesource1) を展開しています...
nodejs (8.11.3-1nodesource1) を設定しています ...
man-db (2.7.6.1-2) のトリガを処理しています ...
それでは、node.js と npm のバージョンを確認します。

root@deb9-vmw:~# exit
ログアウト
user@deb9-vmw:~$ node -v
v8.11.3
user@deb9-vmw:~$ npm -v
5.6.0

java のバージョンを確認します。(Debian 9 - 10 Eclipse 4.7 "Oxygen" の設定(2017年7月13日木曜日のブログ)で Java を設定しました。)

user@deb9-vmw:~$ java -version
java version "1.8.0_171"
OpenJDK Runtime Environment (build 1.8.0_171-8u171-b11-1~deb9u1-b11)
OpenJDK 64-Bit Server VM (build 25.171-b11, mixed mode)

node.js のインストールをテストするために、webサーバを作成します。次の内容で http_sever.js を作成します。

user@deb9-vmw:~$ vim http_server.js
var http = require('http');
http.createServer(function (req, res) {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

次のコマンドで web サーバを起動します。

user@deb9-vmw:~$ node http_server.js
Server running at http://127.0.0.1:3000/

Webブラウザのアドレス欄に

http://127.0.0.1:3000/

と入力して Enter キーを押します。


■□ここまで■□

続く...

OpenLayers5 Tutorials - 0

Tutorials
チュートリアル

ここでは、OpenLayers の Docs(Documentation[http://openlayers.org/en/latest/doc/])の「For a more in-depth overview of OpenLayers core concepts, check out the tutorials.」のリンク先にある「Tutorials(http://openlayers.org/en/latest/doc/tutorials/)」の各項目


● Building an OpenLayers Application
OpenLayers アプリケーションの構築
● Basic Concepts
基本コンセプト
● Some Background on OpenLayers
OpenLayers に関わるバックグラウンド
● Raster Reprojection
ラスタの再投影

を訳してみました。サイトに搭載されている画像などは使用していません。

OpenLayers5 - Quick Start

Quick Start(http://openlayers.org/en/latest/doc/quickstart.html)を参考に、OpenLayers を使ってみます。

Eclipse にプロジェクトを作成して試してみました。
Eclipseを起動します。

user@deb9-vmw:~$ eclipse

プロジェクトを作成します。
a メニューの「ファイル」 -> 「新規」 -> 「静的 Web プロジェクト」をクリックします。(または、「新規 」ボタン -> 「静的 Web プロジェクト」をクリックします。)


b 「新規静的 Web プロジェクト」ウィンドウで「プロジェクト名」(例えばol5proj)を入力して「完了」ボタンをクリックします。




Quick Start

This primer shows you how to put a simple map on a web page.

この入門は、ウェブページに単純なマップを置く方法を示します。

For production, we strongly recommend bundling the application together with its dependencies, as explained in the Building an OpenLayers Application tutorial.

製作のために、Building an OpenLayers Application tutorial に説明されているように、 アプリケーションを付属品とともにビルドすることを強く勧めます。

Put a map on a page

Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:

下記に完全に動作する例が見られます。新しいファイル(訳注:例えば、Eclipse の HTML ファイル)を作成し、コンテンツにコピーし、ブラウザで開きます。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/css/ol.css" type="text/css">
  <style>
   .map {
    height: 400px;
    width: 100%;
   }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/build/ol.js"" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h2>My Map</h2>
  <div id="map" class="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      source: new ol.sourceOSM()
     })
    ],
    view: new ol.View({
     center: ol.proj.fromLonLat([37.41, 8.82]),
     zoom: 4
    })
   });
  </script>
 </body>
</html>

Understanding what is going on
どうなっているか理解する

To include a map a web page you will need 3 things:
地図をWebページに含めるには3つのことが必要になります:

1. Include OpenLayers
2. <div> map container
3. JavaScript to create a simple map

1. OpenLayers を読み込む。
2. <div>マップコンテナ。
3. 単純なマップを作成するための JavaScript.

Include OpenLayers
OpenLayers を読み込む

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/build/ol.js"></script>

The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.

最初の部分は、JavaScriptライブラリを読み込むためです。このチュートリアルの目的のために、ここではライブラリ全体を取得するために openlayers.org ウェブサイトを単に示しています。本番環境では、アプリケーションに必要なモジュールだけを含むライブラリのカスタムバージョンをビルドしています。

Optional: If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:

オプション: アプリケーションが Internet Explorer や Android 4.x などの古いプラットフォームで実行される場合は、OpenLayers の前に別のスクリプトが読み込まれる必要があります。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>

<div> to contain the map
map を含む <div>

<div id="map" class="map"></div>

The map in the application is contained in a <div> HTML element. Through this <div> the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.

アプリケーション内の map(マップオブジェクト)は <div> HTML エレメントに入れます。この <div> により、幅、高さ、および境界線のような map のプロパティは、CSSで制御できます。ここに示したのは、400ピクセルの高さとブラウザウィンドウと同じ幅の地図を作るために使用されるCSSエレメントです。
<style>
 .map {
  height: 400px;
  width: 100%;
 }
</style>

JavaScript to create a simple map
単純なマップを作成するための JavaScript
var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: ol.proj.fromLonLat([37.41, 8.82]),
  zoom: 4
 })
});

With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:

この JavaScript コードを使用して、map オブジェクトは、アフリカ東海岸にズームされた OSM レイヤで作成されます。それでは、これを詳しくみてみましょう。

The following line creates an OpenLayers Map object. Just by itself, this does nothing since there's no layers or interaction attached to it.

次の行は、OpenLayers の Map オブジェクトを作成します。レイヤやそれに接続したインタラクションがないので、これは、それ自体だけでは、何もしません。

var map = new ol.Map({ ... });

To attach the map object to the <div>, the map object takes a target into arguments. The value is the id of the <div>:

map オブジェクトを <div> タグに配置するには、map オブジェクトは引数に、target を取ります。<div> の id 属性の(属性)値になります。

target: 'map'

The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:

layers:[...] 配列は、マップで使用可能なレイヤのリストを定義するために使用されます。最初で唯一のレイヤは今のところタイルレイヤです。
layers: [
 new ol.layer.Tile({
  source: new ol.source.OSM()
 })
]
Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.

OpenLayers のレイヤは、ソースを含む形式(画像やタイル、ベクタ)で定義されます。 ソースは、マップタイルを取得するために使用されるプロトコルです

The next part of the Map object is the View. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.

Map オブジェクトの次の部分は、View です。view は、地図の中心、解像度、回転を指定することができます。view を定義する最も簡単な方法は、中心点とズームレベルを定義することです。ズームレベル0はズームアウトされていることに注意してください。
view: new ol.View({
 center: ol.proj.fromLonLat([37.41, 8.82]),
 zoom: 4
})
You will notice that the center specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

指定された中心は、緯度/経度の座標(EPSG:4326)であることがわかります。 使用する唯一のレイヤが球状メルカトル図法(EPSG:3857)なので、正しい座標にマップをズームする(焦点を合わす)ことができるように、それらを即座に再投影することができます。

v5.1.0 がリリースされました

v5.1.3 がリリースされました
日本時間で(2018.7.23)に v5.1.3がリリースされました。

Releases 5.1.3 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v5.1.3)より

The v5.1.3 is a patch to fixe the API docs and the legacy full build. See the 5.1.0 notes for detail on the 5.1 release.

5.1.3 は、API docs とレガシー(過去の蓄積)のフルビルドを修正するパッチです。5.1 リリースの詳細の 5.1.0 notes を参照してください。


v5.1.2 がリリースされました
日本時間で(2018.7.22)に v5.1.2 がリリースされました。

Releases 5.1.2 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v5.1.2)より

The v5.1.2 release is a patch to fixe the API docs. See the 5.1.0 notes for detail on the 5.1 release.

5.1.2 リリースは、API docs を修正するパッチです。5.1 リリースの詳細の 5.1.0 notes を参照してください。


v5.1.1 がリリースされました
日本時間で(2018.7.22)に v5.1.1 がリリースされました。

Releases 5.1.1 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v5.1.1)より


The 5.1.1 release is a patch to include the readme in the package. See the 5.1.0 notes for detail on the 5.1 release.

5.1.1 リリースは、パッケージの readme を含むためのパッチです。5.1 リリースの詳細の 5.1.0 notes を参照してください。



v5.1.0 がリリースされました
日本時間で(2018.7.22)に v5.1.0 がリリースされました。

Releases 5.1.0 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v5.1.0)より


The 5.1 release adds a few new features a handful of fixes. You should be able to upgrade without any additional work. See the one note below regarding null geometry coordinates.

5.1 リリースは、2、3の新機能と少しの修正を追加します。追加の作業なしでアップグレードできます。空地理座標だとみなす下記の注意を参照してください。

We're working toward type checking with TypeScript. This will complete our move away from using the Closure Compiler for type checking and compilation. We're excited about the improved experience for application developers and will highlight some of the benefit in upcoming releases.

TypeScript を使用するタイプチェックに向かって作業しています。これはタイプチェックとコンパイルのための Closure Compiler を使用することからの離脱を完成します。アプリケーション開発者の向上された実験について刺激され、次のリリースでいくつかの恩恵を強調します。

Upgrade Notes

Geometry constructor and setCoordinates no longer accept null coordinates

Geometry コンストラクタと setCoordinates は、空座標をもう受け取らない

Geometries (ol/geom/*) now need to be constructed with valid coordinates (center for ol/geom/Circle) as first constructor argument. The same applies to the setCoordinates() (setCenter() forol/geom/Circle`) method.

Geometry (ol/geom/*) は、最初のコンストラクタ引数として有効な座標 (center for ol/geom/Circle) で構成されることが現在必要です。同じことは、setCoordinates() (setCenter() forol/geom/Circle`) メソッドに適用されます。


(New Features and Fixes は、リストを参照して下さい。)