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

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

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

■□ここまで■□