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