选择传单标记

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