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>

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

最后，我试图在完全正常工作的图层上单独注册一个click事件监听器。但是在我尝试循环遍历图层之前的代码无效。 console.log函数向我显示所有图层作为对象，但是当我尝试在项目上注册一个on click事件时，它不起作用，我的控制台说TypeError项是未定义的但是console.log正常工作

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

Answer 1

您不需要将每个功能添加为单独的featureGroup，它会为您执行此操作。只需使用GeoJSON featurecollection对象实现featureGroup：

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中的图层数组以侦听点击事件？

1 个答案: