0

GeoExt2 LayerTree Exampleをほぼ正確に実行しました。私のアプリケーションは例よりも少し複雑ですが、特定のマップ/ツリー要素はほぼ同じです。

マップ/ツリー パネル (Ext.Panel) の位置は次のとおりです。

Viewport
 \--Ext.tab.Panel (MapTabs)
     \--Ext.Panel (ArcticTab) <- Map and Tree for "Arctic" location
         \--GeoExt.panel.Map
         \--GeoExt.tree.Panel
     \--Ext.Panel (AntarcticTab) <- Map and Tree for "Antarctic" location
         \--GeoExt.panel.Map
         \--GeoExt.tree.Panel

さまざまな場所 (北極と南極) を別々のタブに分け、それぞれにマップとツリーを表示します。

ビューポート コードは次のとおりです。

Ext.define('OPS.view.Viewport', {
    extend: 'Ext.container.Viewport',

    layout: 'border',
    defaults: {
        collapsible: false,
        split: true,
        bodyStyle: 'padding:15px'
    },

    requires: [
        'OPS.view.Menus.Menus',
        'OPS.view.HeaderBar.HeaderBar',
        'OPS.view.FooterBar.FooterBar',
        'OPS.view.MapTabs.MapTabs',
        'OPS.Global',
    ],

    initComponent: function() {

        this.items = [
            // HEADER
            {
                xtype: 'headerbar',
                region: 'north',
                margins: '5 5 5 5',
                height: 0,
                maxSize: 0,
                collapsed: true,
                hideCollapseTool: true,
            },      
            // MENU
            {
                xtype: 'menus',
                region: 'west',
                margins: '0 5 0 5',
                collapsible: true,
                bodyStyle: 'padding:0px',
                width: 300,
                minWidth: 300,
                maxWidth: 300,
            },
            // MAP
            {
                xtype: 'maptabs',
                region: 'center',
                margins: '0 5 0 0',
                bodyStyle: 'padding:0px',
                collapsible: false,
                header: false,
            },
            // FOOTER
            {
                xtype: 'footerbar',
                region: 'south',
                margins: '5 5 5 5',
                height: 0,
                maxSize: 0,
                collapsed: true,
                hideCollapseTool: true,
            },              
        ]

        this.callParent();
    }
});

ビューポートから「maptabs」ビューを参照します。そのコードは次のとおりです。

Ext.define('OPS.view.MapTabs.MapTabs' ,{

    extend: 'Ext.tab.Panel',
    alias: 'widget.maptabs',

    requires: [
        'OPS.view.MapTabs.ArcticTab.ArcticTab',
        'OPS.view.MapTabs.AntarcticTab.AntarcticTab'
    ],

    initComponent: function() {

        this.items = [
            {
                xtype: 'arctictab',
                collapsible: false,
                header: false,
            },
            {
                xtype: 'antarctictab',
                collapsible: false,
                header: false,
            }
        ]

        this.callParent(arguments);
    }
});

maptabs では、各タブ ビュー (arctictab と antarctictab) を確認できます。arctictab のコードは次のとおりです。

// OPENLAYERS WMS URL
var arcticWms = OPS.Global.baseUrl.concat('/geoserver/arctic/wms');

// GEOEXT MAP PANEL CONFIGURATION
var arcticMapPanel = Ext.create('GeoExt.panel.Map', {
    //border: true,
    region: 'center',
    map: {
        allOverlays: false,
        projection: 'EPSG:3413',
        units: 'm',
        maxExtent: new OpenLayers.Bounds(-8125549,-6101879,8186727,3197247),
        controls: [
            //new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}}),
            new OpenLayers.Control.Zoom(),
            //new OpenLayers.Control.MousePosition({prefix: '<a target="_blank" ' +'href="http://spatialreference.org/ref/epsg/3413/">' +'EPSG:3413</a>: '}),
            //new OpenLayers.Control.ScaleLine(),
            //new OpenLayers.Control.LayerSwitcher({'ascending':false}),        
        ]
    },
    center: [110200, -1900000],
    zoom: 4,
    layers: [

        // BASE LAYERS
        new OpenLayers.Layer.WMS(
            "Natural Earth I",
            arcticWms,
            {layers: 'arctic:arctic_naturalearth'},
            {isBaseLayer:true}
        ),

        new OpenLayers.Layer.WMS(
            "Greenland Coastline",
            arcticWms,
            {layers: 'arctic:greenland_coastline',transparent:true},
            {isBaseLayer:true,visibility:false}
        ),

        // OVERLAYS
        new OpenLayers.Layer.WMS(
            "Radar Depth Sounder Flightlines",
            arcticWms,
            {layers: 'arctic:arctic_rds_line_paths',transparent:true},
            {isBaseLayer:false,visibility:true}
        ),

    ]
});

// CREATE A TREESTORE FOR ALL LAYERS
var arcticStore = Ext.create('Ext.data.TreeStore', {
    model: 'GeoExt.data.LayerTreeModel',
    root: {
        expanded: true,
        children: [
            {
                plugins: [{
                    ptype: 'gx_layercontainer',
                    loader: {store: arcticMapPanel.layers} // LAYERS FROM ABOVE arcticMapPanel
                }],
                expanded: true,
                text: 'Layers'
            }
        ]
    }
});

// CREATE A TREEPANEL FOR arcticStore
var arcticTree = Ext.create('GeoExt.tree.Panel', {
    //border: true,
    region: 'east',
    title: 'Map Layer Selection',
    width: 200,
    collapsible: true,
    autoScroll: true,
    store: arcticStore,
    rootVisible: true,
    lines: true,
});

// DEFINE THE ArcticTab PANEL (INCLUDE MAP AND TREE)
Ext.define('OPS.view.MapTabs.ArcticTab.ArcticTab' ,{

    extend: 'Ext.Panel',

    layout: 'border',
    defaults: {
        collapsible: false,
        bodyStyle: 'padding:0px'
    },

    alias: 'widget.arctictab',
    title: 'Arctic',

    deferredRender: false,
    items: [arcticMapPanel,arcticTree] // GEOEXT MAP PANEL AND 
});

ご覧のとおり、形式はドキュメントの状態とまったく同じです。以下は、私が得た結果を示す画像です。

ここに画像の説明を入力

4

1 に答える 1

2

今後の参考のために：

追加した：

Ext.require([
    'GeoExt.tree.LayerContainer',
    'GeoExt.tree.OverlayLayerContainer',
    'GeoExt.tree.BaseLayerContainer',
    'GeoExt.data.LayerTreeModel',
]);

app.js で Ext.Application を定義する前に、最終的なツリーストアも次のようになります。

// CREATE A TREESTORE FOR ALL LAYERS
var arcticStore = Ext.create('Ext.data.TreeStore', {
    model: 'GeoExt.data.LayerTreeModel',
    root: {
        expanded: true,
        children: [
            {
                plugins: [{
                    ptype: 'gx_overlaylayercontainer',
                    loader: {store: arcticMapPanel.layers} // OVERLAY "DATA" LAYERS FROM arcticMapPanel
                }],
                expanded: true,
                text: 'Data Layers'
            },
            {
                plugins: [{
                    ptype: 'gx_baselayercontainer',
                    loader: {store: arcticMapPanel.layers} // BASE "REFERENCE" LAYERS FROM arcticMapPanel
                }],
                expanded: true,
                text: 'Reference Layers'
            },
        ]
    }
});
于 2014-02-04T00:17:37.770 に答える