GeoExt22 Tree Legend

GeoExt Legend Tree

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

「Tree Legend」リンクをクリックすると GeoExt Legend Tree が表示されます。
tree-legend.js. を参考にします。

説明を意訳すると、ツリー内のレイヤノードに凡例を追加する方法を示します。

// custom layer node UI class
var LayerNodeUI = Ext.extend(
 GeoExt.tree.LayerNodeUI,
 new GeoExt.tree.TreeNodeUIEventMixin()
);

Ext.onReady(function() {
 // 東京都用マップ設定
 var map = new OpenLayers.Map('map', {
  controls: [
   new OpenLayers.Control.PanZoom(),
   new OpenLayers.Control.LayerSwitcher(),
   new OpenLayers.Control.MousePosition(),
   new OpenLayers.Control.ScaleLine()
  ],
  allOverlays: true,
  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 mapPanel = new GeoExt.MapPanel({
  region: "center",
// center: [146.1569825, -41.6109735],
// zoom: 6,
  map: map,
  layers: [
   // 東京都レイヤ
   new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
     layers: 'kukaku',
     transparent: true,
     format: 'image/png'
    }, {
     buffer: 0,
     displayInLayerSwitcher: false
   }),
   // 新幹線レイヤ
   new OpenLayers.Layer.WMS( "Railroad Shinkansen WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_pf_pgis.map',
     layers: 'shinkansen',
     transparent: true,
     format: 'image/png'
    },{
     buffer: 0,
     projection: new OpenLayers.Projection("EPSG:4326")
   }),
   // JR レイヤ
   new OpenLayers.Layer.WMS( "Railroad JR Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_pf_pgis.map',
     layers: 'jrline',
     transparent: true,
     format: 'image/png'
    },{
     buffer: 0,
     projection: new OpenLayers.Projection("EPSG:4326")
   }),
   // 私鉄 レイヤ
   new OpenLayers.Layer.WMS( "Railroad Private Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_pf_pgis.map',
     layers: 'privateline',
     transparent: true,
     format: 'image/png'
    },{
     buffer: 0,
     projection: new OpenLayers.Projection("EPSG:4326")
   })
  ]
 });

 var tree = new Ext.tree.TreePanel({
  region: "east",
  title: "Layers",
  width: 250,
  autoScroll: true,
  enableDD: true,
  // apply the tree node component plugin to layer nodes
  plugins: [{
   ptype: "gx_treenodecomponent"
  }],
  loader: {
   applyLoader: false,
   uiProviders: {
    "custom_ui": LayerNodeUI
   }
  },
  root: {
   nodeType: "gx_layercontainer",
   loader: {
    baseAttrs: {
     uiProvider: "custom_ui"
    },
    createNode: function(attr) {
     // add a WMS legend to each node created
     attr.component = {
      xtype: "gx_wmslegend",
      layerRecord: mapPanel.layers.getByLayer(attr.layer),
      showTitle: false,
      // custom class for css positioning
      // see tree-legend.html
      cls: "legend"
     }
     return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
    }
   }
  },
  rootVisible: false,
  lines: false
 });

 new Ext.Viewport({
  layout: "fit",
  hideBorders: true,
  items: {
   layout: "border",
   items: [
    mapPanel, tree, {
     contentEl: desc,
     region: "west",
     width: 250,
     bodyStyle: {padding: "5px"}
    }
   ]
  }
 });
});

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext22_tree-legend.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext21_legendpanel.html をコピーし、外部 JavaScript 読み込みファイルを修正し凡例の文字のスタイルを設定し body タグ内にターゲット id を設定します。

  <title>GeoExt22 Tree Legend</title>
---
<!-- tree-legend.js 追加 -->
  <script type="text/javascript" src="./tree-legend.js"></script>
<!-- Viewportのスタイル 追加 -->
  <style type="text/css">
   .legend {
    padding-left: 18px;
   }
    .x-tree-node-el {
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
   }
    .x-tree-ec-icon {
    width: 3px;
   }
    .gx-tree-layer-icon {
    display: none;
   }
  </style>

 </head>
 <body>

  <div id="desc">
   <h1 id="title">GeoExt 22 - Tree Legend</h1>
   <p id="shortdesc">
    GeoExt Legend Tree
   </p>
   <p>This example shows how to add legends to the layer nodes in a tree.</p>

   <p>この例では、ツリー内のレイヤノードに凡例を追加する方法を示します。</p>
  </div>

 </body>
</html>

マップファイルの LAYER の CLASS NAME と STYLE が凡例に使われています。