Leaflet.js : 레이어를 제거하고 레이어를 새로 고치려면 폴리곤을 클릭하십시오.

Question

한참 동안 리플릿 맵을 작성해 왔고 폴리곤 중 하나를 클릭하면 그렇게 할 수있는 방법을 찾아 내려고했습니다. GeoJSON 레이어에서 현재 레이어를 제거하고 다른 레이어로 대체합니다.

마찬가지로 다시 클릭하면 새 레이어가 제거되고 이전 레이어로 바뀝니다.

나는 여러 가지 재료로 조작하려고 노력했지만 아무 것도 작동하지 않습니다. 이것은 나의 최근 시도 중 하나입니다.

<script type="text/javascript" src="provinces.js"></script> 

<script> 

    var map = L.map('map').setView([-2.5, 119], 5); 

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>', 
     subdomains: 'abcd', 
     maxZoom: 19 
    }).addTo(map); 


    // get color depending on population density value 
    function getColor(d) { 
     return d > 5000 ? '#800026' : 
       d > 2500 ? '#BD0026' : 
       d > 1000 ? '#E31A1C' : 
       d > 500 ? '#FC4E2A' : 
          '#FFEDA0'; 
    } 

    function style(feature) { 
     return { 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '', 
      fillOpacity: 0.7, 
      fillColor: getColor(feature.properties.kode) 
     }; 
    } 

    function highlightFeature(e) { 
     var layer = e.target; 

     layer.setStyle({ 
      weight: 5, 
      color: '#ccc', 
      dashArray: '', 
      fillOpacity: 0.7 
     }); 

     if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 
      layer.bringToFront(); 
     } 

     info.update(layer.feature.properties); 
    } 

    var geojson; 

    function resetHighlight(e) { 
     geojson.resetStyle(e.target); 
     info.update(); 
    } 

    function zoomToFeature(e) { 
     map.fitBounds(e.target.getBounds()); 
    } 


    function addNewBoundary(e) { // this function doesn't do anything 
      var newLayerBoundary = new L.geoJson(); 
      newLayerBoundary.addTo(map); 

      $.ajax({ 
      dataType: "json", 
      url: "province-details.geojson", 
      success: function(data) { 
       $(data.features).each(function(key, data) { 
        newLayerBoundary.addData(data); 
       }); 
      } 
      }).error(function() {}); 
    } 

    function onEachFeature(feature, layer) { 
    layer.on({ 
     mouseover: highlightFeature, 
     mouseout: resetHighlight, 
     click: clearLayers // with this it just clears the layers before being clicked 
    }); 
} 

    geojson = L.geoJson(provinces, { 
     style: style, 
     onEachFeature: onEachFeature 
    }).addTo(map); 

</script> 

Answer 1

var layers = [firstLayer,secondLayer] 

    function switchLayers(){  
     if(map.haslayer(layers[firstLayer])){ 
      map.addLayer(layers[secondLayer]); 
      map.removeLayer(layers[firstLayer]); 
     }else{ 
     if(map.haslayer(layers[secondLayer])){ 
      map.addLayer(layers[firstLayer]); 
      map.removeLayer(layers[secondLayer]); 
     }  
}