확대/축소시베이스 맵과 벡터 레이어 간의 지연

내 리플릿 맵이 완벽하게 작동합니다. 그러나 확대/축소를 시도 할 때마다 내 벡터 레이어 (200 포인트 이상)가 약간 지연되는 것으로 나타났습니다. 거의 바운스되는 것처럼 보였습니다. 매우 충격적입니다. 파이어 폭스와 크롬에서 시도해 보았고 두 브라우저에서 똑같이 작동합니다. 이것이 렌더링 할 많은 데이터라는 것을 알고 있지만,이 어색한 문제를 해결하기 위해 내가 할 수있는 일이 있는지 궁금합니다.확대/축소시베이스 맵과 벡터 레이어 간의 지연

여기 내가 지금까지 쓴 JS의 작은 양의합니다 (HTML은 ID가 "milwaukee_map"와 대부분 단지 빈 DIV이다) :

// 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/

감사합니다!

출처

2016-08-10 Benjamin Schroeder