2018年9月26日水曜日

OpenLayers5 Workshop - 2.7 Making it look nice

2 Vector Data
2.7 Making it look nice
見栄えを良くする

At this point we have a feature editor with basic import, editing, and export functionality. But we haven't spent any time trying to make the features look nice. When you create a vector layer in OpenLayers, you get a set of default styles. The editing interactions (draw and modify) also come with their own default styles. You may have noticed how geometries had a thicker stroke during editing. This behavior can be controlled by providing a style option to your vector layer and editing interactions.

このポイントは、基本的なインポートと編集、エクスポート機能があるフィーチャエディタがあります。しかし、フィーチャの見栄えを良くさせる試みに全く時間を使っていません。OpenLayers でベクタレイヤを作成するとき、一連のデフォルトスタイルを取得します。editing インストラクション(draw と modify)も、それら自身のデフォルトスタイルを備えています。ジオメトリは編集中により太いストロークをどのように持っていたか気がついているでしょう。この動作は、ベクタレイヤにスタイルオプションと editing インストラクションを提供することによって制御されます。

Static style
静的スタイル

If we wanted to give all features the same style, we could configure our vector layer like this:

もしすべてのフィーチャに同じスタイルを与えるなら、ベクタレイヤをこのように設定します:
const layer = new VectorLayer({
 source: source,
 style: new Style({
  fill: new Fill({
   color: 'red'
  }),
  stroke: new Stroke({
   color: 'white'
  })
 })
});
It is also possible to set the style property to an array of styles. This allows rendering of a cased line (a wide stroke below and a narrower one on top), for example.

スタイルプロパティをスタイルの配列に設定することも可能です。例えば、台形ライン(下が広く上が狭いストローク)の描画を許可します。

While there isn't really a good justification of it here, for the sake of this exercise we'll take advantage of dynamic styling.

その良い根拠はここには本当にないですが、この演習のために、動的スタイリングの有利な点を使用します。

Dynamic style
動的スタイル

When you want to make decisions about how each feature should get rendered based on something about the feature or the current view resolution, you can configure a vector layer with a style function. This function gets called with each feature at each render frame, so it is important to write an efficient function if you have many features and want to maintain good rendering performance.

各々のフィーチャがフィーチャと現在のビューの投影法を元に描画される方法について決定するとき、ベクタレイヤをスタイル(style)ファンクションで設定できます。このファンクションは各々の描画フレームの各々のフィーチャで呼び出されるので、多くのフィーチャがあり良好な描画パフォーマンスを維持したいなら効率的なファンクションを書くことが重要です。

Here is an example that renders features using one of two styles depending on whether the "name" attribute starts with "A-M" or "N-Z" (a completely contrived example).

ここに "name" 属性が "A-M" または "N-Z" で開始するかによる2つのスタイルの1つを使用してフィーチャを描画する(全く不自然な)例があります。
const layer = new VectorLayer({
 source: source,
 style: function(feature, resolution) {
  const name = feature.get('name').toUpperCase();
  return name < "N" ? style1 : style2; // assuming these are created elsewhere
 }
});
Styling based on geometry area
ジオメトリエリアを元とするスタイリング

To see how dynamic styling works, we'll create a style function that renders features based on the geometry area. To do this, we're going to make use of a colormap package on npm. We can add this to our dependencies like this:

動的スタイリングがどのように動作するかを確認するために、ジオメトリエリアを元とするフィーチャを描画するスタイルファンクションを作成します。これを実行するために、npm の colormap パッケージを使用します。これを依存関係にこのように追加します:

npm install colormap

Now, we need to import the style constructors, the colormap package, and ol/sphere for spherical area calculations.

では、スタイルコンストラクタと colormap パッケージ、球面の計算のための ol/sphere をインポートします。
import {Fill, Stroke, Style} from 'ol/style';
import {getArea} from 'ol/sphere';
import colormap from 'colormap';
Next we'll write a couple functions to determine a color based on the area of a geometry:

次に、ジオメトリの面積をもととする色を決定する対のファンクションを書きます:
const min = 1e8; // the smallest area
const max = 2e13; // the biggest area
const steps = 50;
const ramp = colormap({
 colormap: 'blackbody',
 nshades: steps
});
function clamp(value, low, high) {
 return Math.max(low, Math.min(value, high));
}
function getColor(feature) {
 const area = getArea(feature.getGeometry());
 const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
 const index = Math.round(f * (steps - 1));
 return ramp[index];
}
And now we can add a function that creates a style with a fill color based on the geometry area. Set this function as the style property of your vector layer:

それでは、ジオメトリの面積をもとに塗りつぶし色(fill color)でスタイルを作成するのファンクションを追加できます。このファンクションをベクタレイヤのスタイルプロパティとして設定します:
const layer = new VectorLayer({
 source: source,
 style: function(feature) {
  return new Style({
   fill: new Fill({
    color: getColor(feature)
   }),
   stroke: new Stroke({
    color: 'rgba(255,255,255,0.8)'
   })
  });
 }
});
Features colored by area

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

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_dawnload user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';
import sync from 'ol-hashed';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);
const source = new VectorSource();

const layer = new VectorLayer({
 source: source,
 style: new Style({
  fill: new Fill({
   color: 'red'
  }),
  stroke: new Stroke({
   color: 'white'
  })
 })
});
map.addLayer(layer);
map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

map.addInteraction(new Snap({
 source: source
}));
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
 const features = source.getFeatures();
 const json = format.writeFeatures(features);
 download.href = 'data:text/json;charset=utf-8,' + json;
});
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。


「Dynamic style」の例を表示します。main.js を次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';
import sync from 'ol-hashed';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();
/**
 * const layer = new VectorLayer({
 *  source: source,
 *  style: new Style({
 *   fill: new Fill({
 *    color: 'red'
 *    }),
 *   stroke: new Stroke({
 *    color: 'white'
 *   })
 *  })
 * });
 */
const layer = new VectorLayer({
 source: source,
 style: function(feature, resolution) {
  const name = feature.get('name').toUpperCase();
   return name < "N" ? style1 : style2;
 }
});
const style1 = new Style({
 fill: new Fill({
  color: 'red'
  }),
 stroke: new Stroke({
  color: 'white'
 })
});
const style2 = new Style({
 fill: new Fill({
  color: 'blue'
  }),
 stroke: new Stroke({
  color: 'yellow'
 })
});
map.addLayer(layer);
map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

map.addInteraction(new Snap({
 source: source
}));
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
 const features = source.getFeatures();
 const json = format.writeFeatures(features);
 download.href = 'data:text/json;charset=utf-8,' + json;
});
http://localhost:3000/ とブラウザでマップを開きます。


「Styling based on geometry area」の例を表示します。 colormap パッケージをインストールします。

npm install colormap

main.js を次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';
import sync from 'ol-hashed';
import {Fill, Stroke, Style} from 'ol/style';
import {getArea} from 'ol/sphere';
import colormap from 'colormap'; 
const min = 1e8; // the smallest area
const max = 2e13; // the biggest area
const steps = 50;
const ramp = colormap({
 colormap: 'blackbody',
 nshades: steps
});
function clamp(value, low, high) {
 return Math.max(low, Math.min(value, high));
}
function getColor(feature) {
 const area = getArea(feature.getGeometry());
 const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
 const index = Math.round(f * (steps - 1));
 return ramp[index];
}
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();
/**
 * const layer = new VectorLayer({
 *  source: source,
 *  style: new Style({
 *   fill: new Fill({
 *    color: 'red'
 *    }),
 *   stroke: new Stroke({
 *    color: 'white'
 *   })
 *  })
 * });
 */
/**
 * const layer = new VectorLayer({
 *  source: source,
 *  style: function(feature, resolution) {
 *   const name = feature.get('name').toUpperCase();
 *    return name < "N" ? style1 : style2;
 *  }
 * });
 * const style1 = new Style({
 *  fill: new Fill({
 *   color: 'red'
 *   }),
 *  stroke: new Stroke({
 *   color: 'white'
 *  })
 * });
 * const style2 = new Style({
 *  fill: new Fill({
 *   color: 'blue'
 *   }),
 *  stroke: new Stroke({
 *   color: 'yellow'
 *  })
 * });
 */
const layer = new VectorLayer({
 source: source,
 style: function(feature) {
  return new Style({
   fill: new Fill({
    color: getColor(feature)
   }),
   stroke: new Stroke({
    color: 'rgba(255,255,255,0.8)'
   })
  });
 }
});
map.addLayer(layer);
map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

map.addInteraction(new Snap({
 source: source
}));
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
 const features = source.getFeatures();
 const json = format.writeFeatures(features);
 download.href = 'data:text/json;charset=utf-8,' + json;
});
http://localhost:3000/ とブラウザでマップを開きます。


OpenLayers5 Workshop - 2.6 Downloading features

2 Vector Data
2.6 Downloading features
フィーチャをダウンロード

After uploading data and editing it, we want to let our users download the result. To do this, we'll serialize our feature data as GeoJSON and create an <a> element with a download attribute that triggers the browser's file save dialog. At the same time, we'll add a button to the map that let's users clear existing features and start over.

データをアップロードして編集した後、ユーザが結果をダウンロードできるようにします。これをするために、フィーチャデータを GeoJSON としてシリアル化し、ブラウザのファイル保存ダイアログをトリガ(動作開始)する download 属性と共う <a> エレメントを作成します。同時に、ユーザが既存のフィーチャを削除し、やり直すボタンをマップに追加します。

First, we need a bit of markup to represent the buttons. Add the following elements below the map-container in your index.html:

最初に、ボタンを表示する少しのマークアップが必要です。index.html の map-container の下に次のエレメントを追加します:
<div id="tools">
 <a id="clear">Clear</a>
 <a id="download" download="features.json">Download</a>
</div>
Now we need some CSS to make the buttons look right. Add something like this to the <style> element in index.html:

次に、右の方に見えるボタンを作るためのいくつかの CSS が必要です。 index.html にこのようなものを <style> エレメントに追加します:
#tools {
 position: absolute;
 top: 1rem;
 right: 1rem;
}
#tools a {
 display: inline-block;
 padding: 0.5rem;
 background: white;
 cursor: pointer;
}
Clearing features is the easier part, so we'll do that first. The vector source has a source.clear() method. We want clicks on the "Clear" button to call that method, so we'll add a listener for click in our main.js:

フィーチャの削除は簡単な部分なので、最初に行います。ベクタソース(vector source)は source.clear() メソッドがあります。メッソドを呼び出すために "Clear" ボタンをクリックしたいので、main.js に click のリスナを追加します:
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});
To serialize our feature data for download, we'll use a GeoJSON format. Since we want the "Download" button to work at any time during editing, we'll serialize features on every change event from the source and construct a data URI for the anchor element's href attribute:

ダウンロード用のフィーチャデータをシリアル化するために、GeoJSON フォーマットを使います。編集中いつでも動作する "Download" ボタンがほしいので、いつの change イベントでもソースからフィーチャをシリアル化し、アンカーエレメントの href 属性用のデータ URI を構築します:
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
 const features = source.getFeatures();
 const json = format.writeFeatures(features);
 download.href = 'data:text/json;charset=utf-8,' + json;
});
Buttons to clear and download data

■□ Debian9 で試します■□
前回使用した index.html のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_snap
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;
    background-color: #04041b;
   }
   #tools {
    position: absolute;
    top: 1rem;
    right: 1rem;
   }
   #tools a {
    display: inline-block;
    padding: 0.5rem;
    background: white;
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
  <div id="tools">
   <a id="clear">Clear</a>
   <a id="download" download="features.json">Download</a>
  </div>
 </body>
</html>
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_snap user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';
import sync from 'ol-hashed';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

map.addInteraction(new Snap({
 source: source
}));

const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});

const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
 const features = source.getFeatures();
 const json = format.writeFeatures(features);
 download.href = 'data:text/json;charset=utf-8,' + json;
});
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。

三角形を描画します。(地図は表示しません。そのデータもダウンロードされてしまいます。)


「Download」ボタンをクリックします。


ダイアログで「OK」ボタンをクリックします。


ファイルがダウンロードディレクトリに保存されます。


内容は次のようになていました。
{"type":"FeatureCollection","features":
 [{"type":"Feature","geometry":
  {"type":"Polygon","coordinates":
   [[
    [76.76796875,59.17592824927138],
    [56.02578125,40.97989806962016],
    [93.99453125,40.17887331434699],
    [76.76796875,59.17592824927138]
   ]]
  },
  "properties":null
}]}

OpenLayers5 Workshop - 2.5 Snapping

2 Vector Data
2.5 Snapping
スナップ

You may have noticed that it is easy to draw features that don't line up nicely with existing features. In addition, when modifying features, we can break topology — adding a void between polygons that were previously adjacent. The Snap interaction can be used to help preserve topology while drawing and editing features.

既存のフィーチャと一緒にきちんと並ばないフィーチャを描画することは簡単であることに注意します。加えて、フィーチャを変形するとき、トポロジを壊すことができ - 元は隣りにあったポリゴンの間の空所を追加します。Snap インタラクションは、フィーチャを描画および編集する間、トポロジを維持するのに役立てるために使われます。

First, import the Snap interaction into your main.js:

最初に、Snap インタラクションを main.js にインポートします:

import Snap from 'ol/interaction/Snap';

As with the other editing interactions, we'll configure the snap interaction to work with our vector source and add it to the map:

他の編集インタラクションと同様に、ベクタソースで動作し、マップに追加するために snap インタラクションを設定します:

map.addInteraction(new Snap({
 source: source
}));

With the draw, modify, and snap interactions all active, we can edit data while maintaining topology.

draw と modify、snap インタラクションがすべて有効で、トポロジを維持してる間、データを編集できます。

Uniting nations with the snap interaction

■□ Debian9 で試します■□
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_draw user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';
import sync from 'ol-hashed';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

map.addInteraction(new Snap({
 source: source
}));
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。

1辺が接している三角形を作成します。2個めの三角形を作成するとき、頂点にポインタを合わせるのが簡単にできます。

三角形を描画していきます。
頂点を合わせてダブルクリックします。

Snap インタラクションを設定していないと、接する辺を変形させたときに一方の三角形の辺(境界線)しか変形しません。(両方の境界線をつかむのが難しくなります。)


■□ここまで■□

OpenLayers5 Workshop - 2.4 Drawing new features

2 Vector Data
2.4 Drawing new features
新しいフィーチャを描画

Our feature editor can now be used for loading data and modifying features. Next up, we'll add a Draw interaction to allow people to draw new features and add them to our source.

フィーチャエディタは、現在、データをロードしフィーチャを変形することに使用されます。次は、新しいフィーチャを描画しソースに追加すること許可する Draw インタラクションを追加します。

First, import the Draw interaction (in main.js):

最初に、(main.js に)Draw インタラクションをインポートします:

import Draw from 'ol/interaction/Draw';

Now, create a draw interaction configured to draw polygons and add them to our vector source:

次に、ポリゴンを描画するために設定される draw インタラクションを作成しベクタソースに追加します:

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));

The type property of the draw interaction controls what type of geometries are drawn. The value can be any of the GeoJSON geometry types. Note that we could have also imported the GeometryType enum (import GeometryType from 'ol/geom/GeometryType';) and used GeometryType.POLYGON instead of the 'Polygon' string above.

draw インタラクションの type プロパティは、ジオメトリのタイプ(type)が描画されることを制御します。value は、どんな GeoJSON ジオメトリタイプにもできます。GeometryType enum (import GeometryType from 'ol/geom/GeometryType';) をインポートし、そして、上記の 'Polygon' 文字列のかわりに GeometryType.POLYGON を使用していることにも注意してください。

With our draw interaction in place, we can now add new features to our vector source.

適切な draw インタラクションで、ベクタソースに新しいフィーチャを直ちに追加できます。

A new island nation in the Caribbean

■□ Debian9 で試します■□
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_modify
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import Draw from 'ol/interaction/Draw';
import sync from 'ol-hashed';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));

map.addInteraction(new Draw({
 type: 'Polygon',
 source: source
}));
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。

開始点をクリックします。


経過点をクリックします。


終点をダブルクリックします。



■□ここまで■□

OpenLayers5 Workshop - 2.3 Modifying features

2 Vector Data
2.3 Modifying features
フィーチャを変形

Now that we have a way for users to load data into the editor, we want to let them edit features. We'll use the Modify interaction for this, configuring it to modify features on our vector source.

ユーザがデータをエディタにロードする方法があるので、それらにフィーチャを編集させます。このために Modify インストラクションを使い、ベクタソースのフィーチャを変形するためにそれを設定します。

First, import the Modify interaction in your main.js:

最初に、Modify インストラクションを main.js にインポートします:

import Modify from 'ol/interaction/Modify';

Next, create a new interaction connected to the vector source and add it to the map (at the bottom of main.js):

次に、ベクタソースに接続させる新しいインストラクションを作成し map(main.js の下部)に追加します:

map.addInteraction(new Modify({
 source: source
}));

After adding data to the map confirm that you can modify features by dragging their vertices. You can also delete vertices with Alt+Click.

データを map に追加した後に、頂点をドラッグすることによってフィーチャを変形できることを確認します。Alt + Click で頂点を削除することもできます。


■□ Debian9 で試します■□
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_drag-drop user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import Modify from 'ol/interaction/Modify';
import sync from 'ol-hashed';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));

map.addInteraction(new Modify({
 source: source
}));
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。

国境の頂点に沿ってポイントのマークが表示されます。


ドラッグすると国境の頂点が変形されます。ダブルクリックして確定します。


■□ここまで■□

OpenLayers5 Workshop - 2.2 Drag and drop

2 Vector Data
2.2 Drag and drop
ドラッグ・アンド・ドロップ

For our feature editor, we want users to be able to import their own data for editing. We'll use the DragAndDrop interaction for this. As before, we'll stick with the GeoJSON format for parsing features, but the interaction can be configured to work with any number of feature formats.

フィーチャエディタのために、ユーザが編集用の固有のデータをインポートできるようにします。このために DragAndDrop インタラクションを使います。従来通りに、フィーチャをパース(構文解析)するために GeoJSON フォーマットで差し込みますが、インタラクションはいくつかのフィーチャフォーマットで動作するように設定されます。

First of all, we need to assign the map to a constant, so we can access it from other components we're going to add in this exercise:

まず第一に、マップを定数(constant)に割り当てる必要があり、それで、この演習に追加する他のコンポーネントからアクセスできるようにします:

const map = new Map({

Import the drag and drop interaction into your main.js:

main.js にドラッグ・アンド・ドロップインタラクションをインポートします:
import DragAndDrop from 'ol/interaction/DragAndDrop';
Next, we'll create a vector source with no initial data. Instead of loading data from a remote location as in the previous example, this source will store features that the user drags and drops onto the map.

次に、初期値データのないベクタソースを作成します。前述の例と同じように離れた位置からデータをロードするかわりに、このソースは、ユーザがマップ上にドラッグ・アンド・ドロップするフィーチャを格納します。

const source = new VectorSource();

Now, remove the old layers list from the map, create a new layer with our empty vector source, and add it to the map.

では、マップから古いレイヤリストを削除し、空のベクタソースで新しいレイヤを作成し、マップにそれを追加します。
const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);
Finally, we'll create a drag and drop interaction, configure it to work with our vector source, and add it to the map:

最後に、ドラッグ・アンド・ドロップインタラクションを作成し、ベクタソースで動作するためにそれを設定し、マップに追加します:
map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));
Now you should be able to drag and drop GeoJSON files onto the map and see them rendered.

それでは、GeoJSON ファイルをドラッグ・アンド・ドロップさせてそれらが描画されるのを確認します。

■□ Debian9 で試します■□
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$  cp main.js main.js_geojson user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON':
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';
import sync from 'ol-hashed';
const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
 source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
 source: source,
 formatConstructors: [GeoJSON]
}));
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。



■□ここまで■□

OpenLayers5 Workshop - 2.1 Rendering GeoJSON

2 Vector Data

Let's make a feature editor!

In this module, we'll create a basic editor for working with vector data. Our goal is to make it so a user can import data, draw new features, modify existing features, and export the result. We'll be working with GeoJSON data in this module, but OpenLayers supports a broad range of vector formats if you're interested in working with other sources.

このモジュールでは、ベクタデータを使って動作するための基本エディタを作成します。データをインポートし、新しいフィーチャを描き、現在あるフィーチャを変形し、結果をエクスポートします。このモジュールでは GeoJSON データで演習しますが、他のソースで演習することに興味があるなら、OpenLayers は広い範囲のベクタフォーマットをサポートします。

● Rendering GeoJSON
● Drag and drop
● Modifying features
● Drawing new features
● Snapping
● Downloading features
● Making it look nice

● GeoJSON を描画
● ドラッグ・アンド・ドロップ
● フィーチャを変形
● 新しいフィーチャを描画
● スナップ
● フィーチャをダウンロード
● 見栄えを良くする


2.1 Rendering GeoJSON
GeoJSON を描画

Before getting into editing, we'll take a look at basic feature rendering with a vector source and layer. The workshop includes a countries.json GeoJSON file in the data directory. We'll start by just loading that data up and rendering it on a map.

編集に入る前に、ベクタソースとレイヤで描画する基本フィーチャをみてみます。ワークショップはデータディレクトリの countries.json GeoJSON ファイルを含みます。そのデータを読み込み、マップにそれを描画するだけで初めます。

First, 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;
    background-color: #04041b;
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
 </body>
</html>
Now we'll import the three important ingredients for working with vector data:

次に、ベクタデータで動作するために3つの重要な構成要素をインポートします:

● a format for reading and writing serialized data (GeoJSON in this case)
● a vector source for fetching the data and managing a spatial index of features
● a vector layer for rendering the features on the map

● シリアル化されたデータを読み書きするフォーマット(このケースの GeoJSON)
● データを取ってきてフィーチャの空間インデックスを管理するベクタソース
● マップ上にフィーチャを描画するベクタレイヤ

Update your main.js to load and render a local file containing GeoJSON features:

GeoJSON フィーチャを含む(サーバ内の)ローカルファイルをロードし描画するため main.js を更新します:
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
new Map({
 target: 'map-container',
 layers: [
  new VectorLayer({
   source: new VectorSource({
    format: new GeoJSON(),
    url: './data/countries.json'
   })
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 2
 })
});
You should now be able to see a map with country borders at http://localhost:3000/.

http://localhost:3000/ で国境があるマップを見ることができます。

GeoJSON features

Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the ol-hashed package to make this work. Normally we'd install it first (though it should be included with the workshop dependencies already):

ページをよくリロードするので、マップがリロードで残ったた状態なら良いことです。これを動作させるために ol-hashed パッケージを取り入れることができます。(それはすでにワークショップの依存関係と一緒に含まれているので)通常、最初にそれをインストールします:

npm install ol-hashed@beta

Then in our main.js we'll import the function exported by the package:

それから main.js にパッケージによってエクスポートされたファンクションをインポートします:

import sync from 'ol-hashed';

And now we can call this function with our map:

それから、map でこのファンクションを呼び出します:

sync(map);

Now you should see that page reloads keep the map view stable. And the back button works as you might expect.

これで、ページがマップビューを変動のないままリロードすることがわかります。そして、戻るボタンは期待するように動作します。

■□ Debian9 で試します■□
countries.json のデータの場所を確認します。

user@deb9-vmw:~/openlayers-workshop-en$ ls data
---
countries.json
---

前回使用した index.html のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_basic
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;
    background-color: #04041b;
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
 </body>
</html>
前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css'; 
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map'; 
import VectorLayer from 'ol/layer/Vector'; 
import VectorSource from 'ol/source/Vector'; 
import View from 'ol/View'; 
new Map({
 target: 'map-container',
 layers: [
  new VectorLayer({
   source: new VectorSource({
    format: new GeoJSON(),
    url: './data/countries.json'
   })
  })
 ], 
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
http://localhost:3000/ とブラウザでマップを開きます。(もし開かなければ、'npm start' を実行してください。



ol-hashed package をインストールします。

user@deb9-vmw:~/openlayers-workshop-en$ npm install ol-hashed
> ol-workshop@0.0.0 start /home/nob61/openlayers-workshop-en
> webpack-dev-server --mode=development

ℹ 「wds」: Project is running at http://localhost:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wdm」: 
ℹ 「wdm」: Compiled successfully.
^Cnob61@deb9-vmw:~/openlayers-workshop-en$ npm install ol-hashed
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ ol-hashed@2.0.0-beta.2
updated 2 packages and audited 7519 packages in 11.534s
found 0 vulnerabilities
main.js 次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css'; 
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map'; 
import VectorLayer from 'ol/layer/Vector'; 
import VectorSource from 'ol/source/Vector'; 
import View from 'ol/View'; 
import sync from 'ol-hashed';
new Map({
 target: 'map-container',
 layers: [
  new VectorLayer({
   source: new VectorSource({
    format: new GeoJSON(),
    url: './data/countries.json'
   })
  })
 ], 
 view: new View({
  center: [0, 0],
  zoom: 2
 })
}); 
sync(map);
今回は、地図を拡大したり中心を移動して再読込やブラウザの「戻る」ボタンを押すと 'sync(map);' を設定する前と動作がかわりませんでした。
■□ここまで■□

OpenLayers5 Workshop - 1.2 Zooming to your location

1.2 Zooming to your location
現在位置にズーム

Browsers provide an API to get the current location of the user. We want to use this feature to zoom the map to where the user currently is. To make it easier for the user to see what is going on on the map, we want to animate the zoom.

ブラウザはユーザの現在の位置を取得する API を提供します。ユーザが現在いるマップにズームするこの機能をします。ユーザがマップ上で進行していること確認するのを容易にするために、ズームをアニメーションします。

Application changes
アプリケーション変更

First of all, we need to assign the map to a constant, so we can access it from other components we're going to add in this exercise:

まず第一に、map に定数(constant)を割り当て、この演習に追加する他のコンポーネントからアクセスできるようにします。

const map = new Map({

To add the geolocation functionality, we append a short code block to our main.js file:

geolocation 関数を追加するために、main.js に短いコードブロックを追加します:
navigator.geolocation.getCurrentPosition(function(pos) {
 const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
 map.getView().animate({center: coords, zoom: 10});
});
This requires a new import for the fromLonLat() function, which converts longitude/latitude coordinates into the coordinate system OpenLayers uses by default for the map view (Web Mercator, EPSG:3857).

これは、fromLonLat() ファンクションのための新しい import が必要で、OpenLayers が map view のデフォルトで使用する座標システム(Web Mercator, EPSG:3857)に変換します。

import {fromLonLat} from 'ol/proj';


View the result
結果を眺める

When we look at the map in the web browser (http://localhost:3000/), we will probably get asked whether we want to give the page access to our location. After answering 'Yes', an animated zoom should take us to our current location.

ウェブブラウザ(http://localhost:3000/)でマップを見るとき、おそらく現在位置へページにアクセスさせるかどうか尋ねられます。「はい」と答えた後、アニメーションズームが現在の位置へ案内します。

■□ Debian9 で試します■□
main.js のコードに次のように追加します。

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';
const map = 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: [0, 0],
  zoom: 2
 })
});
// ここから追加
navigator.geolocation.getCurrentPosition(function(pos) {
 const coords = fromLonLat([pos.coords.longitude,  pos.coords.latitude]);
 map.getView().animate({center: coords, zoom: 10});
});
http://localhost:3000/ とブラウザで演習マップを開きます。(もし開かなければ、'npm start' を実行してください。
現在位置へページにアクセスさせるかどうか尋ねられます。「許可」ボタンを押すと、アニメーションズームが現在の位置へ案内します。



■□ここまで■□

OpenLayers5 Workshop - 1.1 Creating a Map

1 Basics
Now that we have set up our development environment, let's get started by creating a simple web page with an OpenLayers map, and add some animation and interactivity to it.

開発環境を設定したので、OpenLayers マップを使った簡単なウェブページの作成で始めて、それにアニメーションとインタラクティブをいくつか追加します。

● Creating a map
● Zooming to your location

● マップを作成
● 現在の位置にズーム


1.1 Creating a map
マップの作成

In OpenLayers, a map is a collection of layers that get rendered to a web page. To create a map, you need some markup (HTML) that creates the map viewport (e.g. a
element), a bit of style to give the map viewport the appropriate dimensions on your page, and map initialization code.

OpenLayers では、マップは、ウェブページに描画されるレイヤのコレクションです。マップの作成のために、マップビューポート(map viewport)を作成するいくつかのマークアップ(例えば、<div> エレメント)、ページのマップビューポートにおおよそのディメンジョンを与えるための少しのスタイル、マップの初期化コードを必要とします。

Working example
動作例

Make sure you've completed the setup instructions to install dependencies and get the development server running.

依存関係をインストールするために setup instructions を完了し、開発サーバを動作させていることを確認します。

Now let's create a fully working example of an OpenLayers map. At a minimum, we need some markup with a container element for a map, and an OpenLayers Map instance which we configure with a layer and a view.

OpenLayers マップの完全に動作する例を作成しましょう。map のためのコンテナエレメント(container element)を伴ういくつかのマークアップ、および、レイヤ(layer)とビュー(view)を伴うが OpenLayers Map インスタンスが必要です。

The markup
マークアップ

First, we create an index.html file in the root of the workshop directory:

最初に、ワークショップディレクトリのルートに 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>
Note that we do not need to include any <script> for our application. Our webpack setup takes care of that. Our <style> makes the map container fill the whole page, and we will use the container <div> with the map-container id as target for the map.

アプリケーションに <script> を含む必要がないことに注意してください。ウェブパックのセットアップは、それを処理します。<style> は、マップコンテナ(map container)でページ全体を満たし、マップのターゲットとしてマップコンテナ id(map-container id)と一緒にコンテナ(container)<div> を使います。

The application
アプリケーション

To work with OpenLayers, we install the ol package from npm. This was already done in the previous npm install step. If you were starting from scratch on a new application, you would run this in the terminal:

OpenLayers で作業するために、npm から ol パッケージをインストールします。これは、前述の npm install のステップで済んでいます。新しいアプリケーションで最初から始めている場合は、これを端末で実行します:

npm install ol@beta


(訳注:実際には 'npm install ol' だと思います。'npm install ol@beta' とするとその時点での前バージョンのベータ版がインストールされます。)

As entry point of the application, we create a main.js file, and also save it in the root of the workshop directory:

アプリケーションの導入ポイントとして、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';
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: [0, 0],
  zoom: 2
 })
});
At the top, we import the required modules from the ol package. Note the 'ol/ol.css' import, which adds the styles that OpenLayers requires for its basic UI components. With everything we need imported, we create move on and create a Map. The target points to the container

we have in our markup. We configure the map with a tiled image layer (TileLayer) and an XYZSource. Finally, the View defines the initial center and zoom.

最初の部分で、ol パッケージから必要とされるモジュールをインポートします。OpenLayers が基本的な UI コンポーネントに必要とするスタイル(style)を追加する、'ol/ol.css' インポートに注意してください。インポートされた必要なすべてのもので進めて、Map を作成します。ターゲットは、マークアップ内のコンテナ <div> を指します。タイルイメージレイヤ(TileLayer)と XYZSource でマップを設定します。最後に、View(ビュー)は、center(中心)と zoom(ズーム)を定義します。

Viewing the map
マップを眺める

Now our application is ready for testing. Let's open the working map in a web browser: http://localhost:3000/. This is how it should look:

これでアプリケーションは、テストの準備ができました。http://localhost:3000/ とブラウザで演習マップを開きましょう。このように見えます:

In the final chapter of the workshop, we will learn how create a production build of the application for deployment.

ワークショップの最終章で、開発用のアプリケーションの本番ビルドを作成する方法を演習します。


■□ Debian9 で試します■□
ワークショップディレクトリのルートに index.html ファイルを作成します。元の index.html ファイルは改名しておきます。

user@deb9-vmw:~/openlayers-workshop-en$ mv index.html index.html_org 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>
npm から ol package をインストールします。ワークショップのルートディレクトリで 'npm install ol' を実行します。(このワークショップの執筆時は ol5.0.0 のベータ版のインストールを想定していると思われます。'npm install ol@beta' とするとその時点での前バージョンのベータ版がインストールされました。)

user@deb9-vmw:~/openlayers-workshop-en$ npm install ol
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ ol@5.0.0-beta.14
updated 3 packages and audited 14484 packages in 27.194s
found 7 vulnerabilities (4 low, 2 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
最後の行に7個の脆弱性が発見と修正方法が出力されました。

found 7 vulnerabilities (4 low, 2 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details

`npm audit fix` を実行します。

user@deb9-vmw:~/openlayers-workshop-en$ npm audit fix
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ webpack-dev-server@3.1.6
added 17 packages from 22 contributors, removed 21 packages, updated 20 packages and moved 33 packages in 26.184s
fixed 5 of 7 vulnerabilities in 14484 scanned packages
  1 package update for 2 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
最後の行に、さらに修正方法が出力されました。

use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually

`npm audit fix --force` を実行します。

user@deb9-vmw:~/openlayers-workshop-en$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.

> fsevents@1.2.3 install /home/nob61/openlayers-workshop-en/node_modules/fsevents
> node install

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.0
added 76 packages from 42 contributors, removed 342 packages and updated 8 packages in 16.333s
fixed 2 of 2 vulnerabilities in 14408 scanned packages
  1 package update for 2 vulns involved breaking changes
  (installed due to `--force` option)
ワークショップディレクトリのルートに main.js ファイルを作成します。元の main.js ファイルは改名しておきます。

user@deb9-vmw:~/openlayers-workshop-en$ mv main.js main.js_org 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'; 
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: [0, 0], 
  zoom: 2 
 }) 
}); 
http://localhost:3000/ とブラウザで演習マップを開きます。(もし開かなければ、'npm start' を実行してください。


■□ここまで■□

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

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

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

The 5.2 release adds a few new features a handful of fixes, including regressions that were reported after the 5.1 release. You should be able to upgrade without any additional work. See the one note below regarding snapToPixel on ol/style/Image and subclasses.

5.2 リリースは、2、3の新機能と少しの修正を追加し、5.1 リリース後に報告された回帰を含みます。追加の作業なしでアップグレードできます。ol/style/Image とサブクラス上の下記の snapToPixel とみなす下記の注意を参照してください。

We're still working toward type checking with TypeScript. Until that is complete, we apologize for some flwas in the online API documentation. We're excited about the improved experience for application developers when the effort is finished, and will highlight some of the benefit in upcoming releases.

TypeScript を使用するタイプチェックに向かって作業しています。それが完成するまで、オンライン API ドキュメントにあるいくつかのフローに対してお詫びします。(訳注:flwas は flows と間違えたと思われます)取り組みが終了したときアプリケーション開発者の向上された実験について刺激され、次のリリースでいくつかの恩恵を強調します。

Upgrade Notes

Removal of the snapToPixel option for ol/style/Image subclasses
ol/style/Image サブクラスの snapToPixel オプションの削除

The snapToPixel option has been removed, and the getSnapToPixel and setSnapToPixel methods are deprecated.

snapToPixel オプションが削除され、getSnapToPixel と setSnapToPixel は非推奨になりました。

The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.

テキパキした描画を得るためインタラクション、または、アニメーションが実行されないとき、レンダラは、現在、整数ピクセルで分離します。インタラクション、または、アニメーションの間は、イライラすることなしに整数ピクセルで分離しません。

When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set context.imageSmoothingEnabled = false before rendering with the Immediate API, and context.imageSmoothingEnabled = true afterwards.

Immediate API で描画するとき、symbol は、もはや整数ピクセルで分離しません。テキパキした画像を得るために、Immediate API で描画する前に 'context.imageSmoothingEnabled = false' を設定し、後で 'context.imageSmoothingEnabled = true' を設定します。

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