带有传单和Leaflet.markercluster数千标记的性能问题Vue

Question

这是一个很受欢迎的地理图书馆。

由于某些原因，当我与Vue一起使用这个库时，我有严重的性能问题。

问题1:

超过500个标记和页面已经开始跌跌撞撞，2,000个标记-强烈破坏，10,000个标记-没有加载。

在HTML网页上，50,000被和平加载。

问题2:

Leaflet.markercluster插件很弱，它不会折叠标记。

​

​

mounted() {
  this.initMap();
  setTimeout(() => {
    this.initLocation()
  }, 100)
},
methods: {
  initMap() {
    this.map = L.map('map').setView([38.63, -90.23], 12);
    this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    });
    this.tileLayer.addTo(this.map);
  },
  initLocation() {
    this.map.locate({
      setView: true,
      maxZoom: 17
    });

    //Leaflet.markercluster
    let markers = L.markerClusterGroup();

    function r(min, max) {
      return Math.random() * (max - min) + min;
    }
    let icon = L.divIcon({
      className: 'icon'
    });
    for (let i = 0; i < 500; i++) {
      let marker = L.marker([r(53.82477192, 53.97365592), r(27.3878027, 27.70640622)], {
        icon: icon
      }).addTo(this.map);
      markers.addLayer(marker);
    }
    this.map.addLayer(markers);
  },
}

Answer 1

不要将marker同时添加到this.map和markers标记群集组中。

只将它们添加到MCG中，并让它根据需要处理添加到地图中的内容。

​

new Vue({
  el: '#app',
  data: {
    map: null,
    tileLayer: null,
  },
  mounted() {
    this.initMap();
    setTimeout(() => {
      this.initLocation()
    }, 100)
  },
  methods: {

    initMap() {
      this.map = L.map(this.$refs.map).setView([53.9, 27.6], 9);
      this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      });
      this.tileLayer.addTo(this.map);
    },

    initLocation() {
      //this.map.locate({setView: true, maxZoom: 17});

      //Leaflet.markercluster
      let markers = L.markerClusterGroup();

      function r(min, max) {
        return Math.random() * (max - min) + min;
      }
      let icon = L.divIcon({
        className: 'icon'
      });
      // Quick test with 5k markers:
      for (let i = 0; i < 5000; i++) {
        let marker = L.marker([
          r(53.82477192, 53.97365592),
          r(27.3878027, 27.70640622)
        ], {
          icon: icon
        }) /*.addTo(this.map)*/ ; // <= do not add individual `marker` to map!
        markers.addLayer(marker); // <= but only to MCG
      }
      this.map.addLayer(markers);
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="app">
  <div ref="map" style="height: 180px"></div>
</div>

​

Answer 2

为了更好的表现

在处理大量标记时，请确保使用markercluster的缩放功能。他们有用于添加和删除大量标记的批处理方法：addLayers()，removeLayers()和clearLayers()。他们更有表现力。还要注意，您可以在chunkedLoading上使用markerClusterGroup选项。允许您经常返回主线程，使UI更快。

因此，扩展了上面@ghybs的答案。我会把片段改编成这样：

​

new Vue({
  el: '#app',
  data: {
    map: null,
    tileLayer: null,
  },
  mounted() {
    this.initMap();
    setTimeout(() => {
      this.initLocation()
    }, 100)
  },
  methods: {

    initMap() {
      this.map = L.map(this.$refs.map).setView([53.9, 27.6], 9);
      this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      });
      this.tileLayer.addTo(this.map);
    },

    initLocation() {
      //Leaflet.markercluster
      const markerClusterGroup = L.markerClusterGroup({
        chunkedLoading: true
      }); // <= Add chunked loading here

      function r(min, max) {
        return Math.random() * (max - min) + min;
      }
      let icon = L.divIcon({
        className: 'icon'
      });

      const markers = []
      // Quick test with 5k markers:
      for (let i = 0; i < 5000; i++) {
        let marker = L.marker([
          r(53.82477192, 53.97365592),
          r(27.3878027, 27.70640622)
        ], {
          icon: icon
        })
        markers.push(marker)
        // markers.addLayer(marker); // <= do not add individual marker to MCG
      }
      markerClusterGroup.addLayers(markers) // <= use batch method to add markers to MCG
      this.map.addLayer(markerClusterGroup);
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="app">
  <div ref="map" style="height: 300px"></div>
</div>

​

我希望这对其他人有帮助。