Как добавить маркер с определенным классом в слой или группу слоев?

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 (имя), которое захватывает имя из маркеров .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 = {}; 

Теперь вы можете перебирать структуру, создать layergroups для каждого набора маркеров и добавить их к этому:

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

    }) 
}); 

Теперь вы можете добавить пометки объекта к layercontrol, так что вы можете переключать их:

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

В листе, маркеры не имеют классов CSS. Маркеры имеют значки и иконки имеют className вариант, так:

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

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