javascript - 在mapbox/leaflet上聚类geojson文件

Question

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

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

我想知道是否有一种方法可以将 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());
});