标记聚类 - Leaflet - 无法正常运行

Question

我想将Marker Cluster集成到我的地图中，但是我遇到了一些问题。请注意：我在项目中进行此操作，并且没有编写地图本身的代码，但是我理解其要点。

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

下面是完整的代码 - 减去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))); ... 添加更多的图层 ... 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();。然后我用var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});来替换 L.geoJson(geojsonFeature,{onEachFeature:onEachFeature,style:setStyle}).addTo(map);。最后，在tileLayer之后添加了 clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup); (如果在此之前添加，页面会一直循环直到崩溃)。

问题是当我放大聚合时，只有较小聚集中外部的标记出现。例如：如果我进入一个“5”聚类中，该聚类中的标记将不会出现。

例如，http://puu.sh/kQWoI/4ef5bb11fb.jpg。

- Nomm

Answer 1

如果你从查询中得到了有效的GeoJSON数据，那么将其添加到一个聚类中应该很容易。在GitHub的examples目录中有一个更加实用的示例可以参考：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/

- nathansnider

---

嘿，@Nathansnider，感谢你的回答-不过我遇到了一些问题。所以我已经在原帖中包含了编辑和新问题，希望你能够看一下并告诉我哪里出错了。 - Nomm

这是否与var=geojsonLayer中缺少.addTo(map)有关？但是，如果我添加.addTo(map)，所有标记都将出现，但不会隐藏到聚类中（聚类出现但基本上无关）。 - Nomm

似乎标记聚类没有显示默认（非聚类）标记。尝试将其简化为基础内容。查看是否有任何标记出现，使用var geojsonLayer = L.geoJson(geojsonFeature);。如果有效，请添加onEachFeature回来，然后是样式。因为setStyle函数似乎只是将一些调试数据记录到控制台（实际上没有应用任何样式），所以您可以完全省略样式部分。如果您想稍后通过起点和终点区分标记，则需要使该函数起作用，但现在它什么也没做。 - nathansnider

另外，不要将非聚类的geoJson图层和聚类版本一起添加到地图中。正如您所看到的那样，这只会使数据显示两次。 - nathansnider

啊哈！问题似乎是markercluster的旧版本。我不知道你使用的是哪个版本，但是通过将你网站上的整个leaflet.markercluster-src.js脚本复制到jsfiddle中，我得到了相同的奇怪行为。你可以在这里看到它。如果你删除那里的旧代码（fiddle的前1934行左右），它将再次正常工作（已经从github加载了当前版本，因此markercluster函数将恢复到该版本）。所以，通过获取markercluster的当前版本，你的问题应该会得到解决。 - nathansnider

非常感谢你，Nathan！绝对是救命恩人！一切都完美无缺。xD - Nomm