在Sencha-Touch中渲染Esri地图

Question

​

我在使用sencha touch渲染esri Map时遇到问题。我显示了一个tabPanel，其中有一个包含地图的选项卡以及其他3个选项卡。

我的问题是，当我在地图标签之外的另一个标签上，当我调整窗口大小(或改变手机的方向)时，地图消失了。

我找出了问题的根源。当我在另一个选项卡上调整窗口大小时，映射选项卡从当前大小变为0x0到新大小。问题是，当宽度和高度设置为0x0时，Esri Map需要尺寸为0x0的切片，然后出现错误。

我尝试将minWidth和minHeight设置为我的选项卡，但没有成功。

你知道我怎么解决这个问题吗？

提前谢谢你！

Answer 1

我相信我也有同样的问题(当时我真的不知道确切的原因)。每当屏幕方向改变时，我都会手动更改esri地图的尺寸以匹配面板，然后触发地图的reposition和resize方法。但是，如果这是从不同的面板触发的，底图将从地图中消失。

每次方向改变或地图面板被设置为活动时，我都可以通过调用以下函数来解决这个问题：

function resizeMapDiv(){
    if (appPanel.getActiveItem() === mapPanel){
        var mapdiv = document.getElementById('mapDiv');
        var mappanel = document.getElementById('mapPanel');

        if ((mapdiv != null) && (mappanel != null) && (mapdiv.style.width != mappanel.style.width)){
            mapdiv.style.width = mappanel.style.width;
            mapdiv.style.height = mappanel.style.height;

            map.reposition();
            map.resize();
        }
    }
}