Question

我对leaftlet和Javascript相对较新，但我在很多研究和耐心方面取得了一些进展。

但是现在，我有这个疑问，我有geojson状态信息和状态信息。所以我需要为每个状态信息添加一个Icon，这个我已经完成了，但我还需要一个dropfown过滤器选择框，状态信息作为选项，所以如果选择一个状态，我只能看到这个选择的寄存器当然我需要为每个状态保留自定义图标。

如何使用leaflet实现目标？那可能吗？我已经使用自定义选项获得了组合选择框，但是当我尝试在数据中使用此选项作为过滤器时，我失败了。

这是我的代码：

var map = L.map('map').setView([-23.589262,-46.619145], 10);
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Mapas &copy; OpenCycleMap, Dados do Mapa &copy; contribuidores do OpenStreetMap'
     }).addTo(map);

    function nomeando (feature, layer){
        layer.bindPopup(feature.properties.NAME)
    }   


    L.geoJson (PTS_TESTE,{
            onEachFeature: nomeando
     ,
        pointToLayer: function(feature, latlng) {
                var smallIcon = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'images/torre.jpg'

                });
                var smallIcon2 = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'images/telefone.jpg'
                });
                if (feature.properties.STATUS == 'TORRE') {
                return L.marker(latlng, {icon: smallIcon});
                    } 
                    else {return L.marker(latlng, {icon: smallIcon2});}
    }}).addTo(map)




var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<select><option>RJ</option><option>SP</option><option>MG</option></select>';
    div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
    return div;
};
legend.addTo(map);

//这部分，我试图改变更改功能，先擦除我的图层。

$('select').change(function(){
     var value = $(this).val();
     if (value == "RJ") {
     map.removeLayer(PTS_TESTE);}
});

Leaflet：我希望使用功能属性作为选项的下拉过滤器选择框

0 个答案: