Leaflet osm图和extjs4传送门渲染麻烦

Question

我正在尝试使用 extjs 4 和 leaflet 创建一个带有地图的简单 portlet。问题是地图没有完全出现在我的 portlet 元素中。它加载了一些不在我的 portlet 中的错误图块 (256x256)。这个错误的牌在左边高，右边低。有什么技巧可以解决吗？在屏幕截图上，它看起来像这样。

也许这可以帮助找出答案？我认为这是因为 img class:

中错误的 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 的 invalidateSize 方法：

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.

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

我不是 ExtJS 专家，但我快速浏览了 API，在我看来你可以通过监听在 [=13] 上触发的 afterRender 事件来做到这一点=]:

Fires after the component rendering is finished.

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

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

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

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

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

Answer 2

方法invalidateSize()解决了我的问题。我把它放在地图调整大小事件中。

Leaflet osm图和extjs4传送门渲染麻烦

Leaflet osm map and extjs4 portal rendering trouble

portlet

extjs4

leaflet