传单osm地图和extjs4门户渲染麻烦

Question

我正在尝试使用extjs 4和leaflet创建一个带有map的简单portlet。 问题是map不会完全出现在我的portlet元素中。 它加载了我的portlet之外的一些错误的tile（256x256）。这个错误的瓷砖位于左侧较高和较低侧。 有什么技巧可以解决吗？ 在屏幕截图中看起来如何。

也许这有助于找出答案？ 我认为这是因为img类中的left和top属性错误：

<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5121/" style="height: 256px; width: 256px; left: -79px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9905/5123/" style="height: 256px; width: 256px; left: 177px; top: 261px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5122/" style="height: 256px; width: 256px; left: -79px; top: 5px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9903/5121/" style="height: 256px; width: 256px; left: -335px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5121/" style="height: 256px; width: 256px; left: -591px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5120/" style="height: 256px; width: 256px; left: -591px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5120/" style="height: 256px; width: 256px; left: -847px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5119/" style="height: 256px; width: 256px; left: -847px; top: -763px;">

Answer 1

在面板完全呈现后，您需要调用L.Map的{​​{1}}方法：

  

检查地图容器大小是否更改并更新地图（如果是这样） - 在您动态更改地图大小后调用它，默认情况下也为动画设置动画。

http://leafletjs.com/reference.html#map-invalidatesize

我没有ExtJS专家，但我快速浏览了一下API，在我看来，你可以通过监听invalidateSize上发出的afterRender事件来做到这一点：< / p>

  

组件渲染完成后触发。

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-event-afterrender

编辑：找到这个示例，他们在Ext.panel.Panel的afterRender函数中初始化Google Map。这样做的原因相同：此时可以确定面板的大小，这是正确初始化地图实例的必要条件：

http://docs.sencha.com/extjs/4.0.7/#!/example/window/gmap.html

编辑2：由于OP说没有上述解决方案我修改了google示例以使用Leaflet并在Plunker上创建了一个测试用例：

http://embed.plnkr.co/Fo9nOYH3KUHRqw4Soq6F/

Answer 2

方法invalidateSize（）解决了我的问题。我把它放在地图调整大小事件上。