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

Question

我正在 MVVM 架构中使用 Extjs 6.0 和 OpenLayers 3.6.0 开发网络 gis。我想把 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'
            }
        }]
});

首先我使用 html 配置渲染 panel：<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");
    }
});

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

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

这 css 将 ol.map 放入 600x600 框，但我希望 ol.map 适合 Ext.panel.Panel。

我该怎么办？

Answer 1

ol.map class 必须位于特定的高度和宽度组件中。唯一需要的是初始 ol.map 和 afterlayout 事件。

Answer 2

您可以在 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);
        }
    })
];

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

How can I fit "ol.Map" to "Ext.panel.Panel"?

javascript

css

extjs

mvvm

openlayers-3