如何循环遍历 mapbox 中的图层数组以监听点击事件？

Question

我是 Mapbox 的新手 API，我正在尝试开发从服务器返回 geojson 文件并将要素绘制在地图上的东西。

我在地图上绘制要素成功了。我所做的是查看所有记录，看看 geojson 列是否有值，如果有，我从服务器获取它，创建一个新层并将其绘制在该层上。

这些都是多边形。我需要做的是在我点击其中一个多边形时触发一个事件，这就是我使用单独图层的原因。这是代码：

<script type="text/javascript">
        L.mapbox.accessToken = 'someKey';
        var map = L.mapbox.map('map', 'someMap')
            .setView([-39.67, -69.26], 4);

        $(document).ready(function(){
            $('header h2').text('Equipment Map');

            $.getJSON('distributor-companies', function (data) {
                var layers = [];
                $.each(data, function(i, item) {
                    if(item.geojson != ''){
                        var file = item.geojson;
                        layers[i] = L.mapbox.featureLayer().addTo(map);
                        $.getJSON('/geojson/' + file, function(data){
                            console.log('layer' + i);
                            layers[i].setGeoJSON(data);
                        });
                    }
                });
                $.each(layers, function(i, item){
                    console.log(item);
                    // item.on('click', function(e){
                    //  alert('hello');
                    // });
                });

                layers[32].on('click', function(e){
                    alert('hello');
                });
                layers[31].on('click', function(e){
                    alert('hello hi');
                });
            });
        });
    </script>

现在我从分销商公司路线中获取所有数据，每次都创建一个新图层并为每条记录绘制数据。所以最后我留下了很多多边形。

最后我尝试在层上单独注册一个点击事件侦听器，它运行良好。但是就在那之前我试图循环遍历该层的代码不起作用。 console.log 函数将所有图层显示为对象，但是当我尝试在该项目上注册一个点击事件时它不起作用并且我的控制台显示 TypeError 项目未定义但 console.log 工作正常有了它。

显然我不是 JavaScript 专家，也没有意识到我做错了什么。我只需要遍历所有层并在它们上面放置一个 onclick 事件。

Answer 1

您不需要将每个功能添加为单独的功能组，它会为您完成。只需使用 GeoJSON 特征集合对象实例化特征组即可：

var featureLayer = L.mapbox.featureLayer(geojson).addTo(map);

然后遍历添加的功能，这些功能实际上只是层，并向它们添加 onclick 事件：

featureLayer.eachLayer(function (layer) {
    layer.on('click', function (e) {
        // here e.target holds the layer
        // and e.target.feature holds the actual feature
        alert('Clicked layer ID: ' + e.target.feature.id);
     });
});

就这么简单。 Plunker 上的工作示例：http://plnkr.co/edit/31nQWnEnDYzNSmroZB8G?p=preview

如果你想保持现有状态，你可以在你的代码中像这样执行上面的操作：

$(document).ready(function(){
    $('header h2').text('Equipment Map');
    $.getJSON('distributor-companies', function (data) {
        var layers = [];
        $.each(data, function (i, item) {
            if (item.geojson != '') {
                layers[i] = L.mapbox.featureLayer().addTo(map);
                $.getJSON('/geojson/' + item.geojson, function (data) {
                    layers[i].setGeoJSON(data);
                    // Loop over the added layer
                    layers[i].eachLayer(function (layer) {
                        // Add click event
                        layer.on('click', function (e) {
                            // Do stuff
                            alert('Clicked layer ID: ' + e.target._leaflet_id);
                        });
                    });
                });
            }
        });
    });
});

如果你只想使用一个 featureLayer，你可以这样做：

// Add empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);

// Get URL index
$.getJSON('index.json', function (index) {
  // Create empty feature array
  var features = [];
  // Loop over URLs
  $.each(index, function (i, url) {
    // Fetch GeoJSON from URL
    $.getJSON(url, function (geojson) {
      // Push GeoJSON to array
      features.push(geojson);
      // Check if is last URL
      if (i == index.length - 1) {
        // Call addFeature with array
        addFeatures(features);
      }
    });
  });
});

function addFeatures (features) {
  // Set features in featureLayer
  featureLayer.setGeoJSON(features);
  // Loop over layers in featureLayer
  featureLayer.eachLayer(function (layer) {
    // Attach click handler
    layer.on('click', function (e) {
      // Do stuff
      alert('Clicked layer ID: ' + e.target.feature.id);
    });
  });
}

这是关于 Plunker 的工作：http://plnkr.co/edit/dIMn9oiSpfsltq4iiilq?p=preview

如何循环遍历 mapbox 中的图层数组以监听点击事件？

How to loop through array of layers in mapbox to listen for a click event?

javascript

jquery

leaflet

mapbox