如何使用 VueJs 通过 Leaflet 动态加载多个标记？

Question

我有一个网络应用程序，它在地图上显示许多标记，当用户四处移动地图时，这些标记会动态加载。我用边界调用 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)
    });
  },

根据渲染标记的速度有多慢以及我的笔记本电脑有多热，我假设它每次都在渲染所有标记。

我的问题

如何使用传单仅加载标记列表中的新标记而不是每次加载整个列表？

Answer 1

I assume it is rendering all the markers every time -> 你试过 console.log markers 看看里面有多少物品吗？

如果您只想在地图上显示标记数组中的新标记，您可以将 v-for="marker in markers" 更改为 v-for="marker in lastMarkers，其中 lastMakers 是一个计算值属性只返回最后一项，像这样：

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

现在您需要在将 Object.values(thisClass.markerMap) 分配给 thisClass.markers

之前更新 EventBus 回调函数中的 lastMarkerIndex

并且要摆脱 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)
});

这就是我要做的，但我想有很多不同的方法可以实现你想要的。

如何使用 VueJs 通过 Leaflet 动态加载多个标记？

How to load dynamically many markers with Leaflet using VueJs?

javascript

vue.js

vuejs2

leaflet

vue2leaflet

当前解决方案

我的问题