選擇傳單標記

Question

我有數據來自Json文件，我使用markerClusterGroup創建了基於此Json文件的圖層。我打牆試圖做到這一點：

1 - 在xbt.json中選擇一些基於Json特性（「temperatura」，「salinidade」，「corrente」，「profundidade」e「geofisico」）的標記和使用的HTML選擇列表：

<select name="sometext" > 
    <option value="temperatura">temperatura</option> 
    <option value="salinidade">salinidade</option> 
    <option value="corrente">corrente</option> 
    <option value="profundidade">profundidade</option> 
    <option value="geofisico">geofisico</option> 
</select> 

基於我加入了使用彈出式廣告和makercluster（見下面的代碼）的JSON到地圖的方式，我該如何選擇（在地圖上顯示），只有相關的標誌物到特定的json功能：溫度，salinidade等？

var xbt = getJson('geojson/xbt.json'); 
    var markers_xbt = L.markerClusterGroup(); 
    var estacoes_xbt = L.geoJson(xbt, { 
      onEachFeature: function (feature, layer) //functionality on click on feature 
       { 
       layer.bindPopup("Navio: "+feature.properties.navio+"<br>"+"Comissao: "+feature.properties.comissao+"<br>"+ "Bandeira do Navio:"+feature.properties.naviobandeira+"<br>"+"Equipamento: "+feature.properties.equipamento+"<br>"+ "Inicio da Comissao:"+feature.properties.iniciocomissao+"<br>"+"Fim da Comissao : "+feature.properties.fimcomissao+"<br>"+"Data de Lancamento: "+ feature.properties.estacaodata+"<br>"+"Hora de Lancamento: " +feature.properties.estacaohora+"<br>"+"Quadrado de Marsden: "+feature.properties.quadrado+"<br>"+"Subquadrado de Marsden: "+feature.properties.subquadrado); //just to show something in the popup. could be part of the geojson as well! 
       } 

      }); 
     markers_xbt.addLayer(estacoes_xbt); // add it to the cluster group 
     map.addLayer(markers_xbt);  // add it to the map 
     map.fitBounds(markers_xbt.getBounds()); //set view on the cluster extend 

Answer 1

你可以做這樣的事情，有ID的選擇元素「我選」得到的參考和附加的事件處理程序：在changeHandler方法

var select = L.DomUtil.get('my-select'); 

L.DomEvent.addListener(select, 'change', changeHandler); 

現在，遍歷所有集羣中的各層，將所有從羣集不與所述選擇值對應於臨時數組各層：

// Array for temporarily storing layers which are out of cluster 
var layers = []; 

function changeHandler (e) { 
    // Any layers stored? 
    if (layers.length > 0) { 
     // Iterate layers 
     layers.forEach(function (layer) { 
      // Return to the cluster 
      cluster.addLayer(layer); 
     }); 
    } 
    // Iterate cluster 
    cluster.eachLayer(function(layer) { 
     // Compare layer feature value with select value 
     if (e.target.value !== layer.feature.properties.value) { 
      // No match, move to layers 
      layers.push(layer); 
      // Remove from cluster 
      cluster.removeLayer(layer); 
     } 
    }); 
} 

實施例上Plunker：http://plnkr.co/edit/LZIEIE?p=preview