Проблема производительности Vue с Leaflet и Leaflet.markercluster тысяч маркеров - PullRequest
Новая
       21

Проблема производительности Vue с Leaflet и Leaflet.markercluster тысяч маркеров

0 голосов
/ 07 июня 2018

Leaflet, это популярная гео-библиотека.

По некоторым причинам у меня возникают серьезные проблемы с производительностью при использовании этой библиотеки вместе с Vue.

Проблема 1:

Более 500 маркеров, и страница уже начинает спотыкаться, 2000 маркеров - сильно ломается, 10 000 маркеров - не загружается.

На веб-странице HTML 50 000 загружаются мирно.

Задача 2:

Плагин Leaflet.markercluster очень слабый, он не сворачивает маркеры.

screenshot of map with uncollapsed markers

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);
  },
}

1 Ответ

0 голосов
/ 07 июня 2018

Не добавляйте свои marker ни к this.map, ни к вашей markers группе кластеров маркеров (MCG).

Добавляйте их только в 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>
...