листовка choropleth map с использованием динамического значения

Question

Я делаю choropleth map с помощью листовки и данных JSON. Я получил чистый учебник на веб-сайте. В этом учебнике использовался файл us-states.js JSON, где choropleth был основан на функции feature.properties.density JSON, если я не ошибаюсь. Если мы увидим JS-файл, который мы можем найти, есть поле с именем «ID», которое является идентификатором состояния. У меня есть база данных, где у меня есть 5 различных категорий данных на основе идентификатора состояния. Категории - это население, плотность, мужское население, женское население, грамотность. Я вызываю эти данные через ajax и получаю данные GeoJSON в соответствии со следующим образом (это фиктивные данные).

[{"state_id":"01","population":"123456","density":"1234","male_pop":"65432","female_pop":"57421","literacy_rate":"98"}] 
... 
[{"state_id":"50","population":"123456","density":"1234","male_pop":"65432","female_pop":"57421","literacy_rate":"98"}] 

Я хочу интегрировать эти данные как значение choropleth. когда я обращаюсь к функции грамотности, изменение цвета будет основано на данных literacy_rate. Я могу внести изменения в категорию функций getcolor.

Благодаря

Answer 1

Я бы рекомендовал использовать листовка Visualization Framework Data (DVF) плагин, расположенный here. Этот плагин содержит набор слоев (например, уровень Choropleth) и набор функций, помогающих цветовому кодированию ваших данных.

Пример: here продемонстрирует слой данных Choropleth DVF.

Используя DVF, вы можете создать функцию цвета для создания масштабирующих значений цвета. Например, эта функция будет генерировать функцию от желтого до красного. Точечные значения содержат диапазон значений и HSL Hue.

var yellowToRed = new L.HSLHueFunction(new L.Point(50, 60), new L.Point(100, 0)); 

DVF содержит L.ChoroplethDataLayer слой, который будет принимать ваши в формате GeoJSON и вашу функцию цвета, и будет генерировать слой для вас.

var layer = new L.ChoroplethDataLayer(geoJSON, { 
    // For the full options, see the documentation 
    displayOptions: { 
     // The display will be colored by your 'density' property in your GeoJSON. This accesses the feature object directory, so the 'properties' prefix is required if you're going to access a GeoJSON property on your data. 
     'properties.density': { 
      // A legend will automatically be generated for you. You can add this as a control. This displayName property will be the title for this layer's legend. 
      displayName: 'Density', 
      color: yellowToRed 
     } 
    }; 
}); 

Это простой пример. Для ваших данных это может выглядеть несколько иначе. Пройдите документацию и образцы DVF, и вы найдете то, что подходит вам.