Question

我正在使用传单和JSON数据进行choropleth map。我在传单网站上得到了一个干净的教程。在该教程中，使用了us-states.js JSON文件，其中等值区基于JSON的feature.properties.density功能，如果我没有错的话。如果我们看到JS文件，我们可以发现有一个名为“ID”的字段，它是状态ID。我有一个数据库，我根据状态ID有5种不同的数据类别。分类是人口，密度，男性人口，女性人口，literacy_rate。我通过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"}]

我想将这些数据整合为等值线。当我打电话给读写功能时，颜色的变化将基于literacy_rate数据。我可以明智地对getcolor函数进行更改。

由于

Answer 1

我建议使用位于here的Leaflet数据可视化框架（DVF）插件。这个插件包含一组图层（例如一个Choropleth图层）和一组帮助对数据进行颜色编码的函数。

位于here的示例将演示DVF等值数据层。

使用DVF，您可以创建颜色功能以创建缩放颜色值。例如，此函数将生成从黄色到红色的函数。点值包含值范围和HSL色调。

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文档和样本，您将找到适合您的内容。

使用动态值的小叶等值线图

1 个答案: