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);

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

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属性在悬停时不可用

1 个答案: