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

Question

我有几个标记有一个带有其名称的 css 类，例如：markerOne 有 .markerone 作为 css 类，等等。 是否可以创建一个函数来将这些标记分配给特定的图层或组？像var layerone = $(L.marker).hasClass("markerone")); 之类的东西并在一个层内分配所有标记与该类？ 我想这样做，所以稍后我可以使用 addLayer 和 removeLayer 打开/关闭该层。

我用来显示标记的函数：

function showResourcesByName(name) {
            for (var i = 0; i < markers.resources.length; i++) {
                var resName = markers.resources[i].name;

                if (resName == name) {
                    var resIcon = icons.resources[i].icon;
                    var resSize = icons.resources[i].size;
                    var resPname = icons.resources[i].pname;

                    var customIcon = L.icon({
                        iconUrl: resIcon,
                        iconSize: resSize, // size of the icon
                        iconAnchor:   [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
                        popupAnchor:  [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
                    });

                    for (var j = 0; j < markers.resources[i].coords.length; j++) {
                        var x = markers.resources[i].coords[j].x;
                        var y = markers.resources[i].coords[j].y;

                        marker = L.marker([y, x], {icon: customIcon});
                        marker.addTo(map).bindPopup(resPname);
                        $(marker._icon).addClass(name)



                    }
                }
            }
        }

我提到的类是$(marker._icon).addClass(name)中的(name)部分，它从marker.js中获取名称：

    var markers = {
  "resources": [
    {
      "name": "AITokarServer",
      "coords": [
        {
          "x": -1210.0,
          "y": -1770.0
        },
        {
          "x": -1230.0,
          "y": -1810.0
        },

所以所有名称为 AITokarServer 的标记都会有一个类 .AITokarServer 等等。

Answer 1

您可以通过创建自定义标记类来为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
    }]
}];

要将它们放入不同的组，首先创建一个对象来存储您可以稍后添加到您的图层控件的组：

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

Answer 2

在 Leaflet 中，标记没有 CSS 类。标记有图标，图标有className 选项，所以：

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

console.log(marker1.options.icon.options.className);