Javascript 传单标签过滤器按钮和MarkerCluster.layers支持插件-集成以在单击更新集群时生成过滤器

我有两个插件，我想一起工作：由maydemirx和ghybs制作（都是很棒的人和插件顺便说一句）。我想做的是，当我单击标记过滤器按钮上的过滤器时，我希望标记集群根据新过滤器（）进行更新。因此，由5个点组成的簇变为2个，或由10个点组成的簇变为1个标记。我成功地将layerSupported集群添加到我的地图中，因此没有任何问题。但是，我不确定如何将受支持的集群与标记过滤器按钮集成，因为它们是两个独立的实体

传单标签过滤器按钮确实支持一个，这两个按钮听起来都可以用来实现我想要的。然而，当我将它们单独应用于过滤器按钮时，它们不起作用。我要么错误地应用了filter按钮方法，要么错误地创建了layerSupported集群，要么插件彼此不兼容

以下是生成图层支持的标记群集组的代码：

var clusters = L.markerClusterGroup.layerSupport({maxClusterRadius:75}),
    group1 = L.layerGroup();
var getjson = $.getJSON("map-v2.geojson",function(data){
  var bev = L.geoJson(data,{
    pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng, { tags: feature.properties.Genres.concat(feature.properties.Creator)});
      marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<br/><a href="' + feature.properties.Image_Bank_URL + '" target="_blank"><img src="' + feature.properties.Thumbnail_URL + '"/></a><br/>' + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator, {minWidth : 250});
      return marker;
    }
  });
  bev.addTo(group1);
  clusters.addLayer(group1);
  map.addLayer(clusters);
});

// Here is where I add the layer supported clusters to the map.
clusters.checkIn(group1);
clusters.addTo(map);

var clusters=L.markerClusterGroup.layerSupport（{maxClusterRadius:75}），
group1=L.layerGroup（）；
var getjson=$.getjson（“map-v2.geojson”），函数（数据）{
var bev=L.geoJson（数据{
pointToLayer：功能（特性、latlng）{
var marker=L.marker（latlng，{tags:feature.properties.Genres.concat（feature.properties.Creator）}）；
marker.bindpoppopup（“
”+”标题：“+feature.properties.Title+”

“+”日期：“+feature.properties.Date+”
“+”创建者：”+feature.properties.Creator，{minWidth:250}）；
返回标记；
}
});
bev.addTo（第1组）；
clusters.addLayer（group1）；
map.addLayer（集群）；
});
//在这里，我将图层支持的簇添加到地图中。
集群。签入（第1组）；
clusters.addTo（map）；

下面是我生成标记过滤器按钮的部分：

// Here is the code block for the Tag Filter Button. I start by accessing a tags file that has the data that I use for filter options. I should note that the genres.addToRelated is not working (it is supposed to link the 2 buttons together to work in conjunction with each other).
$.getJSON('tags.json', function(data) {
var genres = L.control.tagFilterButton({
  data: data.genres,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-tags"></i>',
}).addTo(map);
var creators = L.control.tagFilterButton({
  data: data.creators,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-user-edit"></i>',
}).addTo(map);
jQuery('.easy-button-button').click(function() {
    target = jQuery('.easy-button-button').not(this);
    target.parent().find('.tag-filter-tags-container').css({
        'display' : 'none',
    });
});
genres.addToRelated(creators);
genres.update(clusters);
genres.enablePruneCluster(clusters);
});

//这是标记过滤器按钮的代码块。我首先访问一个标记文件，该文件包含用于筛选选项的数据。我应该注意到，genres.addToRelated不起作用（它应该将两个按钮链接在一起，以便彼此协同工作）。
$.getJSON（'tags.json'，函数（数据）{
var genres=L.control.tagFilterButton({
data:data.genres，
FilterneVeryclick：是的，
图标：“”，
}).addTo（地图）；
var creators=L.control.tagFilterButton({
数据：data.creators，
FilterneVeryclick：是的，
图标：“”，
}).addTo（地图）；
jQuery（'.easy button'）。单击（函数（）{
target=jQuery（'.easy button'）。不是（这个）；
target.parent（）.find（'.tag过滤器标记容器'）.css({
“显示”：“无”，
});
});
类型。添加相关（创作者）；
类型更新（集群）；
使能prunecluster（集群）；
});

---

如果您想看到所有这些都在运行，这里有一个。

奇怪的是，传单标签过滤器按钮插件和/或最新的传单版本似乎有一些bug/侦听器，当Web控制台打开时，这些bug/侦听器可能会暂停脚本（因此浏览器）

一旦这些bug被修复，使用“

addtorelected

”方法仍然存在bug。既然我不知道它应该做什么，我现在就忽略它，让你可能用插件作者来修复它

至于与插件的集成，它看起来确实不像第一个插件应该支持它。插件（标签过滤器按钮的使用方法）的工作原理与传单.markercluster非常不同

通过查看Tag Filter按钮的源代码，您似乎可以通过修改代码和默认情况下调用

registerCustomSource

的

hide

功能来实现它。这样做的目的是避免直接使用地图，而是使用MCG

由于您可以在

hide

函数中直接处理对MCG

addLayers

和

removeLayers

的调用，因此实际上根本不需要使用传单.MarkerCluster.LayerSupport插件

下面是一个快速而肮脏的实现，称为“

enableMCG

”：

////////////////////////////////////////////////
//enableMCG的快速而肮脏的实现
////////////////////////////////////////////////
L.Control.TagFilterButton.include({
//目标：从MCG而不是从地图读取
enableMCG：函数（mcg实例）{
这是registerCustomSource({
姓名：'mcg'，
资料来源：{
麦格：麦格，
隐藏：函数（层源）{
var RelatedLayers=[]；
为了(
var r=0；r0删除）{
这是不可见的(
要从Invisibles.pop（）中删除，
1.
);
}