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

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

三角形を描画していきます。

頂点を合わせてダブルクリックします。

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

■□ここまで■□