Leaflet omnivore +聚類標記+過濾標記羣集組

我嘗試使用Leafet的mapbox和omnivore插件製作地圖，以便使用教程搜索數據。我不知道如何在我的情況下從omnivore插件集成此代碼。我使用我的數據geojson url $.getJSON，使用Leaflet的MarkerCluster對標記進行聚類。Leaflet omnivore +聚類標記+過濾標記羣集組

感謝您的回覆。

此致敬禮。

桑德琳

編輯

我試圖篩選標記羣集組與Mapbox JS工具。

它工作得很好，但我想插入此功能到我的項目。但我不知道如何使用其他功能：omnivore插件，搜索數據，顯示彈出窗口，標記羣集組。你可以幫幫我嗎？

我JS提琴「篩選標記羣集組」：https://jsfiddle.net/sduermael78/rgoxpxwq/4/

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

來源

2016-08-01 sduermael

感謝您在JSFiddle中分享您的代碼，它確實有助於提供支持。請注意，在SO中，第一步是查明您的問題以減少代碼並將其分享到問題主體中，製作一個「[Minimal，Complete，and Verifiable example]（https://stackoverflow.com/help/mcve））」。有關[請求幫助]（https://stackoverflow.com/help/asking）的更多詳細信息。 JSFiddle是額外的獎勵。 – ghybs

您目前通過兩個jQuery的$.getJSON從mapbox帳戶加載數據和直接。

那麼如果我的理解是正確的，你想通過使用leaflet-omnivore插件替換這些方法？

直接更換是相當簡單的，因爲你可以直接使用：

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

現在，當你想你的羣集標記（使用Leaflet.markercluster插件在你的情況）變得稍微複雜一些。但它與$.getJSON類似，因爲兩者都執行異步AJAX請求，您必須在回調中進行轉換。

隨着瓣葉雜食動物，可以使用.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/

編輯

好，我錯過了你的一部分，你「想搜索數據「，就像你指向的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屬性（如果是的話，它會自動使用該信息來填充彈出/「提示」的內容）：

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/

來源

2016-08-02 00:06:47 ghybs

我想使用leaflet-omnivore插件來從geojson用url搜索數據。 – sduermael

如何在這些新案例中顯示來自geojson與URL的彈出窗口？ layer.bindPopup（feature.properties.CODE）; – sduermael

我編輯了上面的答案。下一次，請嘗試解除您的問題，以便人們可以回答個別問題... – ghybs

謝謝您的回答。實際上，我想使用leaflet-omnivore插件爲了從geojson中搜索帶有url的數據。本教程是：https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/ 「使用setFilter作爲快速搜索以基於用戶查詢過濾標記」。

如何在這些新案例中顯示來自geojson與URL的彈出窗口？ layer.bindPopup(feature.properties.CODE);

我可以使用所有這些功能來構建我的地圖（搜索標記，聚類標記......）嗎？

來源

2016-08-02 15:13:02 sduermael

您應該**編輯**您的問題（問題標籤下方有灰色鏈接），而不是添加「答案」。事實上，對於你的情況，這聽起來像它甚至應該是一個新的問題... – ghybs

我是這個論壇的初學者。感謝您的建議。 – sduermael

Leaflet omnivore +聚類標記+過濾標記羣集組

回答

相關問題