Advertisement
Guest User

Untitled

a guest
Feb 7th, 2012
483
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>GeoExt Workshop Application</title>
  4.         <script src="../resources/js/ext-3.4.0/ext-base.js" type="text/javascript"></script>
  5.         <script src="../resources/js/ext-3.4.0/ext-all.js"  type="text/javascript"></script>
  6.         <link rel="stylesheet" type="text/css" href="../resources/js/ext-3.4.0/resources/css/ext-all.css"/>
  7.  
  8.         <link rel="stylesheet" href="../resources/js/OpenLayers/theme/default/style.css" type="text/css" />
  9.         <script src="../resources/js/OpenLayers/OpenLayers.js" type="text/javascript"></script>
  10.  
  11.         <script src="../resources/js/GeoExt/GeoExt.js" type="text/javascript"></script>        
  12.         <link rel="stylesheet" type="text/css" href="../resources/js/GeoExt/css/geoext-all.css"/>
  13.  
  14.  
  15.         <script>
  16.             Ext.BLANK_IMAGE_URL = "../resources/js/ext-3.4.0/resources/images/default/s.gif";
  17.             var app, items = [], controls = [];
  18.             var lon = 84.3;
  19.             var lat = 28;
  20.             var zoom = 8;
  21.             var url = "http://192.168.70.65:8182/geoserver/wms";
  22.             Ext.onReady(function() {            
  23.                 app = new Ext.Viewport({
  24.                     layout: "border",
  25.                     items: items
  26.                 });              
  27.             });
  28.            
  29.            
  30.            
  31.             items.push({
  32.                 xtype: "gx_mappanel",
  33.                 ref: "mapPanel",            
  34.                 region: "center",            
  35.                 map: {              
  36.                     numZoomLevels: 19,
  37.                     controls: controls
  38.                 },
  39.                 zoom:8,
  40.                 center:[lon,lat],
  41.                 layers: [              
  42.                     new OpenLayers.Layer.WMS( "Border",
  43.                     url,
  44.                     {layers: 'GisData:BORDER' ,transparent: "true",format: "image/png"}),
  45.                     new OpenLayers.Layer.WMS( "Down Sites",
  46.                     url,
  47.                     {layers: 'GisData:sites', transparent: "true",format: "image/png"})                
  48.                 ]
  49.             });            
  50.            
  51.        
  52.             controls.push(
  53.             new OpenLayers.Control.Navigation(),
  54.             new OpenLayers.Control.Attribution(),
  55.             new OpenLayers.Control.PanPanel(),
  56.             new OpenLayers.Control.ZoomPanel()
  57.            
  58.         );
  59.            
  60.             items.push({
  61.                 xtype: "treepanel",
  62.                 ref: "tree",
  63.                 region: "west",
  64.                 width: 200,
  65.                 autoScroll: true,
  66.                 enableDD: true,
  67.                 animate: true,
  68.                 containerScroll: true,              
  69.                 border: true,      
  70.                 title: "Layers",                
  71.                 split: true,
  72.                 collapsible: true,
  73.                 collapseMode: "mini",
  74.                 autoScroll: true,
  75.                 plugins: [
  76.                     new GeoExt.plugins.TreeNodeRadioButton()
  77.                 ],
  78.                 root: new GeoExt.tree.LayerContainer({
  79.                     expanded: true
  80.                 }),
  81.                 bbar: [{
  82.                         text: "Show legend Window",
  83.                         handler: function() {                          
  84.                           var window =  new Ext.Window({
  85.                                 title: "Legend",
  86.                                 width: 200,
  87.                                 height:200,
  88.                                 layout: "fit",
  89.                                 collapsible: true,
  90.                                 autoScroll:true,
  91.                                 maximizable: true,
  92.                                 items: [{
  93.                                         xtype: "gx_legendpanel",
  94.                                         region: "east",
  95.                                         width: 200,
  96.                                         autoScroll: true,
  97.                                         padding: 5
  98.                                     }]
  99.                             });                              
  100.                          
  101.                           window.show();
  102.                           window.alignTo(Ext.getBody(), "tr-tr", [-10, 10]);
  103.                         }
  104.                     }]
  105.             });
  106.            
  107.             controls.push(new OpenLayers.Control.WMSGetFeatureInfo({              
  108.                 autoActivate: true,
  109.                 infoFormat: "application/vnd.ogc.gml",
  110.                 maxFeatures: 3,
  111.                 eventListeners: {
  112.                     "getfeatureinfo": function(e) {
  113.                         alert(e.xy);
  114.                         var items = [];
  115.                         Ext.each(e.features, function(feature) {
  116.                             items.push({
  117.                                 xtype: "propertygrid",
  118.                                 title: feature.fid,
  119.                                 source: feature.attributes
  120.                             });
  121.                         });
  122.                         new GeoExt.Popup({
  123.                             title: "Info",
  124.                             width: 200,
  125.                             height: 200,
  126.                             layout: "accordion",
  127.                             map: app.mapPanel,
  128.                             location: e.xy,
  129.                             maximizable: true,
  130.                             collapsible: true,
  131.                             items: items
  132.                         }).show();
  133.                     }
  134.                 }
  135.             }));
  136.        
  137.         </script>
  138.     </head>
  139.     <body>
  140.     </body>
  141. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement