Блог

Главная - Вопросы по программированию - Как динамически загружать много маркеров с помощью листовки, используя VueJS?

Как динамически загружать много маркеров с помощью листовки, используя VueJS?

#javascript #vue.js #vuejs2 #leaflet #vue2leaflet

#javascript #vue.js #vuejs2 #листовка #vue2leaflet

Вопрос:

У меня есть веб-приложение, которое отображает много маркеров на карте, которые загружаются динамически, когда пользователь перемещает карту. Я вызываю API с границами и получаю список маркеров.

Текущее решение

 <l-map v-if="showMap" :zoom="zoom" :center="center" @update:bounds="boundsUpdated" style="height: 100%">
    <l-tile-layer :url="url" :attribution="attribution"/>
    <l-marker v-for="marker in markers" :key="marker.id" :lat-lng="marker.coordinates" >
      <l-icon
          icon-url="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png">
      </l-icon>
    </l-marker>
</l-map>

...

mounted() {
    let thisClass = this;
    EventBus.$on('new_markers', function (payLoad) {
      for (const marker of payLoad) {
        thisClass.markerMap[marker.id] = marker;
      }
      thisClass.markers = Object.values(thisClass.markerMap)
    });
  },

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

Мой вопрос

Как загружать с помощью листовки только те маркеры, которые являются новыми в списке маркеров, а не весь список каждый раз?

Комментарии:

1. only the markers that are not yet in the list of markers если их нет в списке маркеров, где они?

2. Я обновил свой вопрос, чтобы быть более точным. Из API я получаю разные маркеры в зависимости от уровня масштабирования и границ. Вот почему я думаю, что было бы эффективнее добавлять на карту только новые маркеры.

Ответ №1:

I assume it is rendering all the markers every time -> Вы пробовали консоль.войдите markers , чтобы узнать, сколько элементов внутри?

Если вы хотите отображать на карте только те маркеры, которые являются новыми для массива markers, что вы могли бы сделать, это изменить v-for="marker in markers" на v-for="marker in lastMarkers with lastMakers быть вычисляемым свойством, возвращающим только последние элементы, например так:

 lastMarkers() {
 return this.markers.slice(this.lastMarkerIndex);
}

теперь вам нужно обновить lastMarkerIndex функцию обратного вызова EventBus непосредственно перед назначением Object.values(thisClass.markerMap) thisClass.markers

И чтобы избавиться от thisClass и использовать this вместо этого, вы можете просто использовать функцию стрелки для обратного вызова, вместо function (payload)

Итак, подводя итог, ваш прослушиватель EventBus может выглядеть так :

 EventBus.$on('new_markers', (payload) => {
  for (const marker of payload) {
    this.markerMap[marker.id] = marker;
  }
  this.lastMarkerIndex = this.markers.length - 1;
  this.markers = Object.values(this.markerMap)
});

Вот как я бы поступил, но я думаю, есть много разных способов добиться того, чего вы хотите.