循环中的传单图层组

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 个图层组。在你的循环中，你必须添加一个条件来将你的圈子添加到其中一个。

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

循环中的传单图层组

Leaflet Layergroups in loop

javascript

layer

leaflet