在地图框/传单上聚类 geojson 文件

Question

我正在尝试在 mapbox 上设置聚类地图，例如http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

目前，我的点数据正在从 MYSQL 中提取并使用GeoPHP转换为GeoJson 。 地图。

我想知道是否有一种方法可以将 MarkerCluster 插件与我的 GeoJson 文件一起使用，在下面的代码中称为 mysql_points_geojson.php：

        // Bike Racks
    var bikeRacksIcon = L.icon({
        iconUrl: 'bicycleparking.png',
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
    });
    bikeRacks = new L.geoJson(null, {
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: bikeRacksIcon,
            title: feature.properties.city
          });
        },
        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<table border="0" style="border-collapse:collapse;" cellpadding="2">' +
                '<tr>' + '<th>City</th>' + '<td>' + feature.properties.city + '</td>' + '</tr>' +
                '<tr>' + '<th>Country</th>' + '<td>' + feature.properties.country + '</td>' + '</tr>' +

                '<table>';
            layer.bindPopup(content);
          }
        }
    });
    $.getJSON("mysql_points_geojson.php", function (data) {
        bikeRacks.addData(data);
    }).complete(function () {
        map.fitBounds(bikeRacks.getBounds());
    });

Answer 1

您的自行车架层可以是 L.MarkerClusterGroup或L.geoJson 层。 一个解决方案可能是创建您支持聚类的自定义 geojson 层。

我认为忘记 L.geojson 层并自己解析“mysql_points_geojson.php”数据结构会容易得多（您可以从https://github.com/Leaflet/Leaflet/blob/master/src/layer /GeoJSON.js )

此外，我认为忘记 geojson 并看到服务器无法发回简单的点数组会更容易（更容易解析）

对我来说，代码应该是这样的......

var bikeRacks = new L.MarkerClusterGroup({});

$.getJSON("mysql_points_geojson.php", function (data) {
    // iterate on data to find the points
    // create a marker for each point
    bikeRacks.addLayer(marker);
}).complete(function () {
    map.fitBounds(bikeRacks.getBounds());
});

Answer 2

即使这是一个旧帖子，这就是我的做法。 我使用了 clusterMarker 插件。

    var promise = $.getJSON("yourFile.json");
     /* Instanciate here your clusters */

    var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: false, 
        showCoverageOnHover: false, 
        zoomToBoundsOnClick: true 
    });
   promise.then(function(data) {

在此函数中，通过单击操作或其他方式，您可以将标记添加到集群中。

myMarker.addTo(clusters);

最后，最后添加集群

clusters.addTo(map);