Mapbox使用loadURL处理多个GEOJSON文件

Mapbox handle multiple GEOJSON files with loadURL

本文关键字：GEOJSON 文件 处理 使用 loadURL Mapbox      更新时间：2023-09-26

我目前正在开发一个映射，该映射旨在基于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();

 .on('ready',...)

^与AJAX调用无关。

您需要在ajax调用完成后，即在ajax回调内执行操作。

此处：

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

发现问题。

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

相关文章：