带有Leaflet的ReactJS:直到页面刷新后才能正确显示图块 [英] ReactJS with Leaflet: tiles not correctly displayed until page refresh

问题描述

我正在使用语义UI和ReactJS构建应用程序.我正在使用一个选项卡模块来包含地图，该模块使用Leaflet Javascript库来呈现地图.

I am building an application using Semantic UI and ReactJS. I am using a tab module to contain my map, which uses the Leaflet Javascript library to render the map.

问题在于，直到调整页面大小后，磁贴才能正确显示.

The problem is that the tiles do not display correctly until the page is resized.

这是我尝试过的:

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

似乎没有解决该问题.

我尝试设置超时，就像这样:

I tried setting a timeout, like so:

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，在我看来这有点疯狂.

Which sometimes worked by setting the timer to 2000, but sometimes it needed to be set to 5000, which is a bit crazy in my opinion.

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

From what I have read, calling the invalidateSize() function should fix the problem. Any help solving this problem would be greatly appreciated. Thank you.

推荐答案

包含地图的标签页可见后，调用invalidateSize.在语义UI的标签模块中，您可以使用onVisible回调:

Call invalidateSize once the tab containing your map becomes visible. In Semantic UI's tab module you can do that by using the onVisible callback:

在标签页可见后调用

Called after a tab becomes visible

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

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

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

这篇关于带有Leaflet的ReactJS:直到页面刷新后才能正确显示图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！