在geojson文件Leaflet上设置样式

时间:2019-06-13 15:10:24

标签: javascript leaflet geojson

我无法重新设置已添加到地图的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);

样式的功能是:

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] }]

提前谢谢!

1 个答案:

答案 0 :(得分:2)

一种方法是创建多个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); }
}