Leaflet marker.cluster 弹出传单ajax加载的geojson数据

Question

我想创建一张传单地图来显示站点位置。站点数据由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);
    }

于 2021 年 2 月 1 日更新：

我在谷歌上搜索后发现有一些类似的案例。但是，当我根据建议优化代码时，弹出窗口不再显示：

    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 数据集中的几何类型从“多点”转换为“点”。看来这个插件Leaflet.markercluster只能对Multipoints进行聚类视图，而不能显示每一层的bindPopup。

Answer 1

我很清楚为什么弹出窗口有最后一个 id，因为在 onEachFeature 函数中，每次弹出窗口都使用新的 siteid 绑定/覆盖到集群，所以最后一个被应用。

但是，当您将弹出窗口添加到完整的标记集群时，所有图层都具有相同的弹出窗口。 因此，将您的代码更改为：

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

        });

Answer 2

好的，我研究了这个案例2天，终于找到了bug并修复了它。

我的 geojson 数据集中的几何类型是“多点”。看来这个插件 Leaflet.markercluster 只能对 Multipoints 的视图进行聚类，而不能显示每一层的 bindPopup。

要解决这个问题，我只需要将“多点”转换为“点”。

无论如何，感谢@Falke Design 的善意提示和出色的示例。