传单杂食+聚类标记+过滤标记聚类组

2022-01-12 00:00:00 mapbox leaflet javascript

我尝试使用 Mapbox 和 Leafet 的杂食插件制作地图，以便使用教程搜索数据.在我的情况下，我不知道如何从杂食插件中集成此代码.我为我的数据使用 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.

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

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 Fiddle过滤标记集群组":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", 回调) 语法:

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.

在您的情况下，由于您想要对标记进行聚类，因此您没有直接拥有 mapbox 要素图层，而是拥有一个标记聚类组.

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 mapbox 要素图层上的过滤条件时替换该集群组的内容:

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

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/

相关文章