#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)
});
Вот как я бы поступил, но я думаю, есть много разных способов добиться того, чего вы хотите.