如何将具有特定类的标记添加到图层或图层组？
我有几个带有名称的css类的标记，例如：markerOne将.markerone作为css类，依此类推。 是否可以创建将这些标记分配给特定图层或组的function？ 像var layerone = $(L.marker).hasClass("markerone")); 并在图层中分配该类的所有标记？ 我想这样做，以后我可以使用addLayer和removeLayer打开/关闭该层。
我用来显示标记的function：
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等。
您可以通过创建自定义标记类来为L.Marker添加一些function，以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
在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);