Leaflet: Попытка загрузить больше (50K) значков маркеров в L.canvasLayer, каждый маркер имеет различное вращение. Проблема производительности - PullRequest
Новая
       17

Leaflet: Попытка загрузить больше (50K) значков маркеров в L.canvasLayer, каждый маркер имеет различное вращение. Проблема производительности

0 голосов
/ 05 октября 2019

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

var map = L.map('map').setView([59.9578,30.2987], 10);
 var lat, lng;     
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a 
 href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  preferCanvas: true
}).addTo(map);
var ciLayer = L.canvasIconLayer({}).addTo(map);
ciLayer.addOnClickListener(function (e,data) {console.log(data)});
ciLayer.addOnHoverListener(function (e,data) 
{console.log(data[0].data._leaflet_id)});
  var icon = L.icon({
  iconUrl: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
  iconSize: [20, 18],
  iconAnchor: [10, 9]     
});
var markers = [];
for (var i = 0; i < 50000; i++) {
  /* var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
Math.random()*3.6], {icon: icon, }).addTo(map); */
  var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
Math.random()*3.6], {icon: icon );
markers.push(marker);
}    ciLayer.addLayers(markers);

Приведенный выше код загружает все маркеры очень быстро.

Но при попытке повернуть значок с помощью L.divIcon страница падает. 

var map = L.map('map').setView([59.9578,30.2987], 10);
    var lat, lng;     
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a 
    href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      preferCanvas: true
    }).addTo(map);
    var ciLayer = L.canvasIconLayer({}).addTo(map);
    ciLayer.addOnClickListener(function (e,data) {console.log(data)});
    ciLayer.addOnHoverListener(function (e,data) 
   {console.log(data[0].data._leaflet_id)});
  var markers = [];
    for (var i = 0; i < 50000; i++) {
 var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
     Math.random()*3.6], {
      icon: L.divIcon({html:'<img 
    src="http://www.geocodezip.com/mapIcons/boat-10-64.gif" style="-webkit- 
    transform: rotate(270deg); -moz-transform:rotate(270deg);" />'})}).addTo(map);
    markers.push(marker);
    } 
ciLayer.addLayers(markers);

rotate (270deg) - это угол для маркеров, но угол будет разным для каждого маркера 50k. .addTo (карта) вызывает проблему.

...