Использование Leaflet и Leaflet.markerclusterer - как зациклить все маркеры?

Question

Я пытаюсь отойти от Google Maps, так как я сыт по горло тем, насколько они медлительны! Я решил попробовать Leaflet, и это кажется хорошим вариантом. Ниже мой код:

initMap();

function initMap() {


    window.VARS.Map_Modal = L.map('google_map_modal_inner', {
                  center: [window.VARS.lat,window.VARS.lng],
                  zoom: 10,
                  maxZoom: 20,
                  zoomControl: false
                });

    new L.Control.Zoom({ position: 'topright' }).addTo(window.VARS.Map_Modal);

    setTimeout(function() {

        window.VARS.Map_Modal.invalidateSize();// stop the grey tiles due to being a flex div

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'xxx'
        }).addTo(window.VARS.Map_Modal);
    }, 500);

    getMarkers();


}

function getMarkers() {

    var extra_params = get_extra_params();
        extra_params["action"] = "load_results_cat";
        // other params pass in

    var the_url = '/cgi-bin/links/ajax.cgi';
    reqwest({
            url: the_url,
            type: 'json',
            method: 'post',
            data: extra_params,
            // timeout: 10000,
            error: function (err) {
                alert("ERROR");
             },
            success: function (data) {

                window.VARS.markers = []; // empty
                window.VARS.marker_vals = []; // empty

                window.VARS.markerCluster = L.markerClusterGroup();

                data.markers.forEach(function(item, i){

                        window.VARS.markerCluster.addLayer(
                                L.marker([item.latitude, item.longitude])
                                .on("click", function(marker) {
                                    console.dir(marker);
                                })
                        );


                });

                window.VARS.Map_Modal.addLayer(window.VARS.markers);

            }
        });

}


function update_bottom_bar_visible() {


    var mapBounds = window.VARS.Map_Modal.getBounds();
    for (var i = window.VARS.markers.length -1; i >= 0; i--) {

        var m = window.VARS.markers[i];

        var shouldBeVisible = mapBounds.contains(m.getLatLng());

        if (shouldBeVisible) {
            console.log("This is visible");

        } else {
            console.log("This NOT visible");
        }

    }

}

Это все работает отлично, и карта показывает хорошо. Проблема у меня вокруг этого кода:

    var shouldBeVisible = mapBounds.contains(m.getLatLng());

    if (shouldBeVisible) {
        console.log("This is visible");

    } else {
        console.log("This NOT visible");
    }

Я не могу заставить его пройтись по маркерам. Что мне нужно сделать, так это просмотреть все видимые маркеры, а затем показать их в моем баре ниже. Я вытащил изнутри этот сценарий как довольно длинный, но, надеюсь, этого будет достаточно.

Вот рабочий пример с инструментом кластера, НО он не выбирает текущие маркеры в области просмотра. Это бит, который мне нужна помощь:)

https://jsfiddle.net/youradds/g7fd0k5z/1/

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация

ОБНОВЛЕНИЕ 2: мне удалось найти некоторый код от кого-то еще, делая:

var i = 0;

window.VARS.markerCluster.eachLayer(function (layer) {
    var lat = layer.getLatLng().lat;
    var lng = layer.getLatLng().lng;
    console.dir("marker number("+i+"):"+lat+","+lng);
    //array.push({name:location,lat:lat,lng:lng});
    i++;
});

Это получает значения каждого слоя, но не включает текущие маркеры внутри кластеров. Как вы это извлекаете?

Answer 1

ОК, так что я решил это:

window.VARS.markerCluster.eachLayer(function (layer) {
    var lat = layer.getLatLng().lat;
    var lng = layer.getLatLng().lng;

    var shouldBeVisible = mapBounds.contains([lat,lng]);

    if (shouldBeVisible) {
        console.log("This is visible");
    } else {
        console.log("This NOT visible");

    }
});