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 +聚类标记+过滤标记群集组

回答

相关问题