Question

情况：我的网络应用程序显示了一张包含不同兴趣路径的地图（我所谓的POI）和一个包含每个POI信息的侧边栏。选择侧栏的面板，应在地图上选择/突出显示相关的POI。

使用的数据和平台：我使用Leaflet和JavaScript，没有jQuery。这些数据作为GeoJSON添加到Leaflet中。这些路径用折线表示，但我把它们称为POI（只是为了澄清）。我不能也不能使用jQuery。

什么有效：路径（折线）的添加方式如下：

var pois = L.geoJson(pois, 
{
  style: style_pois,
  onEachFeature: onEachFeature
 });
 pois.addTo(map);

function onEachFeature(feature, layer)
{
layer.on('click', function (e)
{
    sidebar.open('pois');

    //get the ID of the clicked POI
    number = feature.properties.number;

    //Open the accordion tab
    var panel = document.getElementsByClassName('accordion-panel');
    panel[number-1].style.display="block";

    //highlight the selected POI
    var selectedFeature = e.target;
    selectedFeature.setStyle(style_pois_selected);
}); 
}

什么行不通：选择手风琴的面板，我会得到相关路径的ID（折线），但我无法访问并突出显示Leaflet中的某个折线功能。

这是JavaScript代码，其中手风琴行为受到控制：

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i < acc.length; i++) 
{
(function(index){
    acc[i].onclick = function()
    {           
        // Toggle between adding and removing the "active" class,
        //to highlight the button that controls the panel 
        this.classList.toggle("active");

        //Toggle between hiding and showing the active panel
        var panel = this.nextElementSibling;
        console.log("panel " + acc[0]);

        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
        var myIndex = index + 1;
        alert("INDEX " + myIndex);
    }
})(i);
}

问题：是否有可能基于Leaflet中包含为GeoJSON的图层来访问基于任何属性的特定功能？

我尝试了什么：我只遇到了在onclick函数中访问某条折线的不同行为的解决方案。在那里很容易应用另一种颜色（setStyle）。我需要从图层外部访问它。我已经尝试再次加载pois图层，就像我上面做的那样，只是在手风琴JavaScript里面并过滤它以获得特定ID，这样只表示一条折线，但它只给我一个错误，它是一个无效的GeoJSON对象（可能是范围问题？）。

我感谢任何帮助！

Answer 1

注意：我建议你设置一些JFiddle来重现你的问题。

我经常使用的解决方案是在每个标记/点中设置ID / Class属性：

$.getJSON("data/displacement.geojson", function(data){
    pathsLayer = L.geoJson(data,{
        className: function(feature){ //Sets the class on element
            //Assuming your JSON has a property called ID
            return "ID-" + feature.properties.ID;
        },
        style: function (feature) {
            //If needed, you can also set style based on properties
        },
    })
});

之后，您可以设置一个全局变量来记录选择ID，然后使用它来选择和修改特定元素。由于Leaflet使用SVG元素，我建议您使用D3.js来选择/修改元素，例如：

var selectedID = null; //Declare global variable

// You modify selectedID by actions on sidebar, e.g.:
selectedID = 001

d3.select(".ID-" + selectedID)
    .transition() //You can set easily transitions on attribute changes
    .duration(1000) // in ms
    .attr("attributeName", "attributeValue");

你可以找到一个例子here（虽然我知道使用View Page Source (Ctrl + U)阅读有点棘手）

Answer 2

对于任何可能遇到同样问题的人 - 我找到了解决方案。

如果可以从Leaflet中的GeoJSON层访问特定功能，我找了几个小时才知道，但似乎没有这样的方法。

虽然没有正式的方法，但我的工作如下。在手风琴里面，人们可以只访问已加载的GeoJSON数据集，在我的情况下是pois并在索引位置获取图层（这实际上是获取特征，而不是图层！有点误导）。对于这个，可以应用一种风格。

pois.getLayer(index).setStyle(style_pois)

为了读出点击的手风琴专题小组的索引，我问了另一个问题并指出了正确的方向：Simple JavaScript accordion - how to get the index of the clicked panel?

Leaflet - 访问特定的折线功能（GeoJSON）？

2 个答案: