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' を実行してください。

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

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

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

■□ここまで■□