問題描述

我嘗試使用 Mapbox 和 Leafet 的雜食插件制作地圖，以便使用教程搜索數(shù)據(jù).在我的情況下，我不知道如何從雜食插件中集成此代碼.我為我的數(shù)據(jù)使用 geojson url $.getJSON，使用 Leaflet 的 MarkerCluster 聚類標(biāo)記.

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.

感謝您的回復(fù).

最好的問候.

桑德琳

編輯

我嘗試使用 Mapbox js 工具過濾標(biāo)記集群組.

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

效果很好，但我想將此功能插入到我的項(xiàng)目中.但我不知道如何使用其他功能:雜食插件，搜索數(shù)據(jù)，顯示彈出窗口，標(biāo)記集群組.你能幫幫我嗎?

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過濾標(biāo)記集群組":https://jsfiddle.net/sduermael78/rgoxpxwq/4/

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

我的項(xiàng)目:https://jsfiddle.net/sduermael78/1uuubmwb/42/

推薦答案

您目前通過 jQuery $.getJSON 和直接從您的 mapbox 帳戶加載數(shù)據(jù).

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);

現(xiàn)在，當(dāng)您想要對(duì)標(biāo)記進(jìn)行聚類時(shí)，它會(huì)變得稍微復(fù)雜一些(在您的情況下使用 Leaflet.markercluster 插件).但它類似于 $.getJSON 因?yàn)閮烧叨紙?zhí)行異步 AJAX 請(qǐng)求，并且您必須在回調(diào)中進(jìn)行轉(zhuǎn)換.

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", 回調(diào)) 語法:

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/

編輯

好的，我錯(cuò)過了您在教程中想要搜索數(shù)據(jù)"的部分，如您指向的 mapbox 中所做的那樣.

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

在您的情況下，由于您想要對(duì)標(biāo)記進(jìn)行聚類，因此您沒有直接擁有 mapbox 要素圖層，而是擁有一個(gè)標(biāo)記聚類組.

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 要素圖層上的過濾條件時(shí)替換該集群組的內(nèi)容:

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);

然后對(duì)于您的彈出窗口，您必須手動(dòng)創(chuàng)建并綁定它，因?yàn)?mapbox 要素圖層需要您的 GeoJSON 數(shù)據(jù)才能使用 title 屬性(如果是這樣，它會(huì)自動(dòng)使用該信息來填充彈出/工具提示"內(nèi)容):

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() 刪除了該彈出窗口，因此您需要在每個(gè) setFilterattachPopups() 函數(shù)>.

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/

這篇關(guān)于傳單雜食+聚類標(biāo)記+過濾標(biāo)記聚類組的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！