地图框 Geojson 属性在悬停时不可用

mapbox geojson properties not available on hover

本文关键字：悬停 Geojson 属性 地图      更新时间：2023-09-26

我正在使用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访问交互中属性的尝试都会失败。我假设工具提示工作意味着它们可用，但无法找出我出错的地方......？

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

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将保存要素图层的实例，而不是其中包含的各个图层的实例。现在，如果我将点击处理程序挂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

相关文章：