我該如何將「ol.Map」放入「Ext.panel.Panel」？

我正在開發一個帶有MVVM架構中的Extjs 6.0和OpenLayers 3.6.0的web gis。我想把ol.map設置爲Ext.panel.Panel。該項目的主要觀點是波紋管：我該如何將「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 此bug保持穩定，直到index.html文件I定義遵循css：

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

這css把ol.map到600x600箱，但我想ol.map適合Ext.panel.Panel。

我該怎麼辦？

來源

2015-06-08 Morteza Malvandi

提供一些文檔鏈接！ –

你可以創建一個小提琴嗎？ http://fiddle.sencha.com –

在渲染處理程序中，在聲明地圖變量後，是否可以不根據面板尺寸設置地圖高度和寬度？該小組通常會作爲第一個參數傳遞給最終的後任。在使用谷歌地圖時，我做了類似的事情，谷歌地圖API也可以讓你觸發一個調整大小的事件，根據它的包含元素來告訴它的大小，比如你的例子中的面板。你可以在OL api上做類似的事嗎？ – mindparse

ol.map類必須坐在一定的高度和寬度的組件。唯一需要的是最初的ol.map與afterlayout事件。

來源

2015-06-09 06:34:09

我有類似的問題，但我不明白你的解決方案。 'afterlayout'事件要做什麼？ – user427969

在'afterlayout'處理程序中創建'ol.map'。必須先配置'panel'，然後map實例坐在上面。 –

看看[這個問題]（http://gis.stackexchange.com/questions/150227/how-define-new-geoext-panel-map-with-openlayers-3-6-0-and-extjs-6- 0） –

您可以在4.2版本中使用的boxready事件Ext.Container，如建議在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); 
     } 
    }) 
];

來源

2015-11-18 14:42:13 Nurlan

@trincot，謝謝你的建議，我是新來的，在這裏寫asnwers，我純英文 – Nurlan

沒問題，不客氣。 – trincot

我該如何將「ol.Map」放入「Ext.panel.Panel」？

回答

相關問題