Добавление MapPanel

GeoNik · Сообщение **GeoNik** » 16 дек 2014, 08:32

Доброго времени суток. Вот есть код

<html>
<head>

<title> A Basic GeoExt Page </title>
 <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
       

	   <script type="text/javascript" src="http://localhost:8080/geoserver/www/GeoExt/script/GeoExt.js"></script>

<script type="text/javascript">
    Ext.onReady(function() {
        var map = new OpenLayers.Map();
		var map1 = new OpenLayers.Map();
        var layer = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
		var layer1 = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
		
         map.addLayer(layer);
		

       var panel=new GeoExt.MapPanel({
            renderTo: 'gxmap',
			region: "center"
           height: 400,
            width: 600,
           map: map,
            title: 'A Simple GeoExt Map'
        });
			
		
	var viev=new Ext.Viewport({
            width: 500,
            height: 360,
            padding: 10,
            layout:'border',
            items: [{
                    xtype: 'panel',
                    title: 'Центральная панель',
                    html: 'Центральная панель',
                    region: 'center',
                    margin: '5 5 5 5'
                },{
                    xtype: 'panel',
                    title: 'Верхняя панель',
                    //html: 'Верхняя панель',
                    region: 'north',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Нижняя панель',
                    html: 'Нижняя панель',
                    region: 'south',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Левая панель',
                    html: 'Левая панель',
                    region: 'west',
                    width: 100
                },{
                    xtype: 'panel',
                    title: 'Правая панель',
                    html: 'Правая панель',
                    region: 'east',
                    width: 120
                }] ,
           
    });

    });
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>

Вся проблема в том что мне надо у контейнере Viewport вместо центральной панели отображать MapPanel.
Использую OpenLayers+GeoExt.
Заранее благодарен.

Эдуард Казаков

Здравствуйте.

Ну вот вы её правильно объявили:

Код: Выделить всё

var panel=new GeoExt.MapPanel({
            renderTo: 'gxmap',
         region: "center"
           height: 400,
            width: 600,
           map: map,
            title: 'A Simple GeoExt Map'
        });

Теперь при описании items у Viewport просто сошлитесь на этот объект:

Код: Выделить всё

var viev=new Ext.Viewport({
            width: 500,
            height: 360,
            padding: 10,
            layout:'border',
            items: [panel,
                   {
                    xtype: 'panel',
                    title: 'Верхняя панель',
                    //html: 'Верхняя панель',
                    region: 'north',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Нижняя панель',
                    html: 'Нижняя панель',
                    region: 'south',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Левая панель',
                    html: 'Левая панель',
                    region: 'west',
                    width: 100
                },{
                    xtype: 'panel',
                    title: 'Правая панель',
                    html: 'Правая панель',
                    region: 'east',
                    width: 120
                }] ,
           
    });

GeoNik · Сообщение **GeoNik** » 16 дек 2014, 20:46

Ну я тоже так сначала подумал. Но так не работает! Почему?

GeoNik · Сообщение **GeoNik** » 16 дек 2014, 21:46

Вот рабочий код

Код: Выделить всё

<html>
<head>

<title> A Basic GeoExt Page </title>
 <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
       

	   <script type="text/javascript" src="http://localhost:8080/geoserver/www/GeoExt/script/GeoExt.js"></script>

<script type="text/javascript">
    Ext.onReady(function() {
        var map = new OpenLayers.Map();
		var layer = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
		
		
         map.addLayer(layer);
		

       var panel=new GeoExt.MapPanel({
	      region: "center",
          map: map,
          
        });
		
		
		
		
	var viev=new Ext.Viewport({
            layout:'border',
            items: [panel,
			   {
                    xtype: 'panel',
                    title: 'Верхня панель',
                    html: 'Верхня панель',
                    region: 'north',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Нижня панель',
                    html: 'Нижня панель',
                    region: 'south',
                    height: 200
                },{
                    xtype: 'panel',
                    title: 'Ліва панель',
                    html: 'Ліва панель',
                    region: 'west',
                    width: 100
                },{
                    xtype: 'panel',
                    title: 'Права панель',
                    html: 'Права панель',
                    region: 'east',
                    width: 120
                }] ,
                
    });
	
    });
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>

Тема закрита!

Форумы GIS-Lab.info

Добавление MapPanel

Добавление MapPanel

Re: Добавление MapPanel

Re: Добавление MapPanel

Re: Добавление MapPanel

Кто сейчас на конференции