0

我几乎完全遵循了 GeoExt2 LayerTree 示例。我的应用程序比示例复杂一点，但特定的地图/树元素几乎相同。

地图/树面板（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 之前，最终的 treestore 也是这样的：

// 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 回答