OpenLayers5 Workshop - 4.2 Render elevation data

4 Raster Operations
4.2 Render elevation data
標高データを描画

We're going to work with elevation data that is encoded in PNG tiles (see the Mapbox post on Terrain-RGB for more detail). For this exercise, you'll need to sign up for a Mapbox account and use your access token for tiles.

PNG（ピングフォーマット画像）タイルでエンコードされる elevation（標高）データを使って作業します（さらに詳細は Mapbox に搭載の Terrain-RGB を参照）。この演習のために、Mapbox アカウントのサインアップとタイルのためのアクセストークンを使うことが必要です。

Add your default public token to main.js:

デフォルトのパブリックトークンを main.js を追加します：

const key = '<your-default-public-token>';

We want to manipulate the elevation data before rendering, but initially we'll add the Terrain-RGB tiles to the map just to see what they look like. To do this, create an XYZ source with the Terrain-RGB URL and your access token.

描画の前に elevation データを操作したいのですが、最初に、どのように見えるか単に見るため、Terrain-RGB タイルをマップに追加します。これを実行するため、Terrain-RGB URL とアクセストークンで XYZ ソースを作成します。

const elevation = new XYZSource({
 url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
 crossOrigin: 'anonymous'
});

Next, create a tile layer that uses the elevation source. Add this layer your map's layers array in main.js:

次に、elevation ソースを使うタイルレイヤを作成します。 main.js でこのレイヤをマップレイヤ配列に追加します：

new TileLayer({
 opacity: 0.8,
 source: elevation
})

You should now see some oddly colored tiles shown over your base layer. The elevation data in the Terrain-RGB tiles is encoded in the red, green, and blue channels. So while this data isn't meant to be rendered directly, it is interesting to look at.

ベースレイヤを覆って表示される奇妙なカラータイルが見られます。Terrain-RGB タイルの標高データは、赤、緑、青チャンネルにエンコードされます。このデータは、直接描画されるものではありませんが、見るのは興味深いです。

Terrain-RGB tiles rendered over Boston

■□ Debian9 で試します■□
「Render elevation data」の例を表示します。「Map setup」で使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_mapsetup
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

const key = '<your-default-public-token>';

const elevation = new XYZSource({
 url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
 crossOrigin: 'anonymous'
});

new Map({
 target: 'map-container',
 layers: [
  new TileLayer({
   source: new XYZSource({
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
   })
  }),
  new TileLayer({
   opacity: 0.8,
   source: elevation
  })
 ],

 view: new View({
  center: fromLonLat([-71.06, 42.37]),
  zoom: 12
 })
});

http://localhost:3000/ とブラウザでマップを開きます。（もし開かなければ、'npm start' を実行してください。