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

■□ここまで■□