我的Leaflet地图完全可以正常工作-太好了。但是,我注意到,每当我尝试放大或缩小时,矢量层(向上200点)都会略有延迟-它几乎看起来像是“反弹”,并且非常刺耳。我已经在Firefox和Chrome浏览器中进行了尝试,并且在两种浏览器中都可以正常工作。我知道要渲染的数据很多,但是我想知道是否有什么办法可以解决这个尴尬的问题?
这是到目前为止我编写的少量JS(HTML基本上只是一个空白的div,其ID为“ 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 © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>; Basemap © <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/
谢谢!
最佳答案
Leaflet CSS和JS版本之间可能不匹配。
另请参阅:https://github.com/Leaflet/Leaflet/issues/4774
如果这不能解决您的问题,请考虑简化您的实际示例,以某种方式使浏览器冻结。
关于javascript - 缩放时 basemap 和矢量层之间的延迟,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38881442/