0

我创建了扩展的 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);
    }
});

应用程序.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();
    }
});

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

4

3 回答 3

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&layer=mapnik'
            }
        }],
        layout: "fit",
        listeners: {
            close: function () {
                this.remove(true);
            }
        },
        modal: true
    }).show();
}

在此处输入图像描述

于 2013-03-10T07:15:47.313 回答
1

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

于 2015-02-19T15:06:19.313 回答
0

如果你先放大（），然后再放大（）。或者将初始缩放设置为11，然后在地图居中后调用zoomIn()。

于 2013-03-14T07:52:58.363 回答