フリーハンドで図形を描画する方法～OpenLayersで図形を描画する③

実際にやってみた

実は使用するソースコードは②で用いたものと同じです。

LineStringの描画モード時に、Shiftを押しながらドラッグ操作をすることで、以下のようにフリーハンドで、線や多角形を描画することができます。

描画に使用している「ol.interaction.Draw」には「freehand」という設定項目があり、デフォルトで「true」になっています。

freehandがtrueの状態で、LineStringまたはPolygonの描画モードの場合、Shift + ドラッグ操作を行うことでフリーハンド描画ができます。

フリーハンド描画をオフにしたい場合は、freehandをfalseに設定することで、抑制できます。

この「Shiftを押しながらドラッグ」操作というのも変更可能で、「freehandCondition」の設定を変更することで、別のキーを割り当てることが可能です。

前回の記事で地図内にテキストを描画する方法についてお伝えしましたが、このフリーハンド操作を行うことで、より直感的にテキストの書き込みができるようになります。

ただし、このフリーハンド操作は内部に保持する座標情報(Coordinates)が大量に発生するため、多用には気をつけたほうがいいでしょう。