Установить стиль на файл геойсона Листовка - PullRequest
Новая
       15

Установить стиль на файл геойсона Листовка

0 голосов
/ 13 июня 2019

Я не могу изменить стиль файла геоджона, который был добавлен на карту. У меня есть функция 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 с целыми числами. Файл представляет собой файл js, созданный с помощью плагина QGIS Create webMap. На странице загрузки добавляю геойсон со стилем 2016: 

    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 не работает.

Пример файла геойсона: 

    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 Ответ

2 голосов
/ 13 июня 2019

Один из подходов заключается в создании нескольких экземпляров 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 });

... и скрыть / показать их соответствующим образом, например ::10000 

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); }
}
...