2

私の Leaflet マップは完全に機能します。これは素晴らしいことです。しかし、ズームインまたはズームアウトしようとするたびに、ベクター レイヤー (200 ポイント以上) が少し遅れていることに気付きました。Firefox と Chrome で試しましたが、どちらのブラウザでも同じように動作します。レンダリングするデータが多いことは理解していますが、この厄介な問題を解決するために何かできることはありますか?

これまでに私が書いた少量の 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/

ありがとう！

4

1 に答える 1

2

Leaflet の CSS と JS のバージョンが一致していない可能性があります。

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

これで問題が解決しない場合は、ライブの例を単純化することを検討してください。何らかの理由でブラウザがフリーズするからです。

于 2016-08-10T19:43:03.220 に答える