Mapbox處理多個GeoJSON的文件與使用loadURL

我目前正在這的意思加載基於一個config.json文件不同源的多個圖層的地圖上。Mapbox處理多個GeoJSON的文件與使用loadURL

每一層也應點擊顯示彈出，但由於某種原因，我只得到了最後的承載層的彈出窗口。

我使用的是層層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();

來源

2016-08-06 Cos

謝謝你在轉載您的問題上Plunker！請注意，基本步驟仍然需要直接在您的問題中分享您的代碼，以便人們可以看到您正在談論的內容，而無需僅依賴第三方服務。另請參見[SO幫助]（https://stackoverflow.com/help/on-topic） – ghybs

發現的問題。

只需更換featureLayers.eachLayer與e.target.eachLayer和彈出將顯示爲所需。

來源

2016-08-08 08:43:23 Cos

恭喜你自己找到了解決方案！ :-)並感謝你在這裏報道。請你可以**接受**你自己的回答，讓人們知道你的問題解決了嗎？謝謝！ – ghybs

.on('ready',...)

^無關用AJAX調用。

您需要的Ajax調用完成後，也就是Ajax回調中執行操作。

這裏：

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

來源

2016-08-06 20:50:29

'ready'事件用於不在AJAX調用上的圖層。這裏是[Mapbox文檔]（https://www.mapbox.com/mapbox.js/api/v2.4.0/） – Cos

Mapbox處理多個GeoJSON的文件與使用loadURL

回答

相關問題