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）部分，它从markers.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
    }]
}];

要将它们放入不同的组，首先要创建一个对象来存储以后可以添加到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

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

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

2 个答案: