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

Question

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

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

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

完整代码如下 - 减去了 SQL 连接/查询本身，因为它与我想要实现的目标无关(至少我认为是这样)。

                                <!-- 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});然后我添加 clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);在 tileLayer 之后(如果我之前在任何地方都这样做，页面会在崩溃前执行一个永无止境的循环)。

问题是，我得到了聚类，但是当我放大它们时，只出现较小聚类之外的标记。例如;如果我进入一个“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 层分配给一个命名变量(但不要将其添加到 map ):

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

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

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

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

这是一个简单的 fiddle 示例，显示它可以正常工作:

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