javascript - 在 geojson 文件传单上设置样式

Question

我无法重新设置已添加到 map 中的 geojson 文件的样式。我有一个 getcolor 函数，它取决于 geojson 文件上的值。

    function getColor(d) {
    return d > 20 ? '#d53e4f' :
        d > 15 ? '#fc8d59' :
        d > 13 ? '#fee08b' :
        d > 10 ? '#e6f598' :
        d > 5 ? '#99d594' :
        d > 0 ? '#3288bd' :
        '#FFEDA0';
    }

在文件中，我有 5 个字段:d2014、d2015、d2016、d2017、d2018，均为整数。该文件是使用 QGIS Create webMap 插件创建的 js。在页面加载时，我添加了 2016 样式的 geojson:

    layer_europe = new L.geoJson(json_europe, {
      style: Cstyle2016,

      onEachFeature: pop_europe_data,

    });
mymap.addLayer(layer_europe);

style的作用是:

function Cstyle2016(feature) {
    return {
        fillColor: getColor(feature.properties.d2016),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

我每年都会执行 5 个这样的函数。

此外，我还有一个包含 2014-2018 年值的范围。我希望每次更改范围值时都会更改多边形的颜色。

到目前为止我已经在射程内:

    function changecolors(value){
        var a = document.getElementById('textInput').value = value        
        const st = "Cstyle" + a;
    }

setStyle 不起作用。

geojson 文件示例:

    var json_europe = {
    "type": "FeatureCollection",
    "name": "europe_all_0",
    "crs": { "type": "name", "properties": { "name": 
    "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "CNTR_ID": "AL", "NAME_ENGL": 
    "Albania", "d2014": 9.50571, "d2015": 12.88267, "d2016": 12.65591, 
    "d2017": 7.6109, "d2018": 10.80788 }, "geometry": { "type": 
    "MultiPolygon", "coordinates": [bla bla bla] }]

提前致谢!!!

Answer 1

一种方法是创建多个 L.GeoJson 实例，每个符号化一个实例，例如......

layer_europe_2016 = new L.geoJson(json_europe, { style: Cstyle2016 });
layer_europe_2017 = new L.geoJson(json_europe, { style: Cstyle2017 });
layer_europe_2018 = new L.geoJson(json_europe, { style: Cstyle2018 });

...并适当隐藏/显示它们，例如:

function changecolors(value){
    var a = document.getElementById('textInput').value = value        

    layer_europe_2016.remove();
    layer_europe_2017.remove();
    layer_europe_2018.remove();

    if (a === 2016) { layer_europe_2016.addTo(map); }
    if (a === 2017) { layer_europe_2017.addTo(map); }
    if (a === 2018) { layer_europe_2018.addTo(map); }
}