Question

我创建了扩展的Ext.Panel.panel组件，其中包含通过openlayers显示的地图，该组件位于Ext.Window.window中。但是在加载页面之后，地图只显示部分： http://habrastorage.org/storage2/17f/1be/3bd/17f1be3bdc2a9765c1852d93a95ee1b8.png

Ext.define('MA.view.components.OpenlayersPanel',
{
    extend: 'Ext.panel.Panel',
    alias: 'widget.openlayerspanel',
    multiSelect: true,

    initComponent: function()
    {
        this.callParent(arguments);
        this.on('afterrender', this.afterRender, this);
    },

    afterRender: function()
    {
        this.map = new OpenLayers.Map(this.body.dom.id);
        this.layer = new OpenLayers.Layer.OSM('OSM Map');
        this.fromProjection = new OpenLayers.Projection("EPSG:4326");
        this.toProjection = new OpenLayers.Projection("EPSG:900913");
        this.position = new OpenLayers.LonLat(75.1, 61.15).transform(this.fromProjection, this.toProjection);
        this.zoom = 12;
        this.map.addLayer(this.layer); 
        this.layer.setIsBaseLayer(true);           
        this.map.setCenter(this.position, this.zoom);
    }
});

app.js：

Ext.application(
{
    requires: ['Ext.container.Viewport'],
    name: 'MA',
    appFolder: 'app',
    controllers:
        [
            'Map'
        ],
    launch: function()
    {
        Ext.create('Ext.window.Window',
            {
                layout:
                {
                    type: 'vbox'
                },
                items:
                    [
                        {
                            xtype: 'openlayerspanel'
                        },
                        {
                            xtype: 'button',
                            text: 'Load',
                        }
                    ]
            }).show();
    }
});

当我调整浏览器大小时，地图会刷新并正常显示。有什么办法让它起作用？

Answer 1

如果除了调整大小之外没有其他工作，请尝试以编程方式调整大小：

//inside window listeners
show: function(){
  this.setWidth(this.getWidth() + 1); // or height
}

或使用超时定义地图 - 显示窗口后创建地图： 不是后退，而是显示

show: function(){
  setTimeout(function(){
    // init map here
    }, 100)
}

或使用此代码：

function ShowMapWindow() {
    Ext.create('Ext.window.Window', {
        width: 400,
        height: 300,
        items: [{
            loader: {
                loadMask: { showMask: true },
                renderer: 'frame',
                url: 'http://www.openstreetmap.org/export/embed.html?bbox=37.314,55.568,38.031,55.927&amp;layer=mapnik'
            }
        }],
        layout: "fit",
        listeners: {
            close: function () {
                this.remove(true);
            }
        },
        modal: true
    }).show();
}

enter image description here

Answer 2

我正在面对这个问题而且第一个解决方案的人用花哨的截图是错误的。它与调整大小完全无关，因为如果您使用谷歌地图而不是OSM，它可以完美地运行。问题是缺少地图属性，如SRS，BBOX等。检查文档中的OpenLayers属性，它会起作用。

Answer 3

如果放大（），然后缩小（），该怎么办？或者将初始缩放设置为11，然后在将地图居中后调用zoomIn（）。

Ext.Window.window中的地图显示不完整

3 个答案: