Задержка между базовой картой и векторным слоем при масштабировании

Question

Моя карта Leaflet полностью функциональна, так что это здорово. Тем не менее, я заметил, что мой векторный слой (выше 200 точек) слегка задерживается всякий раз, когда я пытаюсь увеличить или уменьшить масштаб - он почти кажется "подпрыгивающим", и это очень раздражает. Я пробовал это в Firefox и Chrome, и он работает одинаково в обоих браузерах. Я понимаю, что это много данных для рендеринга, но мне интересно, могу ли я что-нибудь сделать, чтобы решить эту неловкую проблему?

Вот небольшое количество JS, которое я написал до сих пор (HTML в основном представляет собой просто пустой div с идентификатором "milwaukee_map"):

// load the initial map!
var theMap = L.map('milwaukee_map', {
    minZoom: 11,
    maxZoom: 19
})
    .setView([43.041475, -87.923975], // zoom to Milwaukee County by default
    11) // set initial zoom level

// add basemap tiles
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Basemap Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>; Basemap &copy; <a href="http://cartodb.com/attributions">CARTO</a>',
    subdomains: 'abcd'
}).addTo(theMap);

// load stops from carto
function getStops() {
    $.getJSON('https://benjamin-schroeder.carto.com/api/v2/sql?format=GeoJSON&q=SELECT the_geom, stop_name FROM mcts_stops_feb_16', function(data){
        stopsLayer = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                return new L.CircleMarker(latlng, {radius: 2, fillOpacity: 0.85});
            }
        })
        .addTo(theMap);
    })
}

getStops();

Пример из жизни: https://pantherfile.uwm.edu/schro333/public/mcts_map/

Спасибо!

Answer 1

У вас может быть несоответствие между версиями Leaflet CSS и JS.

Смотрите также: https://github.com/Leaflet/Leaflet/issues/4774

Если это не решит вашу проблему, рассмотрите возможность упрощения вашего живого примера, так как браузер зависает.