mapbox geojson属性在悬停时不可用

Question

我正在使用mapbox并将多个geojson图层加载到地图上，如下所示：

...

var aLayer = L.mapbox.featureLayer('/a.geojson');
var bLayer = L.mapbox.featureLayer('/b.geojson');
var cLayer = L.mapbox.featureLayer('/c.geojson');

var layers = {
    LayerA: aLayer,
    LayerB: bLayer,
    LayerC: cLayer
}

...

layers.LayerA.addTo(map).on('ready', function(e) {
  map.fitBounds(LayerA.getBounds(), {animate: true});
});

L.control.layers(layers).addTo(map);

每个geojson功能都包含许多属性。 例如，标题和描述正确显示在工具提示中。

我遇到麻烦的地方是通过其他交互访问这些属性。 我正在调整悬停时每个多边形的样式，如下所示：

LayerA.on('mouseover', function(e)
{
    e.layer.setStyle({
        weight: 2,
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        e.layer.bringToFront();
    }
});

LayerA.on('mouseout', function(e)
{
    e.layer.setStyle({
        weight: 0.5,
        fillOpacity: 0.5
    });
});

通过e.layer或e.target访问交互中的属性的任何尝试都将失败。 我认为工具提示有效意味着它们可用，但无法解决我出问题的地方...？

Answer 1

您正在处理的是featureLayer的事件，而不是featureLayer中包含的各个图层的事件。 FeatureLayer是一组图层，在初始化时传递给它的集合中每个要素的图层。 以这个集合为例，在一个featureLayer中渲染三个标记：

var featureCollection = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "id": 1
        },
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        }
    },{
        "type": "Feature",
        "properties": {
            "id": 2
        },
        "geometry": {
            "type": "Point",
            "coordinates": [30, 30]
        }
      },{
        "type": "Feature",
        "properties": {
            "id": 3
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-30, -30]
        }
    }]
};

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

现在，如果将处理程序挂钩到featureLayer的click事件：

featureLayer.on('click', function (e) {
    console.log('Clicked featureLayer');
});

无论我单击哪个标记，都将触发。 甚至不知道我单击了哪个标记，在其中e.target将保存featureLayer的实例，而不包含其中包含的各个图层的实例。 现在，如果我将clickhandler挂接到featureGroup内featureGroup图层的click事件上：

featureLayer.eachLayer(function (layer) {
    layer.on('click', function (e) {
        console.log('Clicked feature ID: ' + e.target.feature.properties.id);
    });
});

现在，在点击处理程序中， e.target保留了clicked标记的实例，该实例具有可作为属性使用的要素对象。

这是有关Plunker的工作示例： http ://plnkr.co/edit/qwgDtQMRuR4XTcrnC1vf?p=preview