0

OpenLayersを介して表示されるマップを含む拡張Ext.Panel.panelコンポーネントを作成しました。このコンポーネントは、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();
    }
});

ブラウザのサイズを変更すると、マップが更新され、正常に表示されます。それを機能させるための修正は何ですか？

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の代わりにGoogleマップを使用すると完全に機能するため、サイズ変更とはまったく関係ありません。問題は、SRS、BBOXなどのマップ属性が欠落していることです。OpenLayersの属性についてドキュメントを確認すると、機能します。

于 2015-02-19T15:06:19.313 に答える
0

ZoomIn（）、次にzoomOut（）を実行するとどうなりますか。または、初期ズームを11に設定し、マップを中央に配置した後でzoomIn（）を呼び出します。

于 2013-03-14T07:52:58.363 に答える