带有 Leaflet 的 ReactJS：直到页面刷新才正确显示图块

Question

我正在使用 Semantic UI 和 ReactJS 构建应用程序。我正在使用一个选项卡模块来包含我的地图，它使用 Leaflet Javascript 库来渲染地图。

问题是在调整页面大小之前，磁贴无法正确显示。

这是我试过的：

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    map.setView([lat, long], zoom)
    map.invalidateSize(false)
  }
}

这似乎没有解决问题。

我尝试设置超时，如下所示：

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    Meteor.setTimeout(() => {
      map.invalidateSize(false)
    }, 2000)
    map.setView([lat, long], zoom)
  }
})

有时通过将计时器设置为 2000 来工作，但有时需要将其设置为 5000，我认为这有点疯狂。

据我所知，调用 invalidateSize() 函数应该可以解决问题。任何解决此问题的帮助将不胜感激。谢谢。

Answer 1

一旦包含您的地图的选项卡可见，请调用 invalidateSize。在语义 UI 的选项卡模块中，您可以使用 onVisible 回调来做到这一点：

Called after a tab becomes visible

http://semantic-ui.com/modules/tab.html#/settings

<div class="ui menu top">
    <a class="item" data-tab="map">Map</a>
</div>

$('.top.menu .item').tab({
    'onVisible': function () {
        // Do stuff
    }
});

带有 Leaflet 的 ReactJS：直到页面刷新才正确显示图块

ReactJS with Leaflet: tiles not correctly displayed until page refresh

javascript

leaflet

meteor

reactjs