SDJ Mapserver Solutions
[Topページへ]    [前回へ]    [次回へ]   

第3回 Nez 初心者講座

この説明はWindows版を使用しています。
今回の講座では以下に示す地図表示においての基本動作について実現する方法を解説します。
  1. 地図レイヤの表示On／Offを制御
  2. 地図レイヤ制御ツリーを表示
  1. 地図レイヤの表示On／Offを制御

    • 前段準備

      • レイヤの制御を行うオブジェクトを作成するには、NezMapオブジェクトが初期化されている必要があります。
      ですので、以下に示すNezMapオブジェクトの初期処理直後のイベント内に定義します。 
        //メイン地図の初期処理を行った後実行する処理を記述します。

  gNezMap.onInitialize = function(){
    //この関数内にてNezMapオブジェクトを使用するオブジェクトの定義などを行います。
  };
    • レイヤを制御するコードを記述します。
      •   //メイン地図の初期処理を行った後実行する処理を記述します。
  gNezMap.onInitialize = function(){

  //指定したレイヤの表示／非表示を切り替えます。
  // -第１パラメータ：処理するレイヤ名称を指定
  // -第２パラメータ：true= 表示, false= 非表示
  gNezMap.kaMapObj.setLayerVisibility('GMAP', false);
  //gNezMap.kaMapObj.setLayerVisibility('GMAP', true);
   
  };
  2. 地図レイヤ制御ツリーを表示

    • 地図レイヤを制御する為に必要となるJavascriptファイルをインクルードします。
      • 
  <script language="JavaScript" src="../../kamap/kaLegend.js"></script>
    • 地図レイヤ情報を表示する領域を定義します。
      • 
  <div id="nez_layers" style="position:absolute;left:410px;top:250px;"></div>
    • 地図レイヤの情報を表示するオブジェクトを定義します。
      • 
  var legendOptions = {visibility:true,opacity:true,order:true,query:false};
  var akaLegend = new kaLegend(gNezMap.kaMapObj, 'nez_layers', false, legendOptions);

    ★今回の講座の全ての機能を含んだサンプルを以下に示します。

    下記サンプルはこちらからダウンロード出来ます。圧縮ファイル内のファイルを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="../../kamap/kaKeymap.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>

	<script language="JavaScript" src="../../kamap/kaLegend.js"></script>

	
    <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.onInitialize = function(){
        
            //レイヤツリーの表示
            var legendOptions = {visibility:true,opacity:true,order:true,query:false};
            var akaLegend = new kaLegend(gNezMap.kaMapObj, 'nez_layers', false, legendOptions);

            //指定したレイヤの表示／非表示を切り替えます。
            // -第１パラメータ：処理するレイヤ名称を指定
            // -第２パラメータ：true= 表示, false= 非表示
            //gNezMap.kaMapObj.setLayerVisibility('GMAP', false);
            //gNezMap.kaMapObj.setLayerVisibility('GMAP', 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:400px;height:400px;"></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>

    <!--レイヤ制御ツリー表示用のＤＩＶタグです-->
    <div id="nez_layers" style="position:absolute;left:410px;top:15px;"></div>

  </body>
</html>
    実行するとこのような画面が表示されるはずです。


今回はこれで終わりです。
次回は距離、面積の計測機能を解説します。

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