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

 .on('ready',...)

^ 与 AJAX 调用无关。

您需要在ajax调用结束后执行操作，即在AJAX回调中。

这里：

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

Answer 2

找到问题。

只需将 featureLayers.eachLayer 替换为 e.target.eachLayer，弹出窗口就会根据需要显示。

Mapbox 使用 loadURL 处理多个 GEOJSON 文件

Mapbox handle multiple GEOJSON files with loadURL

javascript

jquery

geojson

leaflet

mapbox