SDJ Mapserver Solutions

第1回 Nez 初心者講座

この説明はWindows版を使用しています。

地図表示の基本部分を抜粋したサンプル
Nezに付属するデモアプリケーションは高機能ですが、それが故に、HTML、JavaScriptが膨大で少々取っ付きにくいのが難点です・・・。
そこで、地図表示と拡大縮小機能だけのサンプルをご用意しました。ソースの間にコメントを挿入しましたので
ご覧下さい。
サンプルはこちらからダウンロード出来ます。圧縮ファイル内のファイルをC:¥ms4w¥apps¥nez¥htdocs¥html¥sdjdemoに保存して実行して下さい。

<html>
  <head>

    <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
    <title>拡大 縮小 スクロール サンプル</title>
    <!--↓↓↓この範囲の宣言は地図表示に必要です-->
    <!--[if IE]>
         <script type="text/javascript" src="../../javascript/excanvas.js"></script>
    <![endif]-->
    <script language="JavaScript" src="../../kamap/xhr.js"></script>
    <script language="JavaScript" src="../../kamap/kaMap.js"></script>
    <script language="JavaScript" src="../../kamap/kaTool.js"></script>
    <script language="JavaScript" src="../../javascript/Inheritance.js"></script>
    <script language="JavaScript" src="../../javascript/Utility.js"></script>
    <script language="JavaScript" src="../../javascript/NezMap.js"></script>
    <script language="JavaScript" src="../../javascript/NezKaMap.js"></script>
    <!--↑↑↑この範囲の宣言は地図表示に必要です-->
    <script language="JavaScript" src="../../javascript/NezNavi.js"></script>
    <!--NezNavi.jsは今回のサンプルで使用した機能(パンスクロール)の実行に必要です-->

    <script language="JavaScript">

      //メイン地図オブジェクトの宣言です
      var gNezMap;

      //パンスクロール機能オブジェクトの宣言です
      var gCmdScroll;

      //onload後に行う処理を記述します
      function onInitialize() {

        //メイン地図表示用のDivオブジェクトを取得しています
        var mapDiv = document.getElementById('nez_map');

        //URLの最終サブディレクトリ名を取得しています
        //placeは任意の値を使用することも可能ですが
        //    C:¥ms4w¥apps¥nez¥include¥sdjdemo¥config.phpファイル
        //(下線の部分)の参照先として利用されます
        var url = location.href;
        var url2 = url.substring(0, url.lastIndexOf('/'));
        var place = url2.substring(url2.lastIndexOf('/') + 1, url2.length);

        //メイン地図オブジェクトを生成します
        //第1パラメータはメイン地図表示用のDivオブジェクトを指定します
        //第2パラメータはconfig.phpファイルの参照先(http)を指定します
        //第3パラメータはブラウザのアドレス入力欄に座標位置と縮尺
        //を表示するか指定します(未指定時はfalse)
        gNezMap = new NezKaMap(mapDiv, place, true);

        //メイン地図初期処理を行います
        //上記のメイン地図オブジェクトを生成してから実行します
        //この処理を行わないと地図が表示されません
        gNezMap.initialize();

        //パンスクロール機能オブジェクトを生成します
        gCmdScroll = new NezNavi(gNezMap);

        //パンスクロール機能オブジェクトをメイン地図オブジェクトに設定しています
        //パンスクロール機能以外の機能についても同様の手順で利用することが出来ます
        //機能を一切使わないのであれば上記オブジェクト生成とsetToolを行う必要はありません
        gNezMap.setTool(gCmdScroll);

      }

    </script>
  </head>

  <!--style定義のwidth、height、margin、padding、overflowは変更出来ません-->
  <!--パンスクロール時にアイコン等が選択状態になってしまうのを防止するためです-->
  <!--style定義のbackground-colorは変更可能です-->
  <body style="width:100%;height:100%;margin:0px;padding:0px;
                               overflow:hidden;background-color:#dddddd;" 
 　　　　　　　　　　　　　　　onload="onInitialize();">

    <!--メイン地図表示用のＤＩＶタグです-->
    <!--style定義のpositionは変更出来ません-->
    <!--style定義のleft、top、width、heightを変更すると地図の表示位置、
    <!--                                                     表示サイズが変更出来ます-->
    <div id="nez_map" style="position:absolute;left:5px;top:35px;width:500px;
                                                                height:500px;"></div>

    <!--機能ツールバー表示用のＤＩＶタグです-->
    <div id="toolbar" style="position:absolute;left:5px;top:5px;height:35px;">

      <!--地図の広域表示(縮小)を行います、gNezMap.zoomOut()を実行すると即処理されます-->
      <img src="../../kamap/images/icon_set_nomad/tool_zoomout_1.png"  alt="縮小"     
　　　　　　　　　　　　　　　　　　　　　　　onclick="gNezMap.zoomOut();"></img>

      <!--地図の詳細表示(拡大)を行います、gNezMap.zoomIn()を実行すると即処理されます-->
      <img src="../../kamap/images/icon_set_nomad/tool_zoomin_1.png"   alt="拡大"     
　　　　　　　　　　　　　　　　　　　　　　　onclick="gNezMap.zoomIn();"></img>

      <!--地図の全域表示を行います、gNezMap.zoomToDefault()を実行すると即処理されます-->
      <img src="../../kamap/images/icon_set_nomad/tool_zoomfull_1.png" alt="全域表示" 
　　　　　　　　　　　　　　　　　　　　　　　onclick="gNezMap.zoomToDefault();"></img>

    </div>

  </body>
</html>

実行するとこんな画面が表示されるはずです。

今回はこれで終わりです。
今後はNezの様々な機能を紹介して行きます。
[上へ]

[Topページへ] [前回へ] [次回へ]