Как я могу поместить «ol.Map» в «Ext.panel.Panel»?

Question

Я разрабатываю веб-gis с Extjs 6.0 и OpenLayers 3.6.0 в MVVM Architecture. Я хочу поставить 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"); 
    } 
}); 

код не дает какой-либо ошибки , но когда я запускаю его, все хорошо, за исключением случаев, когда я хочу увеличить масштаб карты, он приближает другое место. см следующей картины: Эта ошибка остается стабильной, пока в index.html файле я определить следовать css:

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

Этого css положил ol.map в 600x600 коробки, но я хочу ol.map прилегания к Ext.panel.Panel.

Как это сделать?

Answer 1

Класс ol.map должен находиться в определенном компоненте высоты и ширины. Единственное, что требуется, это то, что начальный ol.map с событием afterlayout.

Answer 2

Вы можете использовать boxready событие Ext.Container на версии 4.2, как предложено в 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); 
     } 
    }) 
];