Selecting leaflet markers

问题:

I have data coming from a Json file and I created a layer based on this Json file using markerClusterGroup. I am hitting the wall trying to do this:

1 - Select some markers based on some Json's feature ("temperatura", "salinidade","corrente", "profundidade" e "geofisico") in xbt.json and using a select list in the 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> 

Based on the way I am adding the json to the map using popups and makercluster (see code below), How can I select (show on map) only the markers related to specific json features: temperatura, salinidade and so on?

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 

回答1:

You could do something like this, have a select element with ID 'my-select', get a reference and attach an eventhandler:

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

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

Now in the changeHandler method, iterate over all the layers in your cluster and move all the layers from your cluster which don't correspond with the select value to a temporary array:

// 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);
        }
    });
}

Example on Plunker: http://plnkr.co/edit/LZIEIE?p=preview