小冊子 - 訪問特定多段線功能（GeoJSON）？

局勢：我的網絡應用程序顯示了一個具有不同感興趣路徑（我所謂的POI）的地圖和一個包含每個POI信息的邊欄。選擇邊欄的面板，相關的POI應該在地圖上選擇/突出顯示。小冊子 - 訪問特定多段線功能（GeoJSON）？

使用的數據和平臺：我使用Leaflet和JavaScript，沒有jQuery。數據以Leaflet的形式添加爲GeoJSON。小徑表示爲多段線，但我稱它們爲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); 
}

問：有沒有一種可能，基於基礎是在單張包括作爲GeoJSON的一個層來訪問某些功能上在任何財產？

我嘗試過的：我只遇到了解決方案，在onclick函數中訪問某條折線的不同行爲。在那裏很容易應用另一種顏色（setStyle）。我需要從圖層外部訪問它。我已經嘗試再次加載pois圖層，就像我上面所做的那樣，只是在手風琴JavaScript內部併爲特定ID過濾它，以便只顯示一條折線，但它只給了我一個錯誤，表明它是無效的GeoJSON對象（也許是範圍問題？）。

我感謝任何幫助！

來源

2017-06-27 the_chimp

注：我建議你設置一些JFiddle重現你的問題。

一個解決方案，我經常使用的是設置ID /類屬性在每個標記/分：

$.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的記錄，然後用它來選擇和修改特定元素。由於單張使用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)閱讀）

來源

2017-06-27 16:44:21 Camilo

我的數據（折線BTW）有一個ID。問題是，儘管我具有特定折線功能的ID，但我無法訪問它。 –

如果你上傳一些JSFiddle來看看你的代碼會更好。在任何情況下，您必須首先必須將類設置爲每個polilyne（基於JSON屬性），然後才能選擇它們，這就是爲什麼我包含'className：function（feature）'行的原因。 – Camilo

假設我爲每個功能設置了className - d3.select（）行如何工作？d3是什麼？在我的情況下，GeoJSON圖層是pois，但pois.select會導致「選擇」沒有爲pois定義的錯誤。 –

對於任何可能遇到相同問題的人 - 我找到了解決方案。

我找了好幾個小時才發現，如果能從Leaflet內的GeoJSON層訪問特定的功能，但似乎沒有這樣的方法。

雖然沒有官方的方法，但對我來說，工作如下。在手風琴裏面，可以訪問已經加載的GeoJSON數據集，在我的情況下，在索引位置獲取圖層（實際上獲取特徵，而不是圖層！有點誤導）。對於這一個，可以應用一種風格。

pois.getLayer(index).setStyle(style_pois)

要讀出點擊手風琴板的指數，我問了另一個問題，並指出了正確的方向：Simple JavaScript accordion - how to get the index of the clicked panel?

來源

2017-06-28 06:51:52

小冊子 - 訪問特定多段線功能（GeoJSON）？

回答

相關問題