Почему Leaflet так медленно панорамирует и масштабирует в React? - PullRequest
Новая
       11

Почему Leaflet так медленно панорамирует и масштабирует в React?

1 голос
/ 05 мая 2020

У меня есть довольно простое приложение, которое отображает около 3000 точек с помощью листовок. js. Он отображается довольно быстро, но панорамирование и масштабирование ужасно медленные.

Глядя на инструменты производительности в 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>

1 Ответ

1 голос
/ 12 июня 2020

Я столкнулся с той же проблемой, это происходит потому, что каждый раз, когда вы увеличиваете масштаб, он повторно отображает все маркеры, а также занимает память браузера для построения маркеров. Таким образом, по мере увеличения количества маркеров ваша карта будет работать медленнее.

Итак, я использовал https://github.com/manubb/Leaflet.PixiOverlay, что очень быстро, поскольку отображается в HTML Canvas в браузеры. У нас также доступна версия реакции - https://www.npmjs.com/package/react-leaflet-pixi-overlay

Вы также можете попробовать то же самое.

...