为什么Leaflet在React内平移和缩放的速度如此之慢? [英] Why is Leaflet so slow at pan and zoom inside React?

问题描述

我有一个相当简单的应用程序，它使用leaflet.js渲染了大约3000点.它的渲染速度相当快，但平移和缩放却非常慢.

I have a fairly simple application that renders around 3000 points using leaflet.js. It renders fairly quickly but pan and zoom are terribly slow.

看看chrome中的性能工具，看起来大部分时间都花在了重新计算样式上，但这并没有帮助.

Looking at the performance tools in chrome, it looks like most of the time is spend in recalculate styles, but that hasn't been helpful.

      <LeafletMap
        center={[50, 10]}
        zoom={6}
        maxZoom={10}
        preferCanvas={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {this.state.locations.map( (location, index) => {
            return (
              <Marker position={[location.latitude, location.longitude]}>
                <Popup>
                  Popup for any custom information.
                </Popup>
              </Marker> 
            )
        })}
    </LeafletMap>

推荐答案

我遇到了同样的问题，因为每次缩放它都会重新渲染所有标记，并且占用浏览器内存来绘制标记.因此，随着标记数量的增加，将会使您的地图变慢.

I faced the same issue, this happens because every time you zoom it re-renders all the markers and also it takes browser memory for plotting the markers. So, as the no of markers increases it will make your map slower.

因此，我使用了 https://github.com/manubb/Leaflet.PixiOverlay，这确实非常快，因为它在浏览器的HTML Canvas中呈现.我们也提供了React版本- https://www.npmjs.com/package/react-leaflet-pixi-overlay

So, I have used https://github.com/manubb/Leaflet.PixiOverlay, which is really fast, as it renders in HTML Canvas in browsers. We have react version also available for it - https://www.npmjs.com/package/react-leaflet-pixi-overlay

您也可以尝试相同的方法.

You can also try the same.

这篇关于为什么Leaflet在React内平移和缩放的速度如此之慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！