在 mapbox / 传单上聚类 geojson 文件答案

【问题标题】：Clustering geojson file on mapbox / leaflet在 mapbox / 传单上聚类 geojson 文件
【发布时间】：2020-04-25 22:55:15
【问题描述】：

我正在尝试在 mapbox 上设置集群地图，例如 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());
    });

【问题讨论】：

标签： javascript json leaflet mapbox geojson

【解决方案1】：

您的层 bikeRacks 可以是 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());
});

【讨论】：

谢谢。该代码不起作用，但我正在考虑您对另一个选项的建议。我正在创建一个 cronjob 以在服务器上导出 MYSQL>CSV。我只是讨厌没有让事情按照我想要的方式工作。前进。

【解决方案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);

【讨论】：