Javascript 如何扩展L.Control.Layers以添加custrom过滤器，这是一个好方法吗？

我在地图上有代表工人/工人组和任务/任务组的标记。 每个工人都有一份技能清单，每个任务都需要一项技能

我希望能够通过L.featureGroup和L.control.layers轻松切换所有工作人员或任务的显示，但我也希望过滤技能的当前显示

我所说的“当前显示”是指，如果我决定隐藏工人而只显示任务，当我切换一项技能的显示时，我不希望拥有该技能的工人出现

这意味着我不能使用常规featureGroup和常规controlLayer，因为它无法在show/hide上执行过滤/应用条件。它要么显示组中的每个标记，要么将它们全部隐藏

我很想用fork来添加一些基于回调的逻辑，但我想知道是否有更好的方法

编辑：

我最终按计划完成了控件的分叉。层，但几乎没有做任何更改。我只是在它生成的HTML中添加了一个占位符部分

然后，我在我的主干木偶应用程序中构建一个FilterModule。该模块的区域将是我之前定义的占位符，过滤机制由模块中的一个函数完成，这非常好，因为它实际上取决于我显示的数据，而不是用于显示数据的地图

这并不完全令人满意，因为这意味着将应用程序与一些传单部分的分叉版本进行硬耦合，但分叉的变化很小，这没什么大不了的，另外，在主干端，它实际上只是一个需要更改的DOMid，视图将显示在其他地方

---

你可能想知道为什么我不简单地在视图中添加一个新元素，而不是填充原来的Control.Layers的HTML，这会阻止我描述的耦合。这仅仅是因为根据显示的数据，我可能有0到20个过滤器，而它造成的定位问题并不值得。我们的目标也是让这些过滤器靠近本机层开关。

您能分享一些代码吗？我将尝试分享一些相对类似的“结束代码”，以展示我试图实现的目标。我不能分享实际的代码，因为它是大型主干应用程序的一部分，因此很难提取一个工作示例。我添加了一个我自己编写的代码示例，但基本上看起来像我拥有的。想象一下，我有很多技能的技能层，不仅仅是a。你可以看到标记是多个层的一部分。

// Backbone stuff
var WorkerModel = Backbone.Model.extend({});
var TaskModel = Backbone.Model.extend({});
var WorkersCollection = Backbone.Collection.extend({
    model: WorkerModel
});
var TasksCollection = Backbone.Collection.extend({
    model: TaskModel
});

var workersData = [{
    id: 1,
    name: 'Bob',
    marker: L.marker(new L.LatLng(45,3)),
    coordinates: {
        lat: 45,
        lng: 3
    },
    skills: {
        skillA: {
            name: 'Foo',
            level: 1
        },
        skillB: {
            name: 'Bar',
            level: 7
        },
    }
}, {
    id: 2,
    name: 'John',
    marker: L.marker(new L.LatLng(48,2)),
    coordinates: {
        lat: 48,
        lng: 2
    },
    skills: {
        skillA: {
            name: 'Foo',
            level: 4
        }, 
        skillD : {
        name: 'Zop',
        level: 3
        }
    }
}];

var tasksData = [{
    id: 1,
    requiredSkill: 'skillA',
    requiredLevel: 5,
    duration: '5',
    marker: L.marker(new L.LatLng(50,2)),
    coordinates: {
        lat: 50,
        lng: 2
    }
}, {
    id: 2,
    requiredSkill: 'skillB',
    requiredLeve: 2,
    duration: '1',
    marker: L.marker(new L.LatLng(47,3)),
    coordinates: {
        lat: 47,
        lng: 3
    }
}];

var workers = new WorkersCollection(workersData);
var tasks = new TasksCollection(tasksData);

// We get all the markers that relates to a workers or a tasks with the skillA
var workersMarkerWithSkillA = workers.chain().filter(worker) { 
    return worker.get('skills').has('skillA'); 
}).map(function(worker) { 
    return worker.get('marker');
}).value();

var tasksMarkerWithSkillA = tasks.chain().filter(worker) { 
    return worker.get('skills').has('skillA'); 
}).map(function(worker) {
    return worker.get('marker');
}).value();

var markersWithSkillA = _.concat(workersMarkerWithSkillA, tasksMarkerWithSkillA);


// Same thing with skillB
var workersMarkerWithSkillB = workers.chain().filter(worker) { 
    return worker.get('skills').has('skillB'); 
}).map(function(worker) { 
    return worker.get('marker');
}).value();

var tasksMarkerWithSkillB = tasks.chain().filter(worker) { 
    return worker.get('skills').has('skillB'); 
}).map(function(worker) {
    return worker.get('marker');
}).value();

var markersWithSkillB = _.concat(workersMarkerWithSkillB, tasksMarkerWithSkillB);


// Make the map
var map = L.map('map');
var tileLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors' });
map.addLayer(tileLayer);

// Make the layers
var workersLayer = new L.featureGroup(workers.pluck('marker'));
var tasksLayer = new L.featureGroup(taskLayer.pluck('marker'));
var skillALayer = new L.featureGroup(markersWithSkillA);
var skillBLayer = new L.featureGroup(markersWithSkillB);

// Then we add everything on the map
var controlLayer = L.control.layers(null, [workersLayer, tasksLayer, markersWithSkillA, markersWithSkillB]);
controlLayer.addTo(map);