Question

我正在MVVM架构中使用Extjs 6.0和OpenLayers 3.6.0开发一个web 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'
            }
        }]
});

首先我使用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");
    }
});

代码没有给出任何错误，但是当我运行它时，一切都很好，除非我想放大地图，它会缩放另一个地方。见下图： enter image description here 此错误保持稳定，直到index.html文件中我定义了跟随css：

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

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

我该怎么做？

Answer 1

您可以按照this answer on GIS Stack Exchange中的建议使用版本4.2上的boxready事件Ext.Container，其中提出了以下代码：

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);
        }
    })
];

Answer 2

ol.map类必须位于某个高度和宽度组件中。唯一需要的是初始ol.map与afterlayout事件。

如何将“ol.Map”装入“Ext.panel.Panel”？

2 个答案: