作図機能

実行結果

次の例では、作図機能を表示します。

概要

作図機能は、ユーザのマウス・キー操作によって「作図用の図形」を作図・編集する機能です。
本機能で作図したものは、各ウィジェットのクラス(PolygonクラスやOvalクラスなど)で描画されたものと異なるものであるため、ウィジェットではなく「作図用の図形」と表現しています。
また、各ウィジェットのクラスで描画されたものは本機能では編集することはできません。

以下に、初期時・作図時・編集時に遷移されるモード(状態)の一覧を示します。

以下に、作図・編集に関連する関数の概要を示します。
特にモードの記載がない関数については、すべてのモードで動作します。

ソースコードと解説

以下に、作図機能を利用したサンプルソースを記載します。

drawFigure関数

※指定する「作図用の図形」の種類によって異なるのがオプションの内容のみのため、代表してポリラインのみを記載します。

<button class="control-btn" onclick="drawLine()">drawFigure('LINE')</button>

function drawLine() {
  let drawMode = 'LINE';
  let options = {
    color: '#000000',
    width: 5,
    pattern: 'solid',
    opacity: 1.0,
    draw: 'high',
    visibleVertexNumber: true,
  }
  function afterDrawingFunc() {
    console.log("afterDrawingFunc");
  }
  function afterEditFunc() {
    console.log("afterEditFunc");
  }
  map.drawFigure(drawMode, options, afterDrawingFunc, afterEditFunc);
}
                  

selectFigure関数

<button class="control-btn" onclick="selectFigure()">selectFigure</button>

function selectFigure() {
  map.selectFigure();
}

                  

setFigureOptions関数

<button class="control-btn" onclick="setFigureOptions()">setFigureOptions</button>

function setFigureOptions() {
  let options = {
    color: '#FF0000',
    stroke: '#FF0000',
    strokeWidth: 5,
    strokePattern: 'solid',
    fill: '#22FF00',
    fillPattern: 'solid',
    borderColor: '#8822FF',
    fontOpacity: 0.5,
    opacity: 0.5,
    lineOpacity: 1.0,
    fillOpacity: 1.0,
    draw: 'high',
    drawPopup: false,
    visibleVertexNumber: true,
  }
  map.setFigureOptions(options);
}

                  

stopDrawFigure関数

<button class="control-btn" onclick="stopDrawFigure()">stopDrawFigure</button>

function stopDrawFigure() {
  map.stopDrawFigure();
}

                  

showFigures関数

<button class="control-btn" onclick="showFigures()">showFigures</button>

function showFigures() {
  map.showFigures();
}

                  

hideFigures関数

<button class="control-btn" onclick="hideFigures()">hideFigures</button>

function hideFigures() {
  map.hideFigures();
}

                  

backToPreviousDrawingStep関数

<button class="control-btn" onclick="backToPreviousDrawingStep()">backToPreviousDrawingStep</button>

function backToPreviousDrawingStep() {
  map.backToPreviousDrawingStep();
}

                  

deleteAllFigures関数

<button class="control-btn" onclick="deleteAllFigures()">deleteAllFigures</button>

function deleteAllFigures() {
  map.deleteAllFigures();
}

                  

deleteFigure関数

<button class="control-btn" onclick="deleteFigure()">deleteFigure</button>

function deleteFigure() {
  map.deleteFigure();
}

                  

fixFigure関数

<button class="control-btn" onclick="fixFigure()">fixFigure</button>

function fixFigure() {
  map.fixFigure();
}

                  

getListFigures関数

<button class="control-btn" onclick="getListFigures()">getListFigures(※)</button>

function getListFigures() {
  let listFigures = map.getListFigures();
  console.log(listFigures);
}

                  

地図上での操作方法

以下に、前述の「drawFigure関数」を実行時に、第一引数に設定できる「作図用の図形」の種類ごとの操作方法を記載します。

「作図用の図形」共通機能

・Escapeキーを押下することで、作図・編集モードを終了して通常地図操作モードに遷移する

→

編集モード共通機能

・通常、作図モードから編集モードに遷移した場合、直前で作図していた「作図用の図形」のバウンディングボックスが可視化される
　可視化されたバウンディングボックスは、編集中の「作図用の図形」を意味する

→

・編集モード中、過去に作図した別の「作図用の図形」を左クリックすることで、編集対象をその「作図用の図形」に切り替えることができる

→

・「回転する矢印」アイコンを左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を回転する
　回転軸はバウンディングボックスの中心点となる
　回転角度はドラッグ地点・中心点・ドロップ地点を結ぶ角度となる

→

→

・「削除」ボタンを左クリックすることで、「削除確認の吹き出し」が表示される
　「キャンセル」ボタンを左クリックすることで、「削除確認の吹き出し」を非表示にする
　「OK」ボタンを左クリックすることで、編集中の「作図用の図形」を削除する

→

→

・バウンディングボックス外を左クリックすることで、編集中の「作図図形」の編集モードを終了する
　作図モードは継続され、引き続き作図を行うことができる

→

ポリライン(LINE)／ポリゴン(POLYGON)

作図モード時

・マウスカーソルに追加予定の頂点が追従する形で、既に追加した頂点とそれを結ぶ線が随時プレビューされる
　ポリゴン(POLYGON)の場合は、更に最初に追加した頂点と結ばれる(線が閉じられる)

ポリラインの場合	ポリゴンの場合

・左クリックを1回押下することで、頂点を追加する

・BackSpaceキーを押下することで、最後に追加した頂点を削除する

・200ms以内に左クリックを2回、またはEnterキーを押下することで、作図モードから編集モードに遷移する

編集モード時

・追加した頂点を左クリックでドラッグ&ドロップすることで、その頂点を移動する

・追加した頂点を二分する点を左クリックでドラッグ&ドロップすることで、その頂点を追加する

・追加した頂点の「－」ボタンを左クリックすることで、その頂点を削除する

四角形(RECT)

作図モード時

・マウスカーソルに追従する形で、「作図用の図形」が随時プレビューされる

・左クリックを1回押下することで、そのクリック地点を四隅の左下の頂点として描画する
　四角形を構成する四隅の頂点座標は、作図オプションで指定された値を元に自動生成される
　頂点を追加する工程がないため、そのまま作図モードから編集モードに遷移する

→

編集モード時

・「作図用の図形」上を左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を移動する
　移動中は、「作図用の図形」内に直径幅(下図でいうと"5m"の部分)を表示する
　※「作図用の図形」のサイズが小さい場合は、直径幅が表示されない

→

・四隅の頂点、またはその両端の頂点を二分する点を左クリックでドラッグ&ドロップすることで、直径幅をリサイズする
　選択した点が四隅の頂点の場合は、その点の対頂点を基準として、外側方向にのみリサイズでき、縦横比は維持される
　選択した点がその両端の頂点を二分する点の場合は、その点の対辺を基準として、垂直方向にのみリサイズできる
　リサイズ中は、「作図用の図形」内に直径幅(下図でいうと"5m"の部分)を表示する
　※「作図用の図形」のサイズが小さい場合は、直径幅が表示されない

→

楕円(OVAL)

作図モード時

・マウスカーソルに追従する形で、「作図用の図形」が随時プレビューされる

・左クリックを1回押下することで、そのクリック地点を楕円の中心として描画する
　楕円を構成するx,y軸上の4つの頂点座標は、作図オプションで指定された値を元に自動生成される
　頂点を追加する工程がないため、そのまま作図モードから編集モードに遷移する

→

編集モード時

・「作図用の図形」上を左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を移動する
　移動中は、「作図用の図形」内に半径幅(下図でいうと"4m"の部分)を表示する
　※「作図用の図形」のサイズが小さい場合は、半径幅が表示されない

→

・x,y軸上の4つの頂点を左クリックでドラッグ&ドロップすることで、縦横幅をリサイズする
　選択した点がx軸上の頂点の場合は、y軸を基準として、x軸方向にのみリサイズできる
　選択した点がy軸上の頂点の場合は、x軸を基準として、y軸方向にのみリサイズできる
　リサイズ中は、「作図用の図形」内に半径幅(下図でいうと"4m"や"7m"の部分)を表示する
　※「作図用の図形」のサイズが小さい場合は、半径幅が表示されない

→

マーカー(MARKER)

作図モード時

・マウスカーソルに追従する形で、「作図用の図形」が随時プレビューされる

・左クリックを1回押下することで、そのクリック地点を頂点として描画する
　頂点を追加する工程がないため、そのまま作図モードから編集モードに遷移する

→

編集モード時

・頂点を左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を移動する

→

テキスト(TEXT)

作図モード時

・マウスカーソルに追従する形で、「作図用の図形」が随時プレビューされる

・左クリックを1回押下することで、そのクリック地点を頂点として描画する
　頂点を追加する工程がないため、そのまま作図モードから編集モードに遷移する

→

編集モード時

・頂点を左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を移動する

→

GLラベル(LABEL)

作図モード時

・マウスカーソルに追従する形で、「作図用の図形」が随時プレビューされる

・左クリックを1回押下することで、そのクリック地点を頂点として描画する
　頂点を追加する工程がないため、そのまま作図モードから編集モードに遷移する

→

編集モード時

・頂点を左クリックでドラッグ&ドロップすることで、編集中の「作図用の図形」を移動する

→