小叶杂食+聚类标记+过滤标记聚类组

我尝试使用 Mapbox 和 Leafet 的杂食动物插件制作地图，以便通过教程搜索数据。我不知道如何在我的例子中集成来自杂食动物插件的代码。我使用 geojson url 作为我的数据$.getJSON，用Leaflet的MarkerCluster对标记进行聚类。

感谢您的答复。

此致。

Sandrine

EDIT

我尝试使用 Mapbox js 工具过滤标记簇组。

它工作得很好，但我想将此功能插入到我的项目中。但我不知道如何使用其他功能：杂食插件、搜索数据、显示弹出窗口、标记集群组。你可以帮帮我吗 ？

我的 js Fiddle“过滤标记簇组”：https://jsfiddle.net/sdurmael78/rgoxpxwq/4/

我的项目 ：https://jsfiddle.net/sduermael78/1uuubmwb/42/

您当前通过 jQuery 加载数据$.getJSON并直接来自您的 Mapbox 帐户。

那么如果我的理解是正确的，您希望使用以下方法替换这些方法杂食动物传单 plugin?

直接替换非常简单，因为您可以直接使用：

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer());
geojsonLayer.addTo(map);

现在，当您想要对标记进行聚类时（在您的情况下使用 Leaflet.markercluster 插件），它会变得稍微复杂一些。但它类似于$.getJSON因为两者都执行异步 AJAX 请求，并且您必须在回调中进行转换。

对于 leaflet-omnivore，您可以使用.on("ready", callback) syntax:

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer())
  .on("ready", function() {
    var markers = L.markerClusterGroup();
    markers.addLayer(geojsonLayer);
    markers.addTo(mymap);
  });

更新的 JSFiddle：https://jsfiddle.net/1uuubmwb/39/

EDIT

好吧，我错过了您“想要搜索数据”的部分，就像您指向的 Mapbox 的教程中所做的那样。

在您的情况下，它会更复杂，因为您想要对标记进行聚类，因此您不直接拥有地图框要素图层，而是一个标记聚类组。

解决方法是每次更改您的过滤条件时替换该集群组的内容。geojsonLayer地图框特征层：

// this will "hide" markers that do not match the filter.
geojsonLayer.setFilter(showCode);

// replace the content of marker cluster group.
markers.clearLayers();
markers.addLayer(geojsonLayer);

然后对于弹出窗口，您必须创建它并手动绑定它，因为 Mapbox 要素图层需要您的 GeoJSON 数据才能使用title属性（如果是这样，它会自动使用该信息来填充弹出窗口/“工具提示”内容）：

function attachPopups() {
  // Create popups.
    geojsonLayer.eachLayer(function (layer) {
      var props = layer.feature.properties;

      layer.bindPopup(
        "<b>Code unité&nbsp;:</b> " + props.CODE_UNITE + "<br />" +
        "<b>Adresse web&nbsp;:</b> <a href='" + props.ADRESSE_WEB + "' target='_blank'>" + props.ADRESSE_WEB + "</a>"
      );
    });
}

不幸的是，它看起来像.setFilter()删除该弹出窗口，因此您需要调用它attachPopups()每次之后的功能setFilter.

Demo: https://jsfiddle.net/1uuubmwb/40/