javascript - 使用 html 表单值更新地图过滤

Question

好吧，我真的不知道我的代码中的问题出在哪里，但也许对你们中的一些人来说很明显。我有一个 html 表单，其中包含与美国所有县的 geoJSON 中的数值相对应的所有美国州的名称。我使用 jquery 函数来获取用户选择的值，并使用 JS 按州过滤，并且只将这些县添加到我的等值线地图中。

// get value from form
var value;
$('select').on('click', function() {
    value = this.value;
    return value;
})
//filter by state value
var filtered = L.geoJson(counties, {
    filter: function (features, layer) {
        return features.properties.STATE == value
    }
});

然后，我根据 geoJSON 中的 Count 字段（默认为灰色）为这些县分配颜色，并让侦听器突出显示县并在鼠标悬停时更新信息 div。

// create gradient 
function getColor(d) {
    return d > 1000 ? '#800026' :
        d > 500 ? '#BD0026' :
        d > 200 ? '#E31A1C' :
        d > 100 ? '#FC4E2A' :
        d > 50 ? '#FD8D3C' :
        d > 20 ? '#FEB24C' :
        d > 10 ? '#FED976' :

        '#FFEDA0';
}
// determine fill
function style(feature) {
   if (feature.properties.Count >= 1 && feature.properties.STATE == value) { 
        return {
            fillColor: getColor(feature.properties.Count),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        };
     } else if (feature.properties.value != value && feature.properties.Count >= 1) {
        return {
            fillColor: '#DDD',
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        }
    } else {
        return {
            fillColor: '#DDD',
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7

        }
    }

}

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
    info.update(layer.feature.properties);
}

function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}
var geojson;
// listeners
geojson = filtered;

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

geojson = L.geoJson(counties, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(mymap);
var info = L.control();

info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info'); // create info div
    this.update();
    return this._div;
};

// update info on hover
info.update = function (props) {
    
    this._div.innerHTML = '<h4>2020 Sales</h4>' + (props ?
    props.NAME + ' county: '
           + props.Count + ' sales / county' :
        'Hover over a state/county');
};



info.addTo(mymap);
</script>

我的问题是，当从表单中选择一个州时，它只会在县的鼠标悬停时更新过滤县填充颜色，而我想在州选择上更新过滤县的全部填充颜色。我可以根据要求包含更多代码（css 和一些地图设置 js），但我认为包含了相关的内容。此外，这是基于传单 choropleth 示例。

编辑这是谷歌驱动器链接：https ://drive.google.com/drive/folders/1YMQZWgQb1UJga0SnXkYT50067KSz5il3?usp=sharing ，如果有问题请告诉我。代码太大，无法实时托管。从页面左下角的列表中选择一个州，ei California，你会看到我的问题

标签： javascripthtmljquery