作図機能

実行結果

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

LatLng:
scale:
zoom:
heading:
tilt:
作図モードを開始する関数

上記以外の、作図・編集に関連する関数
※取得したリストはコンソールログ参照

概要

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

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

モード(状態) 説明
通常地図操作モード 通常の地図の状態(作図関連のモード以外を表す)
作図モード マウス/タッチ操作で図形を作図することができる状態
作図中モード マウス/タッチ操作の連続で図形頂点を追加中の状態(ポリライン・ポリゴンのみ)
図形選択モード マウス/タッチ操作により図形を選択することができる状態
編集モード 選択した図形を編集することができる状態

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

論理名 関数名 説明
作図 drawFigure 作図モードに遷移する
座標の指定がある場合、図形を描画した状態で編集モードに遷移する
図形の選択 selectFigure 作図した「作図用の図形」を左クリックで選択可能になり、選択した「作図用の図形」を編集する
選択した場合、編集モードに遷移する
作図オプションの変更 setFigureOptions 編集モード中、編集中の「作図用の図形」のオプションを変更する
作図関連のモード中止 stopDrawFigure 作図・編集モードを終了し、通常地図操作モードに遷移する
図形の非表示 hideFigures 作図した全ての「作図用の図形」を非表示にする
図形の表示 showFigures 作図した全ての「作図用の図形」を表示する
作図中の作業の巻き戻し backToPreviousDrawingStep 最後に追加した頂点を削除する
作図モード中のみ動作する
作図済みのすべての図形の削除 deleteAllFigures 作図した全ての「作図用の図形」を削除する
最後に追加した図形の削除 deleteFigure 最後に追加した「作図用の図形」を削除する
作図中の図形の確定 fixFigure 作図中の「作図用の図形」を確定し、編集モードに遷移する
作図モード中、かつポリラインの場合は頂点が2点以上、ポリゴンの場合は3点以上追加されている場合のみ動作する
図形一覧の取得 getListFigures 作図した「作図用の図形」のリスト(Array)を取得する

ソースコードと解説

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

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,
    propagation: true,
  }
  function afterDrawingFunc() {
    console.log("afterDrawingFunc");
  }
  function afterEditFunc() {
    console.log("afterEditFunc");
  }
  map.drawFigure(drawMode, options, afterDrawingFunc, afterEditFunc);
}
①作図する「作図用の図形」の種類
②上記①で指定した「作図用の図形」に関連するオプション
③マウス操作によって作図モードから編集モードに遷移した場合にコールされる関数
④マウス操作によって編集モードから作図モードに遷移した場合にコールされる関数
⑤事前に初期化しておいた地図オブジェクトを使用し、上記①～④を引数に設定してdrawFigure関数をコールする
「※上記③、④で設定した関数がコールバックされる発生条件（タイミング）については、後述する「drawFigure関数におけるコールバック関数の発生条件」の章を参照」
selectFigure関数
項 ソース 解説




① 

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

function selectFigure() {
  map.selectFigure();
}
①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,
    propagation: true,
  }
  map.setFigureOptions(options);
}
①編集中の「作図用の図形」に適用したいオプション
②事前に初期化しておいた地図オブジェクトを使用し、上記①を引数に設定してsetFigureOptions関数をコールする
stopDrawFigure関数
項 ソース 解説




① 

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

function stopDrawFigure() {
  map.stopDrawFigure();
}
①stopDrawFigure関数をコールする
showFigures関数
項 ソース 解説




① 

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

function showFigures() {
  map.showFigures();
}
①showFigures関数をコールする
hideFigures関数
項 ソース 解説




① 

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

function hideFigures() {
  map.hideFigures();
}
①hideFigures関数をコールする
backToPreviousDrawingStep関数
項 ソース 解説




① 

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

function backToPreviousDrawingStep() {
  map.backToPreviousDrawingStep();
}
①backToPreviousDrawingStep関数をコールする
deleteAllFigures関数
項 ソース 解説




① 

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

function deleteAllFigures() {
  map.deleteAllFigures();
}
①deleteAllFigures関数をコールする
deleteFigure関数
項 ソース 解説




① 

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

function deleteFigure() {
  map.deleteFigure();
}
①deleteFigure関数をコールする
fixFigure関数
項 ソース 解説




① 

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

function fixFigure() {
  map.fixFigure();
}
①fixFigure関数をコールする
getListFigures関数
項 ソース 解説




①
② 

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

function getListFigures() {
  let listFigures = map.getListFigures();
  console.log(listFigures);
}
①getListFigures関数をコールする
②上記①で取得したリストをコンソールログに出力する

地図上での操作方法

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

操作方法の記載にあたり、操作状態を表す用語を以下のように定義しています。
・作図中止している
　最後にdrawFigure関数を実行した後、以下いずれかの操作を一度でも実行している場合の操作状態
　・Escapeキーを押下
　・stopDrawFigure関数をコール
・作図中止していない
　最後にdrawFigure関数を実行した後、以下いずれかの操作を一度も実行していない場合の操作状態
　・Escapeキーを押下
　・stopDrawFigure関数をコール

「作図図形」共通機能

・Escapeキーを押下もしくはstopDrawFigure関数をコールすることで、作図・作図中・図形選択・編集モードを終了して地図操作モードに遷移する
　※ただし、Escapeキー押下で操作できるのは「作図中止していない」場合のみである

→
編集モード共通機能

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

→

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

→

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

→ →

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

→ →

・バウンディングボックス外を左クリック/タッチすることで、編集中の「作図図形」の編集モードを終了する
　操作後のモードは、「作図中止している」かどうかで決定する
　・「作図中止していない」場合・・・作図モードに遷移する
　　　　　　　　　　　　　　　　　　作図の設定は最後に実行したdrawFigure関数の設定を引き継ぐ
　・「作図中止している」場合・・・地図操作モードに遷移する

→
ポリライン(LINE)／ポリゴン(POLYGON)
作図モード時

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

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

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

→

・BackSpaceキーを押下もしくはbackToPreviousDrawingStep関数をコールすることで、最後に追加した頂点を削除する

→

・200ms以内に左クリック押下/タッチを2回することで、そのクリック/タッチ地点に頂点を追加して作図モードから編集モードに遷移する

→

・Enterキーを押下もしくはfixFigure関数をコールすることで、作図モードから編集モードに遷移する

→
編集モード時

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

→

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

→

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

→
長方形(RECT)
作図モード時

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

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

→
編集モード時

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

→

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

→
楕円(OVAL)
作図モード時

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

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

→
編集モード時

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

→

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

→
ラベル(LABEL)
作図モード時

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

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

→
編集モード時

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

→
マーカー(MARKER)
作図モード時

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

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

→
編集モード時

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

→
テキスト(TEXT)
作図モード時

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

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

→
編集モード時

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

→

drawFigure関数におけるコールバック関数の発生条件

drawFigure関数の引数に設定する、以下2つの関数がコールバックされる発生条件を記載する。
　・afterDrawingFunc関数
　・afterEditFunc関数
また、操作によってはコールバックされないパターンも存在するため、上記の関数別ではなく状態遷移パターン別で記載する。

ポリライン(LINE)／ポリゴン(POLYGON)共通
作図モードから地図操作モードに遷移するパターン

・Escapeキーを押下する
　→何もコールバックされない
・stopDrawFigure関数をコールする
　→何もコールバックされない

作図モードから地図操作モードに遷移するパターン

・バウンディングボックス外を左クリック/タッチする
　→afterEditFunc関数がコールバックされる
・drawFigure関数をコールする
　→何もコールバックされない

編集モードから地図操作モードに遷移するパターン

・Escapeキーを押下する
　→何もコールバックされない
・stopDrawFigure関数をコールする
　→何もコールバックされない

ポリライン(LINE)
作図モードから編集モードに遷移するパターン

・頂点を1点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加され、afterDrawingFunc関数がコールバックされる
・頂点を2点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加され、afterDrawingFunc関数がコールバックされる
・頂点を2点追加後に、Enterキーを押下する
　→何もコールバックされない
・頂点を2点追加後に、fixFigure関数をコールする
　→何もコールバックされない

ポリゴン(POLYGON)
作図モードから編集モードに遷移するパターン

・頂点を2点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加され、afterDrawingFunc関数がコールバックされる
・頂点を3点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加され、afterDrawingFunc関数がコールバックされる
・頂点を3点追加後に、Enterキーを押下する
　→何もコールバックされない
・頂点を3点追加後に、fixFigure関数をコールする
　→何もコールバックされない

長方形(RECT)／楕円(OVAL)／ラベル(LABEL)／マーカー(MARKER)／テキスト(TEXT)共通
作図モードから編集モードに遷移するパターン

・左クリック押下/タッチを行う
　→afterDrawingFunc関数がコールバックされる

作図モードから地図操作モードに遷移するパターン

・Escapeキーを押下する
　→何もコールバックされない
・stopDrawFigure関数をコールする
　→何もコールバックされない

編集モードから作図モードに遷移するパターン

・バウンディングボックス外を左クリック/タッチする
　→afterEditFunc関数がコールバックされる

編集モードから地図操作モードに遷移するパターン

・Escapeキーを押下する
　→何もコールバックされない
・stopDrawFigure関数をコールする
　→何もコールバックされない

上記を表でまとめたものを以下に示す。

「作図図形」の種類
ポリライン／ポリゴン ポリライン／ポリゴン以外
遷
移
元		 作図モード ○ ○ ○ ○ ○ ○ ○ ○
編集モード ○ ○ ○ ○ ○ ○ ○
地図操作モード
遷
移
先		 作図モード ○ ○ ○
編集モード ○ ○ ○ ○
地図操作モード ○ ○ ○ ○ ○ ○ ○ ○
操
作		 200ms以内に左クリック/タッチ2回 ○
左クリック/タッチ ○
Enterキーを押下 ○
fixFigure関数をコール ○
バウンディングボックス外を左クリック/タッチ ○ ○
drawFigure関数をコール ○
Escapeキーを押下 ○ ○ ○ ○
stopDrawFigure関数をコール ○ ○ ○ ○
発
生
有
無		 afterDrawingFunc ○ ○
afterEditFunc ○ ○

以下に、ZDC.MapクラスのaddEventListener(event,func)を使用し、dblclickでfixFigure()を実行するイベントリスナーを追加したパターンを記載する。
イベントリスナーを追加しない上記のパターンとの差分のみを記載する。
※本来はこのイベントリスナーを登録する必要はないが、登録した場合に動作が変わるため記載する

ポリライン(LINE)
作図モードから編集モードに遷移するパターン

・頂点を2点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加されなくなり、何もコールバックされない

ポリゴン(POLYGON)
作図モードから編集モードに遷移するパターン

・頂点を3点追加後に、200ms以内に左クリック押下/タッチを2回行う
　→クリック/タッチ地点に頂点が追加されなくなり、何もコールバックされない