關於地理文本

Question

我正在嘗試開發在Web上覆蓋圖層的框架。爲此，我使用geoserver來發布圖層和geoext tree.js示例，以便像面板一樣顯示樹中的所有圖層。但是我遇到了縮放問題。當我使用Geoext tree.js例子，我試圖用這個例子覆蓋的圖層，圖層是放大和outat最大範圍。在下圖中它被清除。

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

你應該嘗試設置自己的ZoomLevels。看看the doc here。