标记簇 - 传单 - 无法正常工作

Question

所以我想将标记集群合并到我的地图中（很明显），但是我遇到了一些问题。注意：我是在一个项目中这样做的，并没有为地图本身编写代码，但我理解它的要点。

我们从存储在数据库中的 geoJSON 文件中获取标记的位置，因此我们仅引用 SQL 查询，然后将其插入地图（如果有意义的话）。

var geojsonFeature = <?php echo $trip['json_data'] ?>;

完整的代码在下面 - 减去 SQL connection/query 本身，因为它与我想要实现的目标无关（至少我认为是）。

                                <!-- Create a Leaflet map with the appropriate options -->
                            var map = L.map('map', {
                                layers: []
                            }).setView([-33.85638, 151.2078], 11);

                            var geojsonFeature = <?php echo $trip['json_data']  ?>;

                            function onEachFeature(feature, layer) {

                                // Is this feature a Normal point or a destination
                                if (feature.properties && feature.properties.destination) {

                                    // This feature is a destination point
                                    var popString = "<b> Destination </b> <br>";
                                    popString += feature.properties.address;
                                    layer.bindPopup(popString);

                                } else {

                                    // This feature is a normal point
                                    var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
                                    popString += feature.properties.address + "<br>";
                                    popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
                                    popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;                                       
                                    layer.bindPopup(popString);
                                }
                            }

                            function setStyle(feature) {

                                if (feature.properties.destination) {
                                    console.log("Destination");
                                    // Customer icon for destination
                                } else {
                                    console.log("Origin");
                                }
                            }

                        <!-- Add the GeoJSON object to the GeoJSON layer -->

                            L.geoJson(geojsonFeature, { onEachFeature: onEachFeature, 
                                                        style: setStyle }).addTo(map);


                        <!-- Set the tile layer to the openstreemap tiles + extra properties -->
                            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                maxZoom: 18,
                                attribution: 'Map data &copy; OpenStreetMap contributors'
                            }).addTo(map);

                        <!-- Cluster Markers -->

我已经尝试按照 MarkerCluster Git 上的文档进行操作，但我仍然迷路了。

var markers = L.markerClusterGroup(); markers.addLayer(L.marker(getRandomLatLng(map))); ... Add more layers ... map.addLayer(markers);

有没有人有合并标记簇的经验？如果是这样，有人可以伸出援手吗？

旁注：是的，我包含了运行它所需的所有相关文件； JS，MarkerCluster.js - 我从 CDN 获取所有这些。

编辑所以我采纳了下面 Nathan 给出的建议，下面是现在发生的事情。下面是我的新代码。

                                    <!-- Create a Leaflet map with the appropriate options -->

                       var map = L.map('map', {
                            layers: []
                        }).setView([-33.85638, 151.2078], 11);

                        var clusterGroup = L.markerClusterGroup();
                        var geojsonFeature = <?php echo $trip['json_data']  ?>;

                        function onEachFeature(feature, layer) {

                            // Is this feature a Normal point or a destination
                            if (feature.properties && feature.properties.destination) {

                                // This feature is a destination point
                                var popString = "<b> Destination </b> <br>";
                                popString += feature.properties.address;
                                layer.bindPopup(popString);

                            } else {

                                // This feature is a normal point
                                var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
                                popString += feature.properties.address + "<br>";
                                popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
                                popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;                                       
                                layer.bindPopup(popString);
                            }
                        }

                        function setStyle(feature) {

                            if (feature.properties.destination) {
                                console.log("Destination");
                                // Customer icon for destination
                            } else {
                                console.log("Origin");
                            }
                        }

                    <!-- Add the GeoJSON object to the GeoJSON layer -->
                    var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});


                    <!-- Set the tile layer to the openstreemap tiles + extra properties -->
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            maxZoom: 18,
                            attribution: 'Map data &copy; OpenStreetMap contributors'
                        }).addTo(map);

                    <!-- Cluster Markers -->
                    clusterGroup.addLayer(geojsonLayer);
                    map.addLayer(clusterGroup);

我在开头添加了var clusterGroup = L.markerClusterGroup();。然后我替换了 L.geoJson(geojsonFeature, { onEachFeature: onEachFeature, style: setStyle }).addTo(map); var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle}); 然后我在 tileLayer 之后添加 clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup);（如果我之前在任何地方这样做，页面在崩溃之前会做一个永无止境的循环）。

问题是，我得到了聚类，但是当我放大它们时，只出现较小聚类之外的标记。例如;如果我进入了“5”的集群，则该集群中没有任何标记出现。

http://puu.sh/kQWoI/4ef5bb11fb.jpg 举个例子。

Answer 1

如果您从查询中获得有效的 GeoJSON，您应该能够很容易地将它添加到集群中。一个更有用的示例可能是 GitHub:

上的示例目录中的示例

https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/geojson.html

首先，您设置了一个 markerClusterGroup：

var clusterGroup = L.markerClusterGroup();

然后将 geoJson 层分配给命名变量（但不要将其添加到地图）：

var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});

从那里，您可以将图层添加到群集组并将其添加到地图：

clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);

应该就这么简单。如果你想真正看到这些集群的图标，还要确保你引用了 css 文件和 js。

这是一个简单的示例 fiddle，它显示了它的工作原理：

http://fiddle.jshell.net/nathansnider/tw5b0uuq/

标记簇 - 传单 - 无法正常工作

Marker Cluster - Leaflet - Can't get it working

javascript

cluster-computing

leaflet

markerclusterer

markers