单张杂食+聚类标记+过滤标记聚类组 [英] Leaflet omnivore + clustering markers + filtering marker cluster group

问题描述

我尝试使用Leafet的mapbox和omnivore插件制作地图，以便通过本教程搜索数据.我不知道在我的情况下如何从omnivore插件集成此代码.我为数据使用geojson url $.getJSON，将标记与Leaflet的MarkerCluster聚类.

I try to make a map with mapbox and omnivore plugin of Leafet in order to search a data with the tutorial. I don't know how integrate this code from omnivore plugin in my case. I use for my datas a geojson url $.getJSON, clustering markers with MarkerCluster of Leaflet.

感谢您的回复.

最诚挚的问候.

山梨碱

编辑

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

I try to filter marker cluster group with Mapbox js tool.

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

It works very well but I would like to insert this feature to my project. But I don't know how to make with the other features : omnivore plugin, search the data, displaying the popup, marker cluster group. Could you help me ?

我的js小提琴过滤标记群集组": https://jsfiddle.net/sduermael78/rgoxpxwq /4/

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

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

推荐答案

您当前通过jQuery $.getJSON以及直接从您的mapbox帐户加载数据.

You currently load your data through both jQuery $.getJSON and directly from your mapbox account.

然后，如果我的理解是正确的，您想使用 leaflet-omnivore 插件?

Then if my understanding is correct, you would like to replace these methods by using leaflet-omnivore plugin?

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

Direct replacement is quite straight forward, as you could directly use:

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

现在，当您想对标记进行聚类时(在您的案例中使用Leaflet.markercluster插件)，它会变得稍微复杂一些.但这与$.getJSON相似，因为它们都执行异步AJAX请求，并且您必须在回调中进行转换.

Now it becomes slightly more complicated when you want to cluster your markers (using Leaflet.markercluster plugin in your case). But it is similar to $.getJSON since both perform an asynchronous AJAX request, and you have to make the conversion in a callback.

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

With leaflet-omnivore, you use the .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/

Updated JSFiddle: https://jsfiddle.net/1uuubmwb/39/

编辑

好吧，我想念您想要的位置，就像您从指向的Mapbox教程中所做的那样."

OK I missed your part where you "want to search the data" as done in the tutorial from mapbox you point to.

在您的情况下，由于要对标记进行聚类更加复杂，因此您不直接拥有地图框要素图层，而是拥有标记聚类组.

In your case it is more complicated as you want to cluster your markers, so you do not directly have your mapbox feature layer, but a marker cluster group.

一种解决方法是，每次更改geojsonLayer地图框要素图层上的过滤条件时，都要替换该群集组的内容:

A workaround would be to replace the content of that cluster group everytime you change the filtering condition on your geojsonLayer mapbox feature layer:

// 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属性(如果这样，它将自动使用该信息来填充弹出窗口/工具提示"内容):

Then for your popup, you have to create it and bind it manually, as mapbox feature layer needs your GeoJSON data to use the title attribute (if so, it automatically uses that info to fill the popup / "tooltip" content):

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()函数.

Unfortunately, it looks like .setFilter() removes that popup, so you would need to call this attachPopups() function after every setFilter.

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

这篇关于单张杂食+聚类标记+过滤标记聚类组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！