Leaflet.js 在单独列表的鼠标悬停时突出显示 GeoJSON

Question

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

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

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

调用方式如下：

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/

Answer 1

gist solution

您的问题与这个问题非常接近：Accessing Leaflet.js GeoJson features from outside。诀窍在于 geoJSON 图层实际上是一个图层组，因此您可以使用图层组方法，例如 getLayer()。

这个想法是您希望根据其 ID 访问您的功能。您首先需要将多边形 ID 附加到表中的位置（在我的 gist 示例中的列表中）：

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

请查看the gist I created，您会发现代码实际上比您最初共享的代码要简单得多。

编辑：传单 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);
    });