如何將具有特定類的標記添加到圖層或圖層組？

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函數，以便您可以在標記初始化時自動分配類名。您可以添加一個函數來檢查是否有類名：

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

，並檢查是否某一類設置你的標記：

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

現在你很容易在你的標記初始化應用類名：

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

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