为什么小叶在React内平移和缩放这么慢？

Question

我有一个相当简单的应用程序，它使用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>

Answer 1

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