Leaflet杂食+聚类标记+过滤标记簇群

Question

我尝试用Leafet的mapbox和omnivore插件制作地图，以便根据教程搜索数据。在我的案例中，我不知道如何从 omnivore 插件中集成这段代码。我为我的数据使用 geojson url $.getJSON，使用 Leaflet 的 MarkerCluster 进行聚类标记。

感谢您的回复。

此致。

桑德琳

编辑

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

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

我的 js Fiddle "filtering marker cluster group" : https://jsfiddle.net/sduermael78/rgoxpxwq/4/

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

Answer 1

您目前通过 jQuery $.getJSON 和直接从您的 mapbox 帐户加载数据。

那么如果我的理解是正确的，你想用leaflet-omnivore插件来代替这些方法吗？

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

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

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

对于 leaflet-omnivore，您使用 .on("ready", callback) 语法：

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/

编辑

好的，我错过了你 "want to search the data" 的部分，正如你在 mapbox 指向的教程中所做的那样。

在你的情况下，它更复杂，因为你想对你的标记进行聚类，所以你没有直接拥有你的 mapbox 要素层，而是一个标记聚类组。

解决方法是每次更改 geojsonLayer mapbox 要素层上的过滤条件时替换该集群组的内容：

// 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 属性（如果是这样，它会自动使用该信息来填充弹出窗口/"tooltip" 内容):

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() 似乎删除了该弹出窗口，因此您需要在每个 setFilter.

之后调用此 attachPopups() 函数

演示：https://jsfiddle.net/1uuubmwb/40/

Answer 2

感谢您的回答。事实上，我想使用 leaflet-omnivore 插件来使用 url 从 geojson 中搜索数据。教程是：https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/ "Use setFilter as a fast search to filter out markers based on a user query".

如何在这些新案例中使用 url 显示来自 geojson 的弹出窗口？ layer.bindPopup(feature.properties.CODE);

我可以使用所有这些功能来构建我的地图（搜索标记、聚类标记...）吗？

Leaflet杂食+聚类标记+过滤标记簇群

Leaflet omnivore + clustering markers + filtering marker cluster group

javascript

leaflet

mapbox