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

回答

相关问题