2016-11-15 5 views
0

지도를 확대/축소 할 때 레이어의 부분을 잃을 수있는 기능을 찾고 있습니다.전단지 확대/축소 레이어 레이어

map.on('zoomend', onZoomend) 
function onZoomend(feature){ 
if(map.getZoom()<11) 
{map.addLayer("road_2"==feature.properties.density)}; 

if(map.getZoom()>11) 
{map.removeLayer("road_2"==feature.properties.density)}; 
    } 

내 GeoJson 파일 패널의 레이어에 있습니다 :

 var road = { 
    "type": "FeatureCollection", 

    "features": [ 
    { "type": "Feature", "properties": { "density" : "road_1".... 

    { "type": "Feature", "properties": { "density" : "road_2".... 

    { "type": "Feature", "properties": .... 

답변

1

내가 바로 당신을 이해하고 있는지 확실하지 않습니다,하지만 당신은을 제거하려면 :

var overLayers = [ 
{ 
    group: "Layer", 
    collapsed: true, 
    layers: [ 
     { 
      name: "Road", 
      icon: iconByName('fuel_road'),    
      layer: L.geoJson(road,{style: style_road}) 
     }, 

파일은 그 bulid GeoJson 축소 할 때 레이어를 추가하고 축소 할 때 레이어를 추가할까요?

You just can use: 
if(map.getZoom()<11){ 
    mylayer.removeFrom(map); 
}else{  
    mylayer.addTo(map); 
} 

내가 올바르게 이해 했습니까?

UPDATE :

당신은 GeoJson 레이어를 통해 반복하고 약간의 기하 구조를 숨기기 위해 0으로 fillOpacity을 설정할 수 있습니다

var geoJsonLayer = L.geoJson(myGeoJson).addTo(map); 
if(map.getZoom()<11){ 
geoJsonLayer.eachLayer(function(layer) { 
    if(layer.feature.properties.density == "road_"){ 
     layer.setStyle({fillOpacity:0}); 
    } 
}); 
} 
+0

잘 알고 있지만이 파일은 GeoJSON 파일에 있습니다. 나는 파일의 일부분을 끄고 싶다. 높은 줌에서 볼 수없는 다수의 폴리곤. –

+0

그런 다음지도에서 추가/제거하려는 전단지 그룹의 그룹으로'L.LayerGroup'을 만들고 (아마도'L.GeoJSON'의'eachLayer'를 통해) 해당 그룹에 개별 레이어를 추가 한 다음/필요에 따라 해당 그룹을 제거하십시오. – IvanSanchez

0

업데이트 :

이 방법은 미래가 있습니까? 무엇을 개선해야합니까?

function style_road(feature) { 
    if ("road_1" == feature.properties.density) { 
     return { 
      weight: 3, 
      opacity:function() 
        {if (zoom > 13) {opacity:0}, 
        else (zoom < 13) {opacity:1}, 
        }, 
      color: 'red', 
     }; 
    } 
    else if ("road_2" == feature.properties.density){ 
     return { 
      weight: 1.5, 
      opacity: 1, 
      color: 'red',    
     }; 
    } 
    else { 
     return { 
      weight: 0.5, 
      opacity: 1, 
      color: 'red',    
     }; 
    } 
} 
관련 문제