フロアマップの組み込み方法

Flomageサーバーにアップロードしたフロアマップをシステムに組み込むためには、以下の4つの手続きが必要です。

JavaScriptを組み込む

以下のJavaScriptファイルをHTMLに組み込みます。

<script type="text/javascript" src="http://flomage.megasoft.co.jp/Flomage/Flomage.js"></script>

※IEで正常に動作させるためには<head>タグに以下の記述を追加してください。

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

JavaScriptでFlomageクラスを作成する

変数名「FMG」で、Floamgeクラスのインスタンスを作成します。

Flomageクラスは、フロアマップの描画など、Flomageの操作のインターフェースになるクラスです。

例）

<script type="text/javascript">
      var FMG = new Flomage( "2760-XXXXXX-XXXX-XXXX-XXXX-XXXX" );
</script>

※アンダーラインの箇所は、Flomage契約時に配布したライセンスキーに変更してください。

※Flomageの体験版の場合は、ライセンスキーの箇所は「2765-999001-0001-RPZF-DM2N-EXAL」を指定してください。

※「FMG」というオブジェクト名は変更できません。必ず「FMG」というオブジェクト名でFlomageクラスを作成してください。

Canvasを作成する

Flomageは、グリッド用、パーツなどのフロアマップ表示用、テンポラリの表示用の3つCanvasを使用します。
以下のサンプルを参考に、この3つのキャンバスを作成してください。

Canvas名は、自由に決めることができます。

例）

<body onLoad="onInit()">
<!--グリッド描画用のキャンバス-->
<canvas id="cvGrid" width="900" height="600" style="position:absolute;top:10px;left:10px;"></canvas>
<!--フロアマップ描画用のキャンバス-->
<canvas id="cvSymbol" width="900" height="600" style="position:absolute;top:10px;left:10px;"></canvas>
<!--オブジェクトの点滅などの描画用のキャンバス-->
<canvas id="cvUI" width="900" height="600" style="position:absolute;top:10px;left:10px;"></canvas>
</body>

※各Canvasは、同じ位置、同じサイズで重ねる必要があります。絶対位置指定などで、重ねて作成してください。

Flomageクラスを初期化する

Flomageクラスを初期化して、使用可能な状態にします。
例にある「キャンバスサイズ」と「キャンバスエレメント」をFlomageクラスに登録と、「ライセンスのチェック」は、必ず行う必要があります。

例）

function onInit() {
    var cvFrame = document.getElementById("cvFrame");
    var cvGrid = document.getElementById("cvGrid");
    var cvSymbol = document.getElementById("cvSymbol");
    var cvUI = document.getElementById("cvUI");

    // UI用のキャンバスにイベントハンドラーを登録する。
    cvUI.onmousedown = mouseDownListner;
    cvUI.onmousemove = mouseMoveListner;
    cvUI.onmouseup = mouseUpListner;
    cvUI.ontouchstart = touchstart;
    cvUI.ontouchmove = touchmove;
    cvUI.ontouchend = touchend;
    cvUI.onmousewheel = mouseWheelListner;
    cvUI.ondblclick = mouseDblClickListner;
    // FireFox用
    cvUI.addEventListener( 'DOMMouseScroll', mouseWheelListner ); 
    
    // キャンバスサイズをFlomageクラスに登録する（必須）
    FMG.Init( cvFrame.width, cvFrame.height );
    
    // 各キャンバスエレメントをFlomageクラスに登録する（必須）
    FMG.cvUI = cvUI;
    FMG.cvGrid = cvGrid;
    FMG.cvSymbol = cvSymbol;

    // フロアマップの初期状態を設定する。
    FMG.UseLayerColor = false;
    FMG.ShowGrid = true;
    FMG.ShowDimension = false;

    // ファイルロード後に呼び出される関数をFlomageクラスに登録する。
    FMG.OnLoaded = OnLoaded;

    // Flomageクラスのライセンスをチェックして、Flomageクラスを使用可能にする（必須）
    FMG.InitLicense( OnInitComplete );
}