4 Raster Operations
ラスタ操作
Up to this point, when we have used raster data (with an XYZ tile source for example), we have used it for presentation purposes only — rendering the data directly to the map. It is also possible to work with the pixel values in the data we fetch, run operations on these values, and manipulate things before rendering. The Raster source provides a way to run pixel-wise operations on data from any number of input sources. When the source is used in an Image layer, the result of the raster operation can be rendered on the map.
ここまでで、（example の XYZ タイルソースを使用した）ラスタデータ使うとき、プレゼンテーション目的だけで使い、データを直接マップに描画します。描画前にものを取得して、これらの値に関する操作を実行し、操作するデータにピクセル値で動作することも可能です。ラスタソースは、任意の数の入力ソースからデータに関するピクセル関連の操作を実行する方法を提供します。ソースはイメージ（Image）レイヤで使用されるとき、ラスタ操作の結果は、マップ上に描画されます。
In these exercises, we'll work with elevation data served as XYZ tiles. Instead of rendering the encoded elevation data directly, we'll run a pixel-wise operation on the data before rendering.
この演習で、 XYZ アイルとして供給される標高データを使って作業します。エンコードされた標高データを直接描画するかわりに、描画の前にデータに関するピクセル関連の操作を実行します。
● Map setup
● Render elevation data
● Render sea level
● マップ装備
● 標高データを描画
● 海抜を描画
4.1 Map setup
マップ装備
Edit your index.html so we're ready to render a full page map:
全画面マップを描画する準備のために index.html を編集します：
We'll start out with a map centered on Boston showing a single XYZ source. Update your main.js so it looks like this:
単一の XYZ ソースを表示するボストンを中心としたマップで始めます。このように見えるように main.js を更新します：
A map of Boston
ラスタ操作
Up to this point, when we have used raster data (with an XYZ tile source for example), we have used it for presentation purposes only — rendering the data directly to the map. It is also possible to work with the pixel values in the data we fetch, run operations on these values, and manipulate things before rendering. The Raster source provides a way to run pixel-wise operations on data from any number of input sources. When the source is used in an Image layer, the result of the raster operation can be rendered on the map.
ここまでで、（example の XYZ タイルソースを使用した）ラスタデータ使うとき、プレゼンテーション目的だけで使い、データを直接マップに描画します。描画前にものを取得して、これらの値に関する操作を実行し、操作するデータにピクセル値で動作することも可能です。ラスタソースは、任意の数の入力ソースからデータに関するピクセル関連の操作を実行する方法を提供します。ソースはイメージ（Image）レイヤで使用されるとき、ラスタ操作の結果は、マップ上に描画されます。
In these exercises, we'll work with elevation data served as XYZ tiles. Instead of rendering the encoded elevation data directly, we'll run a pixel-wise operation on the data before rendering.
この演習で、 XYZ アイルとして供給される標高データを使って作業します。エンコードされた標高データを直接描画するかわりに、描画の前にデータに関するピクセル関連の操作を実行します。
● Map setup
● Render elevation data
● Render sea level
● マップ装備
● 標高データを描画
● 海抜を描画
4.1 Map setup
マップ装備
Edit your index.html so we're ready to render a full page map:
全画面マップを描画する準備のために index.html を編集します：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
単一の XYZ ソースを表示するボストンを中心としたマップで始めます。このように見えるように 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';
new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: fromLonLat([-71.06, 42.37]),
zoom: 12
})
});
■□ Debian9 で試します■□
「Map setup」の例を表示します。「Making things look bright」で使用した index.html のバックアップを保存して次のように修正します。
user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_bright
user@deb9-vmw:~/openlayers-workshop-en$ vim index.html
「Making things look bright」で使用した main.js のバックアップを保存して次のように修正します。user@deb9-vmw:~/openlayers-workshop-en$ vim index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_bright
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
http://localhost:3000/ とブラウザでマップを開きます。（もし開かなければ、'npm start' を実行してください。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';
new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: fromLonLat([-71.06, 42.37]),
zoom: 12
})
});
0 件のコメント:
コメントを投稿