Leaflet marker.cluster Всплывающее окно с данными geojson, загруженными с помощью листовки ajax

Я хочу создать карту-буклет для отображения местоположения сайта. Данные сайта были загружены leaflet ajax в формате geojson.

Затем я использую Leaflet.markercluster для создания представления кластера, и он отлично работает. Но кажется, что всплывающее окно показывает только последний сайт, независимо от того, на какой значок я нажимаю.

Вот мой исходный код

function map_viewer(map, options){

        var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
            onEachFeature: function(feature,layer){
            layer.bindPopup(feature.properties.siteid);

            clusters.on('click', function (e) {              
            this.bindPopup(feature.properties.siteid); 
            });
            }

        });

        var clusters = L.markerClusterGroup();
        my_data.on('data:loaded', function() 
        {
        clusters.addLayer(my_data);
        map.addLayer(clusters);
        });
        
        

        var groupedOverlays = {
          "Layers": {
            "cluster view":  clusters   
          }
        };

        L.control.groupedLayers(groupedOverlays).addTo(map);
    }

Обновлено 1 февраля 2021 г .:

Я понимаю, что после поиска в Google есть несколько подобных случаев. Однако, когда я уточняю свой код на основе предложения, всплывающее окно больше не появляется:

    function map_viewer(map, options){
            var clusters = L.markerClusterGroup();
            var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
                onEachFeature: function(feature,layer){
                layer.bindPopup(feature.properties.siteid);
                }
    
            });
    
            my_data.on('data:loaded', function() 
            {
            clusters.addLayer(my_data);
            map.addLayer(clusters);
            });
    
        }

Также, пожалуйста, обратитесь к небольшой части импортируемого набора данных geojson ниже.

{"type": "FeatureCollection", "crs": 
{"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [
{"type": "Feature", "properties": {"siteid": 1, "latitude": -28.004959, "longitude": 153.428117, "pk": "1"}, "geometry": {"type": "MultiPoint", "coordinates": [[153.428117, -28.004959]]}}, 
{"type": "Feature", "properties": {"siteid": 2, "latitude": -33.870436, "longitude": 151.225013, "pk": "2"}, "geometry": {"type": "MultiPoint", "coordinates": [[151.225013, -33.870436]]}}, 
{"type": "Feature", "properties": {"siteid": 3, "latitude": -33.92677, "longitude": 151.21356, "pk": "3"}, "geometry": {"type": "MultiPoint", "coordinates": [[151.21356, -33.92677]]}}, 
{"type": "Feature", "properties": {"siteid": 4, "latitude": -33.854711, "longitude": 150.987657, "pk": "4"}, "geometry": {"type": "MultiPoint", "coordinates": [[150.987657, -33.854711]]}},

Заключение:

Я исправил проблему, просто преобразовав тип геометрии в моем наборе данных geojson из Multipoint в Point. Кажется, этот плагин Leaflet.markercluster может только кластерное представление для Multipoints, но не может отображать bindPopup каждого слоя.


leaflet leaflet.markercluster
person Scorpioooooon21    schedule 29.01.2021    source источник
comment
Опубликуйте свое решение в качестве ответа, это поможет другим людям.   -  person Falke Design    schedule 01.02.2021

Ответы (2)


arrow_upward
2
arrow_downward

Для меня понятно, почему у всплывающего окна последний идентификатор, потому что в функции onEachFeature вы привязываете / перезаписываете каждый раз всплывающее окно для кластеров с новым идентификатором сайта, и поэтому применяется последний.

Но когда вы добавляете всплывающее окно к полному кластеру маркеров, все слои имеют одно и то же всплывающее окно. Так что измените свой код на:

        var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
            onEachFeature: function(feature,layer){
               layer.bindPopup(feature.properties.siteid);
            }

        });
person Falke Design    schedule 29.01.2021
comment
Спасибо за ответ. Но после перехода на ваш код я больше не вижу всплывающих окон. - person Scorpioooooon21; 29.01.2021
comment
Посмотрите на этот пример, здесь показаны всплывающие окна: jsfiddle.net/falkedesign/nc2ky6uh или вы хотите иметь всплывающие окна или кластеры, но затем вам нужно спросить вас, где кластер должен знать, какой siteid у них должен быть, и кластеры создаются динамически при масштабировании - person Falke Design; 30.01.2021
comment
Привет, @Falke Design, ваш пример - это именно то, чего я хочу достичь на своей карте. Я хочу видеть кластеры, а затем всплывающее окно для отображения идентификатора сайта, когда я нажимаю определенный значок. Я опубликовал свой измененный код, единственное, что, похоже, отличается от того, что в примере используется jQuery, но я использую Ajax для загрузки данных geojson. - person Scorpioooooon21; 01.02.2021

arrow_upward
0
arrow_downward

Хорошо, я вникал в это дело 2 дня, в конце концов нашел ошибку и исправил ее.

Тип геометрии в моем наборе данных geojson - Multipoint. Кажется, этот плагин Leaflet.markercluster может только кластерный просмотр для Multipoints, но не может отображать bindPopup каждого слоя.

Чтобы исправить это, мне просто нужно преобразовать Multipoint в Point.

В любом случае, огромное спасибо @Falke Design за ваши добрые советы и отличный пример.

person Scorpioooooon21    schedule 01.02.2021
comment
Кластеризация групп слоев из геометрии GeoJSON MultiPoint должна работать нормально, в отличие от всплывающего окна привязки. - person ghybs; 01.02.2021
comment
См. github.com/Leaflet/Leaflet/issues/4461. - person ghybs; 01.02.2021