如何在地图框中的层数组中循环以侦听单击事件

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

本文关键字：循环 事件 单击 数组 地图      更新时间：2024-02-07

我是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事件。

您不需要将每个功能添加为一个单独的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

相关文章：