缩放时基图和矢量层之间的延迟

Delay between basemap and vector layer when zooming

本文关键字：之间 延迟 缩放      更新时间：2023-09-26

我的传单地图功能齐全，这很好。然而，我注意到每当我尝试放大或缩小时，我的矢量层(超过200点)都会稍微延迟-它几乎看起来"反弹"，并且非常不协调。我在火狐和Chrome上都试过了，在这两种浏览器上都是一样的。我明白这是大量的数据渲染，但我想知道是否有什么我能做的补救这个尴尬的问题?

这是我到目前为止写的一小部分JS (HTML大部分只是一个空白的div, id为"密尔沃基地图"):

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

谢谢!

你可能有一个不匹配的传单CSS和JS版本。

参见:https://github.com/Leaflet/Leaflet/issues/4774

如果这不能解决你的问题，请考虑简化你的实例，因为它会使浏览器冻结。

相关文章：