javascript - leaflet.js 在鼠标悬停在单独的列表上时突出显示 GeoJSON

Question

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

我有一张 map 外的位置表，我想在将鼠标悬停在相应的表元素上时突出显示每个区域。所以我首先列出了 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)
}

没有任何反应，甚至没有错误。

我已经有一个突出显示功能，当鼠标悬停在 map 上的实际区域上时，它会起作用:

 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 附加到您在表中的位置(在我的要点示例的列表中):

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