GeoExt 08 Toolbar with Actions - OpenLayers コントロールを追加

Example サイト
http://www.geoext.org/examples.html

「Toolbar with Actions」リンクをクリックすると OpenLayers controls in an Ext toolbar が表示されます。
toolbar.js を参考にします。

説明を意訳すると、GeoExt.Action クラスを使って OpenLayers コントロールを追加する方法を示します。

JS ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> JavaScript ファイル をクリック。
「JavaScript ファイル」ウィンドウの「ファイル名（任意：toolbar.js）」に入力して「完了」ボタンをクリック。
GeoExt 06 で使用したレイヤの例を参考に以下のように JavaScript を作成します。

Ext.onReady(function() {
 Ext.QuickTips.init();

// var map = new OpenLayers.Map();
 var map = new OpenLayers.Map('map', {
  controls: [
   new OpenLayers.Control.PanZoom(),
   new OpenLayers.Control.LayerSwitcher(),
   new OpenLayers.Control.MousePosition(),
   new OpenLayers.Control.ScaleLine()
  ],
  allOverlays: false,
  projection: new OpenLayers.Projection("EPSG:2456"),
  maxResolution: 'auto', // '183.594', '367.1875',
  maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
  units: 'meters',
  displayProjection: new OpenLayers.Projection("EPSG:4326")
 });

/*
 var wms = new OpenLayers.Layer.WMS(
  "Global Imagery",
  "http://maps.opengeo.org/geowebcache/service/wms",
  {layers: "bluemarble"}
 );
*/
 var layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
  "http://192.168.1.6/cgi-bin/mapserv?",
  {
   map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
   layers: 'height',
// isBaselayer: true,
   format: 'image/png'
 });
 var layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
  "http://192.168.1.6/cgi-bin/mapserv?",
  {
   map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map', 
   layers: 'kukaku',
   transparent: true,
   format: 'image/png'
 });
 var vector = new OpenLayers.Layer.Vector("vector");
// map.addLayers([wms, vector]);
 map.addLayers([layer1, layer2, vector]);

 var ctrl, toolbarItems = [], action, actions = {};
 // コントロールボタンを追加するツールバー

 // ZoomToMaxExtent control, a "button" control
 action = new GeoExt.Action({ // OpenLayers コントロールを追加
  control: new OpenLayers.Control.ZoomToMaxExtent(),
  map: map,
  text: "max extent",
  tooltip: "zoom to max extent"
 });
 actions["max_extent"] = action;
 toolbarItems.push(action);
 toolbarItems.push("-");

 // Navigation control and DrawFeature controls
 // in the same toggle group
 action = new GeoExt.Action({
  text: "nav",
  control: new OpenLayers.Control.Navigation(), // パン・ズーム
  map: map,
  // button options
  toggleGroup: "draw", // 同一グループは同時に動作しない
  allowDepress: false,
  pressed: true,
  tooltip: "navigate",
  // check item options
  group: "draw",
  checked: true
 });
 actions["nav"] = action;
 toolbarItems.push(action);

 action = new GeoExt.Action({
  text: "draw poly",
  control: new OpenLayers.Control.DrawFeature( // ポリゴン（面）描画
   vector, OpenLayers.Handler.Polygon
  ),
  map: map,
  // button options
  toggleGroup: "draw",
  allowDepress: false,
  tooltip: "draw polygon",
  // check item options
  group: "draw"
 });
 actions["draw_poly"] = action;
 toolbarItems.push(action);

 action = new GeoExt.Action({
  text: "draw line",
  control: new OpenLayers.Control.DrawFeature( // パス（線）描画
   vector, OpenLayers.Handler.Path
  ),
  map: map,
  // button options
  toggleGroup: "draw",
  allowDepress: false,
  tooltip: "draw line",
  // check item options
  group: "draw"
 });
 actions["draw_line"] = action;
 toolbarItems.push(action);
 toolbarItems.push("-");

 // SelectFeature control, a "toggle" control
 action = new GeoExt.Action({
  text: "select",
  control: new OpenLayers.Control.SelectFeature(vector, { // 選択
   type: OpenLayers.Control.TYPE_TOGGLE,
   hover: true
  }),
  map: map,
  // button options
  enableToggle: true,
  tooltip: "select feature"
 });
 actions["select"] = action;
 toolbarItems.push(action);
 toolbarItems.push("-");

 // Navigation history - two "button" controls
 ctrl = new OpenLayers.Control.NavigationHistory(); // 前（次）画面
 map.addControl(ctrl);

 action = new GeoExt.Action({
  text: "previous",
  control: ctrl.previous,
  disabled: true,
  tooltip: "previous in history"
 });
 actions["previous"] = action;
 toolbarItems.push(action);

 action = new GeoExt.Action({
  text: "next",
  control: ctrl.next,
  disabled: true,
  tooltip: "next in history"
 });
 actions["next"] = action;
 toolbarItems.push(action);
 toolbarItems.push("->");

 // Reuse the GeoExt.Action objects created above
 // as menu items
 toolbarItems.push({
  text: "menu",
  menu: new Ext.menu.Menu({
   items: [
    // ZoomToMaxExtent
    actions["max_extent"],
    // Nav
    new Ext.menu.CheckItem(actions["nav"]),
    // Draw poly
    new Ext.menu.CheckItem(actions["draw_poly"]),
    // Draw line
    new Ext.menu.CheckItem(actions["draw_line"]),
    // Select control
    new Ext.menu.CheckItem(actions["select"]),
    // Navigation history control
    actions["previous"],
    actions["next"]
   ]
  })
 });

 var mapPanel = new GeoExt.MapPanel({
  renderTo: "mappanel",
  height: 400,
  width: 600,
  map: map,
//  center: new OpenLayers.LonLat(5, 45),
//  zoom: 4,
  tbar: toolbarItems
 });
});

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext08_map-tool.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以前使用した OpenLayers.Layer.WMS レイヤの例を参考に以下のように HTML を作成します。
（geoext05_layer-tree.html をコピーし tree.js を追加し body タグ内を修正します。）

---
  <title>GeoExt08 Toolbar with Actions</title>
---
<!-- tool.js 追加 -->
  <script type="text/javascript" src="./tool.js"></script>

<!-- スタイルシート 追加 -->
  <style type="text/css">
/* work around an Ext bug that makes the rendering　of
   menu items not as one would expect */
   .ext-ie .x-menu-item-icon {
     left: -24px;
   }
   .ext-strict .x-menu-item-icon {
    left: 3px;
   }
   .ext-ie6 .x-menu-item-icon {
    left: -24px;
   }
   .ext-ie7 .x-menu-item-icon {
    left: -24px;
   }
  </style>

 </head>

 <body>
   <h1 id="title">GeoExt 08 Toolbar with Actions - OpenLayers コントロールを追加</h1>
   <p id="shortdesc">
    OpenLayers controls in an Ext toolbar
   </p>
   <p>This example shows how to add OpenLayers controls in an
   Ext toolbar. 
   GeoExt provides the GeoExt.Action class for adapting a control
   to an object that can be inserted in a toolbar or in a menu.<p>
   <p>この例では、外部のツールバーにある OpenLayers コントロールを追加する
   方法を示します。 
   GeoExtは、ツールバーまたはメニューに挿入することができるオブジェクトへ
    コントロールを適応するための  GeoExt.Action クラスを提供します。</p>
   
   <div id="mappanel"></div>

  </body>
</html>

GeoExt 07 - Map Tool Tutorial

ここでは、OpenLayers のコントロールパネルを設定します。
チュートリアルに従って測定コントロール（OpenLayers.Control.Measure）を追加します。
ツール（コントロール）のオンオフはボタン（ExtJS Button）を使います。

Layer Tree tutorial の最初の HTML コードを使います。
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext07_map-tool.html）」に入力して「完了」ボタンをクリック。
geoext02_layer-tree.html をすべてコピーし、貼り付けます。
以下のように修正します。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>GeoExt07 Map Tool Tutorial</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>
 
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
 
  <script src="./ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
  <script src="./ext-3.2.1/ext-all.js"  type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./ext-3.2.1/resources/css/ext-all.css"></link>

  <script src="./GeoExt/lib/GeoExt.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./GeoExt/resources/css/geoext-all-debug.css"></link>

  <script type="text/javascript">
   var map, layer1, layer2;

   Ext.onReady(function () {
    map = new OpenLayers.Map('map', {
     projection: new OpenLayers.Projection("EPSG:2456"),
     maxResolution: 'auto',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
     units: 'meters',
     displayProjection: new OpenLayers.Projection("EPSG:4326")
    });

    layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
       layers: 'height',
       isBaselayer: true,
       format: 'image/png'
    });
    layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map', 
       layers: 'kukaku',
       transparent: true,
       format: 'image/png'
    });

    map.addLayers([layer1, layer2]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.zoomToMaxExtent();

    var mapPanel = new GeoExt.MapPanel({
     renderTo: 'gxmap',
     height: 400,
     width: 600,
     map: map,
     title: 'A GeoExt Tree'
    });

    var layerList = new GeoExt.tree.LayerContainer({
     text: 'All Layers',
     layerStore: mapPanel.layers,
     leaf: false,
     expanded: true
    });

    var layerTree = new Ext.tree.TreePanel({
     title: 'Map Layers',
     renderTo: 'layerTree',
     root: layerList
    });

--- ここまで geoext02_map-tool.html と同じ ---

    var control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
     eventListeners: {
      measure: function(evt) {
       alert("The measurement was " + evt.measure + evt.units);
      }
     }
    });

    mapPanel.map.addControl(control);

    var button = new Ext.Button({
     text: 'Measure Things',
     renderTo: measure,
     enableToggle: true,
     handler: function(toggled){
      if (toggled) {
       control.activate();
      } else {
       control.deactivate();
      }
     }
    });

   });

  </script>
 </head>

 <body>
  <h1 id="title">GeoExt 07 Map Tool</h1>
  <p id="shortdesc">
   GeoExt JS Map Tool Tutorial.
  </p>
  <div id="gxmap"></div>
  <div id="layerTree"></div>
  <div id="measure"></div><!-- 追加 -->
  <div id="docs">
   <!-- 修正 -->
   <p>GeoExt JS の Map Tool Tutorial を参考に地図を表示します。</p>
  </div>
 </body>
</html>

mapPanel.getTopToolbar().addButton(button);
は後で。

複数のツールがマップに関連付けられているときは、複数のツールが同時にアクティブになることを避けます。
「There Can Be Only One」を参考にコードを修正します。

---
   var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
    eventListeners: {
     measure: function(evt) {
      alert("The length was " + evt.measure + evt.units);
     }
    }
   });

   // 追加
   var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
    eventListeners: {
     measure: function(evt) {
      alert("The area was " + evt.measure + evt.units);
     }
    }
   });
   mapPanel.map.addControl(length);
   mapPanel.map.addControl(area); // 追加

   var measureCtrl = "measure controls"; // 追加

   var lengthbutton = new Ext.Button({
    text: 'Measure length',
    renderTo: measureLength,
    enableToggle: true,
    toggleGroup: measureCtrl,
    handler: function(toggled){
     if (toggled) {
      length.activate();
     } else {
      length.deactivate();
     }
    }
   });

   var areabutton = new Ext.Button({
    text: 'Measure Area',
    renderTo: measureArea,
    enableToggle: true,
    toggleGroup: measureCtrl,
    handler: function(toggled){
     if (toggled) {
      area.activate();
     } else {
      area.deactivate();
     }
    }
   });
  </script>
 </head>

 <body>
  <h1 id="title">GeoExt03 Map Tool Tutorial</h1>
   <div id="tags"></div>
    <p id="shortdesc">
     GeoExt JS Map Tool Tutorial.
    </p>
 <div id="gxmap"></div>
 <div id="layerTree"></div>
 <div id="measureLength"></div>
 <div id="measureArea"></div>
    <div id="docs">
     <p>GeoExt JS の Map Tool Tutorial を参考に地図を表示します。</p>
    </div>
  </body>
</html>