mapbox가 loadURL을 사용하여 여러 GEOJSON 파일을 처리합니다.

Question

현재 config.json 파일을 기반으로 여러 소스에서 여러 레이어를로드하려는 맵에서 작업하고 있습니다.

각 레이어에는 클릭시 팝업이 표시되어야하지만 어떤 이유로 인해 마지막으로로드 된 레이어에 대한 팝업 만 표시됩니다.

레이어에 ready 이벤트를 사용하여 모든 데이터가로드되고 팝업을 바인딩하기 전에 .eachLayer 메서드를 사용하여 반복 처리했는데 성공하지 못했고 무엇이 누락되었는지 파악할 수 없습니다.

는 재생에뿐만 아니라 내 코드를 검색 : plnkr.co

var myMap = function(options) { 
    var self = this; 

    this.settings = $.extend({ 
    layersConfig: 'config.json', 
    layerData: 'layer', 
    accessToken: 'pk.eyJ1IjoibWF0dGJsaXNzIiwiYSI6ImNpb3dwczBwZjAwOTh3OWtqOWZ1aG5ob3gifQ.Ot6GdtKew9u27TROm_4A6Q' 
    }, options); 

    this.map; 
    this.layers; 

    $.ajax({ 
    url: this.settings.layersConfig, 
    cache: true 
    }).done(function(data) { 
    self.init(data); 
    }); 
}; 

myMap.prototype = { 
    init: function(data) { 
    var self = this, 
     settings = this.settings; 

    L.mapbox.accessToken = settings.accessToken; 

    var map = this.map = L.mapbox.map('map', 'mapbox.streets') 
     .setView([54.6, -2.3], 4); 

    var popup = new L.Popup({ 
     minWidth: 250 
    }); 

    for (var i = 0; i < data.length; i++) { 

     var featureLayers = this.layers = L.mapbox.featureLayer(null, { 
     style: { 
      weight: 2, 
      color: data[i].color, 
      fillColor: data[i].color, 
      fillOpacity: 0.4 
     } 
     }).addTo(map); 
     // load layers data 
     featureLayers.loadURL(settings.layerData + data[i].layerId + '.json') 
     .on('ready', function(e) { 
      featureLayers.eachLayer(function(layer) { 
      // cache layer properties 
      var layerProps = layer.feature.properties; 
      // cache feature bounds 
      var bounds = layer.getBounds().toBBoxString(); 
      // bind modal 
      layer.bindPopup(showPopup(layer, bounds)); 
      }); 
     }); 
    } 

    map.on('popupopen', function() { 
     $('.zoom-to').on('click', function() { 
     var array = $(this).data('zoom').split(','); 

     map.fitBounds([ 
      [array[1], array[0]], 
      [array[3], array[2]] 
     ]) 
     }); 
    }); 

    function showPopup(popup, bounds) { 
     var popupData = popup.feature.properties; 
     var popupLabel = popupData.NAME; 
     var popupStructure = '<div class="leaflet-popup-label">' + popupLabel + '</div><button class="zoom-to" data-zoom="' + bounds + '">Zoom to</button></div>' 

     return popupStructure; 
    } 
    } 
} 

var map = new myMap(); 

Answer 1

문제를 발견.

featureLayers.eachLayer을 e.target.eachLayer으로 바꾸면 원하는대로 팝업이 표시됩니다.

Answer 2

.on('ready',...) 

^Ajax 호출과는 아무 상관이 없습니다.

AJAX 호출이 완료된 후, 즉 AJAX 콜백 내부에서 작업을 수행해야합니다. 여기

은 :

}).done(function(data) { 
    /* do stuff */ 
    });