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 ) 、全体のズームレベルに単一の解像度を適用すると、いくつかのタイルが拡大/縮小され、ロードされる膨大な数のソースタイルを必要とする可能性があります。したがって、解像度マッピングは (タイル範囲の中央に) 再投影されたタイルごとに個別に計算されます。

0 件のコメント: