悬停时不可用的 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:

中各个层的点击事件

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

现在在点击处理程序中 e.target 包含点击标记的实例，它具有可用作属性的要素对象供您使用。

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

悬停时不可用的 mapbox geojson 属性

mapbox geojson properties not available on hover

javascript

leaflet

mapbox

geojson