javascript - 我怎样才能使 "ol.Map"适合 "Ext.panel.Panel"？

Question

我正在使用 Extjs 6.0 开发网络 gis和 OpenLayers 3.6.0在 MVVM 架构中。我想把 ol.map到 Ext.panel.Panel .元素主视图如下:

Ext.define('MyApp2.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp2.view.main.MainController',
        'MyApp2.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    items: [{
            xtype: 'panel',
            bind: {
                title: '{name}'
            },
            region: 'west',
            html: 'its me! - West Panel',
            width: 125,
            minWidth: 100,
            maxWidth: 250,

        }, {
            xtype: 'panel',
            region: 'center',
            collapsible: false,
            html: '<div id="map" class="map"></div>',
            listeners: {
                beforerender: 'beforerender',
                afterrender: 'afterrender'
            }
        }]
});

首先我渲染 panel与 html配置:<div id="map" class="map"></div>然后在 afterrender监听器初始化 ol.map如下:

Ext.define('MyApp2.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    requires: [
        'Ext.window.MessageBox'
    ],
    alias: 'controller.main',
    afterrender: function() {
        map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    title: "Global Imagery",
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/world/wms?service=WMS',
                        params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'}
                    })
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [35, 41],
                zoom: 4
            })
        });
    },
    beforerender: function(){
        console.log("Salam Bar Mahdi");
    }
});

代码没有给出任何错误，但是当我运行它时，一切都很好，除了当我想放大 map 时，它放大了另一个地方。见下图: 此错误在 index.html 之前一直保持稳定我定义的文件遵循 css :

<style>
.map {
    height: 600px;
    width: 600px;
}
</style>

这css放 ol.map到 600x600盒子，但我想要ol.map适合 Ext.panel.Panel .

我该怎么做？

Answer 1

您可以在版本 4.2 上使用 Ext.Container 的 boxready 事件，如 this answer on GIS Stack Exchange 中所建议的那样，其中提出了以下代码:

th.items = [
    Ext.create('Ext.Component', {
        initComponent: function () {
            var me = this;
            th.mapContainerId = me.id;
            me.on("boxready", function () {
                th.initMap();
            });
            me.on("resize", function () {
                if (th.mapInst) {
                    th.mapInst.updateSize();
                }
            });
            me.callParent(arguments);
        }
    })
];