小叶层群在环

Leaflet Layergroups in loop

本文关键字：叶层群更新时间：2023-09-26

嗨，我有这个代码，从文本文件创建图像地图上的标记。我想添加图层控件来隐藏或显示不同的标记与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,

当然可以。创建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

是这样的?

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