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

Question

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

我希望能够切换所有工作人员或任务的显示(使用L.featureGroup()和L.control.layers()轻松完成)，但我也希望在技能上筛选当前的显示。

我所说的“当前显示”的意思是，如果我决定隐藏员工，只显示任务，那么当我切换显示以获得一种技能时，我不希望有这种技能的员工出现。

这意味着我不能使用常规featureGroup和常规controlLayer来执行，因为它无法在显示/隐藏上执行筛选/应用条件。它要么显示组中的所有标记，要么全部隐藏。

我很想分叉Control.Layers并在其中添加一些基于回调的逻辑，但是我想知道是否有更好的方法来实现它呢？

编辑：

// 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);

Answer 1

最后，我按计划对Control.Layers进行了分叉，但对它做了很少的改动。我只是在它生成的HTML中添加了一个占位符部分。

然后，我在我的主干网Marionette中构建了一个FilterModule。该模块的区域将是我先前定义的占位符，过滤机制是由模块中的一个函数完成的，这很好，因为它实际上取决于我显示的数据，而不是显示它的地图。

这并不完全令人满意，因为它意味着很难将应用程序耦合到一些传单部分的分叉版本，但是叉子上的变化是最小的--这并不是什么大问题，而且在主干网方面，它实际上只是一个需要改变的DOM#id，视图会出现在其他地方。

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