Leaflet Layergroups in loop

Question

Привет, у меня есть этот код, который из txt-файла создает маркеры на карте изображения. И я хочу добавить слой управления, чтобы скрыть или показать разные маркеры с L.control.layers теперь с помощью этого кода он скрывает все маркеры. Можно ли разделить маркеры по координатам на группы? Благодаря

var stringData = $.ajax({ 
    url: "a.txt", 
    async: false 
}).responseText; 
//Split values of string data                  
var stringArray = stringData.split("\n"); 
var arrayLength = stringArray.length ; 

var layerGroup = L.layerGroup().addTo(map); 

for(var i = 0; i < arrayLength; i++) { 
    var x = $.trim(stringArray[i].split(",")[0]); 
    var y = $.trim(stringArray[i].split(",")[1]); 
    var img2 = $.trim(stringArray[i].split(",")[2]); 

    var circle = L.circle([x,y], { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.3, 
     radius: 2, 
    }).addTo(map); 
    circle.url = img2 
    circle.on('click', function(){ 
    window.location = (this.url); 
    }); 
    layerGroup.addLayer(circle); 
} 
var overlayMaps = { 
    "Normal": layerGroup, 
    "Elite": layerGroup, 
    "Ultimate": layerGroup 
}; 
L.control.layers(null, overlayMaps).addTo(map); 

a.txt

-146.4375, 183.0625, img/img1.png 
-104.5, 182.75, img/img2.png, 

Answer 1

Да, конечно. Просто создайте 3 layerGroups. В вашем цикле вы должны добавить условие, чтобы добавить круги в любой из них.

var layerGroup1 = L.layerGroup().addTo(map); 
var layerGroup2 = L.layerGroup().addTo(map); 
var layerGroup3 = L.layerGroup().addTo(map); 


for(var i = 0; i < arrayLength; i++) { 
    var x = $.trim(stringArray[i].split(",")[0]); 
    var y = $.trim(stringArray[i].split(",")[1]); 
    var img2 = $.trim(stringArray[i].split(",")[2]); 

    var circle = L.circle([x,y], { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.3, 
     radius: 2, 
    }); 
    circle.url = img2 
    circle.on('click', function(){ 
    window.location = (this.url); 
    }); 


    switch(img2) { 
     case "img/img1.png": 
      circle.addTo(layerGroup1); 
      break; 
     case "img/img2.png": 
      circle.addTo(layerGroup2); 
      break; 
     case "img/img3.png": 
      circle.addTo(layerGroup3); 
      break; 
     default: 
      break; 
    } 
    } 

var overlayMaps = { 
    "Normal": layerGroup1, 
    "Elite": layerGroup2, 
    "Ultimate": layerGroup3 
}; 

Пример: http://plnkr.co/edit/f8azOmaz1ITLZiKgfHWt?p=preview

Answer 2

что-то вроде этого?

var layerGroup1 = L.layerGroup().addTo(map); 
var layerGroup2 = L.layerGroup().addTo(map); 
var layerGroup3 = L.layerGroup().addTo(map); 

for(var i = 0; i < arrayLength; i++) { 
    var x = $.trim(stringArray[i].split(",")[0]); 
    var y = $.trim(stringArray[i].split(",")[1]); 
    var img2 = $.trim(stringArray[i].split(",")[2]); 

    var circle = L.circle([x,y], { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.3, 
     radius: 2, 
    }).addTo(map).addTo(layerGroup1); 
    circle.url = img2 
    circle.on('click', function(){ 
    window.location = (this.url); 
    }); 

    if((img2 === "img/img2.png")||(img2 === "img/img3.png")){ 
     var circle2 = L.circle([x,y], { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.3, 
     radius: 2, 
    }).addTo(map).addTo(layerGroup2); 
    } 

} 
var overlayMaps = { 
    "Normal": layerGroup1, 
    "Elite": layerGroup2, 
    "Ultimate": layerGroup3 
}; 
L.control.layers(null, overlayMaps).addTo(map);