javascript - 关于geoext

Question

我正在尝试开发在网络上覆盖图层的框架。为此，我使用 geoserver 来发布图层，使用 geoext tree.js 示例来显示树状面板中的所有图层。但我遇到了放大和缩小的问题。当我使用 Geoext tree.js 示例时，我尝试使用此示例覆盖图层，该图层在最大范围内放大和缩小。在下图中，它被清除。

var mapPanel, tree;

Ext.application({
    name: 'Tree',
    launch: function() {
        mapPanel = Ext.create('GeoExt.panel.Map', {
            border: true,
            region: "center",
            map: {allOverlays: false},
            center: [74.60,16.84],
            zoom: 15,
            layers: [
                    new OpenLayers.Layer.WMS("Wi-Fi",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "wi-fi antena",
                        transparent: true,
                        format: "image/png"
                    },  {
                        singleTile: true,
                        visibility: false
                    }
                ),

                    new OpenLayers.Layer.WMS("Water Cooler",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "water cooler",
                        transparent: true,
                        format: "image/png"
                    },  {
                        singleTile: true,
                        visibility: false
                    }
                ),
                    new OpenLayers.Layer.WMS("Solar Pole",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "solar pole",
                        transparent: true,
                        format: "image/png"
                    },  {
                        singleTile: true,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Roads",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "road",
                        transparent: true,
                        format: "image/png"
                    },  {
                        singleTile: true,
                        visibility: false
                    }
                ),

                new OpenLayers.Layer.WMS("Optical Fiber Line",
                    "http://localhost:8082/geoserver/NewProject/wms",
                    {
                        layers: 'optical fiber line',
                        format: 'image/png',
                        transparent: true
                    },
                    {
                        singleTile: true,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Dustbin",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "dustbin",
                        transparent: true,
                        format: "image/png"
                    },  {
                        singleTile: true,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Drainage Line",
                    "http://localhost:8082/geoserver/NewProject/wms",
                    {
                        layers: 'drainage line',
                        format: 'image/png',
                        transparent: true
                    },
                    {
                        singleTile: true,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Contour",
                    "http://localhost:8082/geoserver/NewProject/wms",
                    {
                        layers: 'contour',
                        format: 'image/png',
                        transparent: true
                    },
                    {
                        singleTile: true,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Building",
                    "http://localhost:8082/geoserver/NewProject/wms",
                    {
                        layers: 'building',
                        format: 'image/png',
                        transparent: true
                    },
                    {
                        singleTile: true,
                        visibility: false
                    }
                ),
                 new OpenLayers.Layer.WMS("College",
                    "http://localhost:8082/geoserver/NewProject/wms", {
                        layers: "areaofcollege",
                        format: "image/png8"
                    }, {
                        buffer: 0,
                         singleTile: true,
                        visibility: false
                    }
                ),
            ]
        });
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'GeoExt.data.LayerTreeModel',
            root: {
                expanded: true,
                children: [
                    {
                        plugins: [{
                            ptype: 'gx_layercontainer',
                            store: mapPanel.layers
                        }],
                        expanded: true
                    },
                ]
            }
        });


        // create the tree with the configuration from above
        tree = Ext.create('GeoExt.tree.Panel', {
            border: true,
            region: "west",
            title: "Layers",
            width:200,
            split: true,
            collapsible: true,
            collapseMode: "mini",
            autoScroll: true,
            store: store,
            rootVisible: false,
            lines: false,

        });

        Ext.create('Ext.Viewport', {
            layout: "fit",
            hideBorders: true,
            items: {
                layout: "border",
                deferredRender: false,
                items: [mapPanel, tree, {
                    contentEl: "search",
                    region: "east",
                    bodyStyle: {"padding": "5px"},
                    collapsible: true,
                    collapseMode: "mini",
                    split: true,
                    width: 200,
                    title: "Search"
                }]
            }
        });

    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>WCE Campus</title>

        <!-- ExtJS -->
        <script type="text/javascript" src="include-ext.js"></script>

        <!-- Basic example styling -->
        <link rel="stylesheet" type="text/css" href="examples.css" />

    <link rel="stylesheet" type="text/css" href="Libs/geoext2-2.1.0/resources/css">

        <!-- You should definitely consider using a custom single-file version of OpenLayers -->
        <script src="Libs/OpenLayers-2.13.1/OpenLayers.js"></script>

        <script type="text/javascript" src="loader.js"></script>
         <script type="text/javascript" src="tree.js"></script>





    </head>
    <body>
        <div id="search">

        </div>
    </body>
</html>

Answer 1

您应该尝试设置自己的缩放级别。看看the doc here .