Javascript 传单杂食性+；聚类标记&x2B；筛选标记簇组_Javascript_Leaflet_Mapbox

Javascript 传单杂食性+；聚类标记&x2B；筛选标记簇组

javascript leaflet mapbox

Javascript 传单杂食性+；聚类标记&x2B；筛选标记簇组,javascript,leaflet,mapbox,Javascript,Leaflet,Mapbox,我尝试用mapbox和Leavet的杂食插件制作一张地图，以便在教程中搜索数据。我不知道如何将杂食插件中的代码集成到我的例子中。我使用geojson url$.getJSON，将标记与传单的MarkerCluster进行聚类谢谢你的回复致以最良好的祝愿桑德里纳编辑我尝试用Mapbox js工具过滤标记集群组它工作得很好，但我想将此功能插入到我的项目中。但我不知道如何使用其他功能：杂食插件、搜索数据、显示弹出窗口、标记集群组。你能帮我吗 My js Fiddle“筛选标记群集组”：我

我尝试用mapbox和Leavet的杂食插件制作一张地图，以便在教程中搜索数据。我不知道如何将杂食插件中的代码集成到我的例子中。我使用geojson url

$.getJSON

，将标记与传单的MarkerCluster进行聚类

谢谢你的回复

致以最良好的祝愿

桑德里纳

编辑

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

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

My js Fiddle“筛选标记群集组”：

我的项目：

您当前通过jQuery

$.getJSON

加载数据，并直接从您的mapbox帐户加载数据

那么如果我的理解是正确的，你想用插件替换这些方法吗

直接更换非常简单，因为您可以直接使用：

var geojsonLayer=omnivore.geojson（“filePath”，null，L.mapbox.featureLayer（））；
geojsonLayer.addTo（map）；

现在，当您想对标记进行聚类时（在您的案例中使用mobile.markercluster插件），情况会稍微复杂一些。但是它类似于

$.getJSON

，因为两者都执行异步AJAX请求，并且必须在回调中进行转换

对于传单杂食者，您可以使用以下语法：

var geojsonLayer=omnivore.geojson（“filePath”，null，L.mapbox.featureLayer（））
.on（“就绪”，函数（）{
var markers=L.markerClusterGroup（）；
markers.addLayer（geojsonLayer）；
markers.addTo（mymap）；
});

更新的JSFIDLE:

编辑

好的，我错过了你在“想要搜索数据”的部分，就像你指向的mapbox的教程中所做的那样

在您的情况下，由于要对标记进行群集，因此更为复杂，因此您不直接使用mapbox要素图层，而是使用标记群集组

解决方法是每次更改

geojsonLayer

mapbox功能层上的过滤条件时，都替换该群集组的内容：

//这将“隐藏”与筛选器不匹配的标记。
geojsonLayer.setFilter（showCode）；
//替换标记群集组的内容。
markers.clearLayers（）；
markers.addLayer（geojsonLayer）；

然后，对于弹出窗口，您必须手动创建并绑定它，因为mapbox要素层需要您的GeoJSON数据来使用

title

属性（如果是，它会自动使用该信息填充弹出窗口/“tooltip”内容）：

函数attachPopups（）{
//创建弹出窗口。
geojsonLayer.eachLayer（函数（层）{
var props=layer.feature.properties；
图层绑定弹出窗口(
“代码单位：”+props.Code_UNITE+“
”+
“地址网：”
);
});
}

不幸的是，它看起来像是

.setFilter（）

删除了这个弹出窗口，所以您需要在每次

setFilter

之后调用这个

attachPopups（）

函数

演示：