如何使用 onEachFeature 和 geojson 将标记添加到传单中的不同图层答案

【问题标题】：How to add markers to different layers in leaflet using onEachFeature and geojson如何使用 onEachFeature 和 geojson 将标记添加到传单中的不同图层
【发布时间】：2017-06-07 20:35:43
【问题描述】：

我当前的代码只是根据这个 json 文件中的数据绑定标记

{"type": "FeatureCollection", 
    "features": [{
"geometry": {"type": "Point", "coordinates": [53.8460456,-38.9135742]},
"type": "Feature",
"properties":{"name": "red"}]}

我的代码看起来像这样：

      var blueLayer = new L.LayerGroup();
        var redLayer = new L.LayerGroup();

    var map = L.map('mapid', {
        center: [53.8460456,-38.9135742],
        zoom: 12,
        layers: [blueLayer, redLayer]
    });
    L.tileLayer('https://api.mapbox.com/styles/v1/n-alathba/cj2fzxjgl00bl2rqno6mtb9wg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibi1hbGF0aGJhIiwiYSI6ImNqMmZ6bTQ2cDAwNDIyeW8wY2hidjFxdjUifQ.TyQ2WNEMtCO3Q84PYXlAEA', {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 18,
        minZoom: 1,
    }).addTo(map);

 function onEachFeature(feature, layer) {
    return;
   }

 var link = './data/events2.json' //file above
 $.getJSON(link, function(events) { 
     L.geoJSON(events, {    
        style: function(feature) {
            return feature.properties && feature.properties.style;                      
       },    
     onEachFeature: onEachFeature,    
     pointToLayer: function(feature, latlng) {    
     return L.marker(latlng); }
    }).addTo(map);

但是，我想将标记添加到不同的图层，而不是直接将它们全部绑定到地图，这样我就可以执行以下操作：

function onEachFeature(feature,layer){
      if(feature.properties.name == "red"){ //do something that binds associated marker to red layer)
       else{//do something that binds associated marker to bluelayer}}

【问题讨论】：

标签： javascript leaflet geojson

【解决方案1】：

我相信你快到了。在您的 onEachFeature 函数中，您可以简单地相应地将图层添加到不同的图层组。然后，您可以随时将图层组添加到地图中。试试这个：

function onEachFeature(feature,layer) {
    if(feature.properties.name == "red") {
        // add only 'red' markers to Layer Group
        redLayer.addLayer(layer);
    } else {
        // add only 'blue' markers to Layer Group (assuming just red/blue markers)
        blueLayer.addLayer(layer);
    }
}

现在您可以在代码中的其他位置将这些图层添加到地图中：

redLayer.addTo(mapid);
blueLayer.addTo(mapid);

只要确保删除 L.geoJSON() 之后的 .addTo() 方法，除非您最初想要地图上的所有标记。希望这会有所帮助！

【讨论】：