Question

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

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

我想知道是否有办法在我的GeoJson文件中使用MarkerCluster插件，在下面的代码中名为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

您的图层bikeRacks可以是L.MarkerClusterGroup 或一个L.geoJson图层。解决方案可能是创建支持群集的自定义geojson层。

我认为忘记L.geojson层并解析＆＃34; mysql_points_geojson.php＆＃34;会更容易。自己的数据结构（你可以从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);

最后，安德（Andd），最后添加集群

clusters.addTo(map);

在mapbox / leaflet上聚类geojson文件

2 个答案: