第2回 Nez 初心者講座

1. 地図の縮尺を表示する
2. スケールバーを表示する
3. 地図の中心位置の緯度経度座標を表示する
4. 索引図（広域図）を表示する

1. 地図の縮尺を表示する
   
   
   • 前段準備
   縮尺を表示するには、「NezMap」オブジェクトが初期化されている必要があります。
   以下に示す「NezMap」オブジェクトの初期処理直後のイベント内に定義します。

     //メイン地図の初期処理を行った後実行する処理を記述します。
   
     gNezMap.onInitialize = function(){
       //ここより「NezMap」オブジェクトを使用するオブジェクトの定義などを行います。
     };
   
   

   縮尺を表示するには、地図の縮尺が変更された直後に発生するイベント内に記述する必要があります。
   以下に示す「NezMap」オブジェクトの地図縮尺変更直後のイベント内に定義します。

     //地図縮尺変更直後発生するイベント
   
     gNezMap.onscalechanged = function() {
       //ここより地図縮尺変更した直後に処理するコードを記述。
     }
   
   

   • 縮尺を表示する領域を定義します。

   
     <div id="scale" style="font-size: 12px; position: absolute; left: 5px; top: 440px;"></div>
   
   

   • 縮尺を表示するコードを実装します。
   
   地図上で縮尺が変更された際発生する「NezMap」オブジェクトの「onscalechanged」イベントに処理を記述します。

   
     //NezMapオブジェクトの縮尺変更イベント
     gNezMap.onscalechanged = function() {
       
       //現在の縮尺を取得します
       var currentScale=gNezMap.kaMapObj.getCurrentScale();
       
       //縮尺を表示する領域（Div要素）を指定します
       var scaleCaption = document.getElementById('scale');
   
       //縮尺を表示します
       scaleCaption.innerHTML = '1/'+currentScale;
   
     }
     
     gNezMap.onInitialize = function(){
   
       //座標を表示する定義
       gNezMap.addCommand(new CoordsInfoCmd(gNezMap, 'nez_coord', 2454, 0,"緯度","経度","","","度","分","秒"));
   
       //縮尺変更イベントを１度実施します（この記述により、起動直後の縮尺表示を行います）
       gNezMap.onscalechanged();
     };
   
   
   

2. スケールバーを表示する
   
   
   • スケールバーを表示する為に必要となるJavascriptファイル及びスタイルファイルをインクルードします。

   
     <script language="JavaScript" src="../../kamap/scalebar/scalebar.js"></script>
     <link rel="stylesheet" type="text/css" href="../../kamap/scalebar/scalebar-fancy.css">
   
   

   • スケールバーを表示する領域を定義します。

   
     <div id="nez_scale_bar" style="width:200px;height:50px;background-color:#FFFFFF;
                                       font-size:11px;left:205px;top:385px;width:200px;position:absolute;"></div>
   
   

   • スケールバーを表示するオブジェクトを定義します。
   
   

   
       //スケールバーオブジェクト生成
       this.scalebar = new ScaleBar(1);   
       
       //スケールバーの目盛数をセット
       this.scalebar.divisions = 3;
       
       //スケールバーの目盛分割数をセット
       this.scalebar.subdivisions = 2;
       
       //スケールバー最小サイズをセット
       this.scalebar.minWidth = 140;
       
       //スケールバー最大サイズをセット
       this.scalebar.maxWidth = 180;
       
       //スケールバー表示するDiv要素を指定
       this.scalebar.place('nez_scale_bar');
   
       gNezMap.onscalechanged = function() {
   
         var currentScale=gNezMap.kaMapObj.getCurrentScale();
   
         var scaleCaption = document.getElementById('scale');
   
         scaleCaption.innerHTML = '1/'+currentScale;
   
   
         //縮尺が更新された際、スケールバーの情報も更新する
         scalebar.update(this.getCurrentScale());
   
       }
   
   

3. 地図の中心位置の座標を表示する
   
   
   • 地図の中心位置の座標を表示する為に必要となるJavascriptファイルをインクルードします。
   
   （サンプルでは扱う座標種類は緯度経度になっています。）

   
     <script language="JavaScript" src="../../javascript/Conversion.js"></script>
     <script language="JavaScript" src="../../javascript/LatLonInfoCmd.js"></script>
     <script language="JavaScript" src="../../javascript/CoordInfoCmd.js"></script>
   
   

   • 座標を表示する領域を定義します。

   
     <div id="nez_coord" style="font-size:12px;position:absolute;left:5px;top:440px;"></div>
   
   

   • 座標を表示するオブジェクトを定義します。
   
   「CoordsInfoCmd」オブジェクトを作成します。
   
   • 第1パラメータ：「NezMap」オブジェクトを指定
   • 第2パラメータ：座標を表示する対象となるDiv要素を指定
   • 第3パラメータ：変換が必要な場合、平面直角座標のSRIDを指定
   • 第4パラメータ：座標表示モードを指定
   
   0= Mapファイルに定義されているSRIDの座標を表示
   1= 緯度経度から平面直角座標に変換して表示
   2= 平面直角座標から緯度経度に変換して表示
   • 第5パラメータ：緯度のキャプションを指定
   • 第6パラメータ：経度のキャプションを指定
   • 第7パラメータ：X座標のキャプションを指定
   • 第8パラメータ：Y座標のキャプションを指定
   • 第9パラメータ：度のキャプションを指定
   • 第10パラメータ：分のキャプションを指定
   • 第11パラメータ：秒のキャプションを指定
   「NezMap」オブジェクトの「addCommand」関数にて「CoordsInfoCmd」オブジェクトを登録します。

   
     //座標を表示する定義
     gNezMap.addCommand(new CoordsInfoCmd(gNezMap, 'nez_coord', 2454, 0,"緯度","経度","","","度","分","秒"));
   
   

4. 索引図（広域図）を表示する
   
   
   • 索引図を表示する為の前提条件として、MapserverのMapファイルに索引図の情報を定義する必要があります。
   
   ※サンプルのMapファイルには既に定義してあります。

   MAP
     EXTENT 141.3127077164415 43.035753172254566 141.39064860688293 43.08678778788984
     IMAGECOLOR 68 200 243 
     IMAGETYPE png
     SHAPEPATH "data/"
     SIZE 600 400
     STATUS ON
     UNITS dd
     PROJECTION
     "init=epsg:4326"
     END
      NAME "HokkaidoMap"
   
     REFERENCE
     EXTENT 141.310 43.02 141.39000 43.10    #索引図の領域を指定します（全体領域の左下座標／右上座標）
       SIZE 200 200   #索引図として使用するイメージファイルのサイズをピクセル単位で指定します。
       IMAGE data/keymap.png   #索引図として使用するイメージファイルのパスを指定します。
     END
   
      ・
      ・
      ・
   

   • 索引図を表示する為に必要となるJavascriptファイルをインクルードします。

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

   • 索引図を表示する領域を定義します。

   
     <div style="overflow:hidden;position:absolute;left:810px;top:35px;width:200px;height:200px;">
       <div id="nez_reference" style="position:absolute;"></div>
     </div>
   
   

   • 索引図を表示するオブジェクトを定義します。

   
     //索引図を表示するオブジェクトの定義
     var keymap = new kaKeymap(gNezMap.kaMapObj, 'nez_reference');
   
   

   
   ★今回の講座の全ての機能を含んだサンプルを以下に示します。
   
   下記サンプルはこちらからダウンロード出来ます。圧縮ファイル内のファイルを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="../../javascript/Conversion.js"></script>
       <script language="JavaScript" src="../../javascript/LatLonInfoCmd.js"></script>
       <script language="JavaScript" src="../../javascript/CoordInfoCmd.js"></script>
   
   
       <!--↓↓↓スケールバーを表示する為の宣言です-->
       <script language="JavaScript" src="../../kamap/scalebar/scalebar.js"></script>
       <link rel="stylesheet" type="text/css" href="../../kamap/scalebar/scalebar-fancy.css">
   
   	
       <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);
   
           //索引図を表示するオブジェクトの定義
           var keymap = new kaKeymap(gNezMap.kaMapObj, 'nez_reference');
   
   
           //スケールバーオブジェクト生成
           this.scalebar = new ScaleBar(1);   
           
           //スケールバーの目盛数をセット
           this.scalebar.divisions = 3;
               
           //スケールバーの目盛分割数をセット
           this.scalebar.subdivisions = 2;
           
           //スケールバー最小サイズをセット
           this.scalebar.minWidth = 140;
           
           //スケールバー最大サイズをセット
           this.scalebar.maxWidth = 180;
           
           //スケールバー表示するDiv要素を指定
           this.scalebar.place('nez_scale_bar');
   
           //スケールバー表示するDiv要素を指定
           this.scalebar.place('nez_scale_bar');
   
           gNezMap.onInitialize = function(){
   
               //座標を表示する定義
               gNezMap.addCommand(new CoordsInfoCmd(gNezMap, 'nez_coord', 2454, 0,"緯度","経度","","","度","分","秒"));
   
               //縮尺変更イベントを１度実施します（この記述により、起動直後の縮尺表示を行います）
               gNezMap.onscalechanged();
   
           }
   
           //NezMapオブジェクトの縮尺変更イベント
           gNezMap.onscalechanged = function() {
   
               //現在の縮尺を取得します
               var currentScale=gNezMap.kaMapObj.getCurrentScale();
   
               //縮尺を表示する領域（Div要素）を指定します
               var scaleCaption = document.getElementById('scale');
   
               //縮尺を表示します
               scaleCaption.innerHTML = '1/'+currentScale;
   
               //縮尺が更新された際、スケールバーの情報も更新する
               scalebar.update(this.getCurrentScale());
   
           }
   
           //メイン地図初期処理を行います
           //上記のメイン地図オブジェクトを生成してから実行します
           //この処理を行わないと地図が表示されません
           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_coord" style="font-size: 12px; position: absolute;left:5px;top:440px;"></div>
   
   
       <!-- 索引図を表示する領域を定義します -->
       <div style="overflow: hidden; position: absolute; left: 410px; top: 35px; width: 200px; height: 200px;">
           <div id="nez_reference" style="position:absolute;"></div>
       </div>
   
   
       <!-- スケールバーを表示する領域を定義します -->
       <div id="nez_scale_bar" style="width:200px;height:50px;background-color:#FFFFFF;
                                         font-size:11px;left:205px;top:385px;width:200px;position:absolute;"></div>
   
   
       <!-- 縮尺を表示する領域を定義します -->
       <div id="scale" style="font-size: 12px; position: absolute; left: 100px; top: 15px;"></div>
   
     </body>
   </html>
   
   
   

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