javascript - 使用动态值的传单等值线图

Question

我正在使用传单和 JSON 数据做一个 choropleth map。我在传单网站上得到了一个干净的教程。在该教程中，如果我没记错的话，所用的 us-states.js JSON 文件中的等值线基于 JSON 的 feature.properties.density 特性。如果我们查看 JS 文件，我们会发现有一个名为“ID”的字段，即状态 ID。我有一个数据库，其中有 5 个基于州 ID 的不同类别的数据。类别是人口、密度、男性人口、女性人口、识字率。我通过 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

我建议使用 Leaflet 数据可视化框架 (DVF) 插件，位于 here .此插件包含一组图层(例如 Choropleth 图层)和一组有助于对数据进行颜色编码的函数。

示例位于here将演示 DVF Choropleth 数据层。

使用 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 文档和示例，您将找到适合您的内容。