전단지 : 어떤 레이어가 활성화되어 있는지에 따라 라벨을 전환하십시오.

Question

별도의 geoJSON 파일에서로드하는 세 개의 레이어가있는 리플렛 맵이 있습니다. 나는 각각에 대해 latlong 좌표와 레이블을 가진 세 개의 추가 파일을 가지고 있습니다.

저는 세 개의 레이어를 전환하기 위해 basemap control.layers를 사용하고 있으며 어떤 기본 맵 레이어가 활성 상태인지에 따라 레이블 레이어를 활성화하는 오버레이 레이어 확인란을 사용하고 싶습니다.

var basemaps= { 
"layer1": layer1, 
"layer2": layer 2, 
"layer3": layer 3 
}; 

내 레이블을 함께 유지하기 위해 layerGroups를 사용하고 있습니다. ActiveLayer 플러그인을 사용하여 현재 활성화 된 baselayer를 선택하는 데 도움을 주려고했지만 항상 무언가 이상한 것으로 보입니다.

나는 자바 스크립트에 익숙하지 않으며 내가 배우는 것처럼 학습한다.

내 제어 코드의 나머지 :

var picker = L.control.activeLayers(basemaps, showlabels {collapsed:false}).addTo(map); 

if (picker.getActiveBaseLayer() == "layer1") 
    {activelabel = label1}; 
if (picker.getActiveBaseLayer() == "layer2") 
    {activelabel = label2}; 
if (picker.getActiveBaseLayer() == "layer2") 
    {activelabel = label3}; 

var showlabels = { 
"labels": activelabel 
}; 

이 작업을 수행 할 수있는 더 나은 방법이 있나요? 내 레이어에 라디오 버튼이 있고 라디오 버튼이 선택되었는지에 따라 라벨이 바뀌는 하나의 체크 박스가 필요합니다.

편집

이 코드는 baselayerchange을 발견

map.on('baselayerchange', function(a) { 
if (picker.getActiveBaseLayer().name == "layer1") 
{activelabel = label1}; 
if (picker.getActiveBaseLayer().name == "layer2") 
{activelabel = label2}; 
if (picker.getActiveBaseLayer().name == "layer3") 
{activelabel = labels3}; 
}); 

내가 CONSOLE.LOG을 할 때 나에게 활성층을 이야기하지만, 어떤 이유로 그 밤은 업데이트, 뭔가를 할 것으로 보인다

어떤 레이블이 보여지고 있는지.

Answer 1

각 기본 레이어와 연결된 별도의 오버레이 (사례에 레이블 포함)가있는 여러 개의 기본 레이어가 있습니다. 오버레이를 전환 할 수있게하려면 현재 기본 레이어와 연관된 오버레이 만 표시해야합니다.

이것을 달성하려면 반드시 ActiveLayers 플러그인이 필요하지 않습니다.

알아 두었 듯이 적절한 레이블 오버레이를 "수동으로"할당하려면 이벤트 수신기를 설정해야합니다. "baselayerchange" 이벤트가 실제로 적합하지만 변수를 activelabel 변수에 새 레이블을 지정하는 것만으로는 충분하지 않습니다. 레이어 컨트롤이 인스턴스화 할 때 사용한 값을 사용했기 때문입니다.

대신 activelabel을 Layer Group으로 설정하고 "baselayerchange"에서 먼저 clearLayers으로 만들고 적절한 레이블 레이어를 다시 추가해야합니다.

var activelabel = L.layerGroup(); 
var showlabels = { 
    "labels": activelabel 
}; 

map.on('baselayerchange', function (event) { 
    activelabel.clearLayers(); 

    switch (event.layer) { 
    case layer1: 
     label1.addTo(activelabel); 
     break; 
    case layer2: 
     layer2.addTo(activelabel); 
     break; 
    case layer3: 
     layer3.addTo(activelabel); 
     break; 
    } 
}); 

라이브 데모 : http://playground-leaflet.rhcloud.com/zosa/1/edit?html,output

또 다른 가능한 해결책은에 오버레이를 추가 대응하는 기본 레이어와 각 레이블 오버레이를 연결 할 수 있습니다하지만 플러그인을 것이다는 Leaflet.FeatureGroup.SubGroup 플러그인을 사용하는 것입니다 토글 가능한 레이어 그룹.

// Layer Group container for labels overlays. 
var labelsGroup = L.layerGroup().addTo(map); 


// Base layer 1: use a container Layer Group for the Tile Layer 
// and a SubGroup that will receive the labels, 
// to be sent into labelsGroup when the base layer is selected. 
var group1 = L.layerGroup().addTo(map); 
var subgroup1 = L.featureGroup.subGroup(labelsGroup).addTo(group1); 

base1.addTo(group1); 
labels1.addTo(subgroup1); 


// Base layer 2. 
var group2 = L.layerGroup(); 
var subgroup2 = L.featureGroup.subGroup(labelsGroup).addTo(group2); 

base2.addTo(group2); 
labels2.addTo(subgroup2); 


L.control.layers({ 
    // Base layers. 
    'Base 1': group1, 
    'Base 2': group2 
}, { 
    // Overlays. This will switch on/off the labels. 
    'Labels': labelsGroup 
}).addTo(map); 

라이브 데모 : http://playground-leaflet.rhcloud.com/pasu/1/edit?html,output

이 솔루션은 기본 레이어 당 2 개 추가 레이어 그룹을 필요로하지만, 당신은 많은 기지가있는 경우 조금 복잡 할 수있는, 자신을 이벤트 리스너를 설정하는 것을 피한다 레이어.

면책 조항 : 저는 Leaflet.FeatureGroup.SubGroup 플러그인의 저자입니다.