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>

基于我使用popups和makercluster将json添加到地图的方式（参见下面的代码），如何选择（在地图上显示）仅与特定json功能相关的标记：Temperatura，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为“my-select”的select元素，获取引用并附加事件处理程序：

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

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

现在在changeHandler方法中，迭代群集中的所有图层，并将群集中与select值不对应的所有图层移动到临时数组：

// 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

选择传单标记

1 个答案: