为什么 Leaflet 在 React 中平移和缩放速度这么慢？

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

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

      <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>

我遇到了同样的问题，发生这种情况是因为每次缩放时它都会重新渲染所有标记，并且还需要浏览器内存来绘制标记。因此，随着标记数量的增加，您的地图将会变慢。

所以，我用过https://github.com/manubb/Leaflet.PixiOverlay https://github.com/manubb/Leaflet.PixiOverlay，速度非常快，因为它在浏览器中的 HTML Canvas 中呈现。 我们也有可用的反应版本 -https://www.npmjs.com/package/react-leaflet-pixi-overlay https://www.npmjs.com/package/react-leaflet-pixi-overlay

你也可以尝试同样的方法。