如何突出显示地图上的多面体和 div 中的名称

Question

我是 JS 的新手，我正在寻求帮助，因为我已经走投无路了。我为 JS / LeafletJS 中的事件苦苦挣扎了几天:(

我想突出显示地图上的元素和 div 中列出的相应数据。我不知道如何 select 两者并在鼠标悬停和鼠标移出时执行事件以突出显示它

我已经停在地图上的高亮对象上，但 div 没有成功:(

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

        layer.setStyle({
            color: '#666' ,
            fillOpacity: 0.7
        })
    }

    function resetHighlight(e) {
        geoJSON.resetStyle(e.target);
    };

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

这是我到目前为止所做的 JSFiddle。

https://jsfiddle.net/JohnDoeJr/jcxz2ruw/6/

我希望当您将鼠标放在多边形上时它会改变外观（突出显示）并且在 div 中相应的数据也会突出显示，反之亦然。

Answer 1

只需为每一层添加一个id，并将相同的id分配给相应的文本

geoJSON.eachLayer(function (layer) {
    layer._path.id = layer.feature.properties.Name;  // This assigns id to each layer with the layer name          
);  
function updateList(target){
    var displayed = target.getLayers();
    var list = document.getElementById('displayed-list');
    list.innerHTML = "";
    displayed.forEach(function(borders){
      var li = document.createElement('li');
      li.innerHTML = borders.feature.properties.Name;
      li.setAttribute("id", borders.feature.properties.Name); // this assigns id to the text with layer's name
      list.appendChild(li);
    });
}

并在悬停在 geoJSON 层上时添加这些样式

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

        layer.setStyle({
            color: '#666' ,
            fillOpacity: 0.7
        })
        id = e.target.feature.properties.Name
        $("li#"+id).css("font-weight","bold")
    }

    function resetHighlight(e) {
        geoJSON.resetStyle(e.target);
        id = e.target.feature.properties.Name
        $("li#"+id).css("font-weight","")
    };

并且不要忘记包括 jQuery。

您可以将相同的功能添加到我没有包含的悬停文本。

如何突出显示地图上的多面体和 div 中的名称

How to highlight both multipolygon on map and name in div

javascript

leaflet

mouseevent

geojson