如何将具有特定类的标记添加到图层或图层组

您可以通过创建自定义标记类来向L.Marker添加一些功能，以使事情变得更容易。挂钩到 onAdd 函数，以便您可以在标记初始化时自动分配类名。您可以添加一个函数来检查该类名：

L.CustomMarker = L.Marker.extend({
    // Overwrite onAdd function
    onAdd: function (map) {
        // Run original onAdd function
        L.Marker.prototype.onAdd.call(this, map);
        // Check if there's a class set in options
        if (this.options.className) {
            // Apply className to icon and shadow
            L.DomUtil.addClass(this._icon, this.options.className);
            L.DomUtil.addClass(this._shadow, this.options.className);
        }
        // return instance
        return this;
    },
    // Function for checking class
    hasClass: function (name) {
        // Check if a class is set in options and compare to given one
        return this.options.className && this.options.className === name;
    }
});

现在，您可以在初始化标记时轻松应用类名：

var marker = new L.CustomMarker([0, 0], {
    'className': 'foobar'
}).addTo(map);

并检查您的标记上是否设置了某个类：

if (marker.hasClass('foobar')) {
    // YES! Do stuff
}

也就是说，您实际上不需要向标记中添加类即可将它们拆分为不同的组。数据结构中已有这些组。请考虑以下结构：

var markers = [{
    'name': 'Foo',
    'coordinates': [{
        'lat': -25,
        'lng': -25
    }, {
        'lat': 25,
        'lng': -25
    }]
}, {
    'name': 'Bar',
    'coordinates': [{
        'lat': -25,
        'lng': 25
    }, {
        'lat': 25,
        'lng': 25
    }]
}];

要将它们放入不同的组中，请首先创建一个对象来存储这些组，稍后可以将其添加到 layercontrol 中：

var overlays = {};

现在，您可以迭代结构，为每组标记创建图层组并将其添加到其中：

// iterate the structure, handle each group
markers.forEach(function (group) {
    // check if there's already a group for this name
    if (!overlays.hasOwnProperty(group.name)) {
        // new group, create layergroup, store in object and add to map
        overlays[group.name] = new L.LayerGroup().addTo(map);
    }
    // iterate the coordinates for this group
    group.coordinates.forEach(function (coordinate) {
        // create markers for each coordinate and add to the layergroup
        new L.Marker([coordinate.lat, coordinate.lng]).addTo(overlays[group.name]);
    })
});

现在，您可以将覆盖对象添加到图层控件，以便可以切换它们：

new L.Control.Layers(null, overlays).addTo(map);

以下是Plunker上的一个工作示例：http://plnkr.co/edit/t0YiJO8RmEdnIKKXugdm?p=preview

如果需要，您仍然可以通过使用上面的自定义标记类并更改坐标迭代器来添加类名，如下所示：

group.coordinates.forEach(function (coordinate) {
    new L.CustomMarker([coordinate.lat, coordinate.lng], {
        'className': group.name
    }).addTo(overlays[group.name]);
})

这是Plunker上的一个工作示例：http://plnkr.co/edit/cHPSLKDbltxr9jFZotOD?p=preview

在传单中，标记没有CSS类。标记具有图标，图标具有className选项，因此：

var marker1 = L.marker({ 
      icon: L.icon({ 
             className: 'green'
             // Other icon options
      })
      // Other marker options
 });
console.log(marker1.options.icon.options.className);