leaflet.js 高亮显示独立列表上的 GeoJSON 鼠标悬停事件

Question

leaflet.js 高亮显示独立列表上的 GeoJSON 鼠标悬停事件

4

编辑：这里有一个jsfiddle模型：https://jsfiddle.net/6t8gnegf/

我有一张地图外的位置表，我希望在鼠标悬停在相应的表元素上时，每个区域都能突出显示。因此，我首先制作了一个以名称属性为键的geojson图层列表：

var layarr = {}
for (i=0;i<listOfNames.length;i++) {
  for (var prop in geojson['_layers']) {
    if (!geojson['_layers'].hasOwnProperty(prop)) {
        continue;
    }
    if (geojson['_layers'][prop]["feature"]["properties"]["name"]==listOfNames[i]) {
      layarr[listOfNames[i]] = geojson['_layers'][prop]
    }
  }
}

然后我调用这个函数：

function highlight(name) {
  var laytouse = layarr[name]
  laytouse.setStyle(highlightStyle)
}

什么都没有发生，甚至没有错误提示。

我已经拥有了一个高亮功能，在地图上实际区域被鼠标悬停时可以正常工作：

 function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle(highlightStyle);
}

Which is called in the following way:

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
    });
}

geojson=L.geoJson(neighbData, {style: style,
onEachFeature: onEachFeature
}).addTo(mymap);

即使我在控制台上直接执行以下操作：

layarr[name].setStyle({fillOpacity: 1});

我仍然无法得到任何结果。似乎我以某种方式获得了错误的图层，但该图层具有预期的setStyle()方法，并且我没有收到任何控制台错误。

编辑：jsfiddle演示：https://jsfiddle.net/6t8gnegf/

- theis188

你能分享一下gist或jsfiddle吗？ - Philippe V.

嗨，菲利普，我在这里做了一个模型：https://jsfiddle.net/6t8gnegf/ - theis188

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Philippe V. · Accepted Answer

gist解决方案

你的问题与此问题非常相似：从外部访问Leaflet.js GeoJson要素。诀窍在于geoJSON图层实际上是一个图层组，因此您可以使用图层组方法，例如getLayer()。

想法是根据ID访问要素。您首先需要将多边形ID附加到表格中的位置（在我的示例代码列表中）：

function onEachFeature(feature, layer) {
    nhood = parseInt(feature.id);
    name = feature.properties.name;
    $('#neighborhood').append('<li value="' + nhood + '">'+name+'</li>');
    layer._leaflet_id = nhood;
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
    });
}

当鼠标移入一个位置时，您需要突出显示与该位置id匹配的要素，如下所示：

var hovered_id, layer;

$('#neighborhood li').on('mouseenter', function(e){
        hovered_id = e.target.value;
        layer = geojson.getLayer(hovered_id); //your feature id here
        layer.setStyle(highlightStyle);
    }).on('mouseout', function(e){
        geojson.resetStyle(layer);
    });

请查看我创建的代码片段，你会发现这个代码比你最初分享的代码要简单得多。

编辑：leaflet id 必须是唯一的，并且邻居名称应该分配给特征 id。下面是更新后的代码:

function onEachFeature(feature, layer) {
    name = feature.properties.name;
    $('#neighborhood').append('<li data-value="' + name + '">'+name+'</li>');
    layer._leaflet_id = name;
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
    });
}

var hovered_id, layer;

$('#neighborhood li').on('mouseenter', function(e){
        hovered_id = $(e.target).data('value');
        console.log(hovered_id);
        layer = geojson.getLayer(hovered_id); //your feature id here
        layer.setStyle(highlightStyle);
    }).on('mouseout', function(e){
        geojson.resetStyle(layer);
    });