如何使用 Mapbox GL JS 和对象制作等值线地图？答案

【问题标题】：How do you make a choropleth map with Mapbox GL JS, and an object?如何使用 Mapbox GL JS 和对象制作等值线地图？
【发布时间】：2020-09-13 13:47:21
【问题描述】：

我正在努力寻找正确的信息，以便使用 mapbox 创建等值线地图。他们的例子非常模糊。

我目前有一个显示英国所有县的多边形的 geojson。我使用 map.addLayer 将其添加到地图中，但此刻，整个地图是相同的颜色：

        map.addLayer({
        "id": 'counties',
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": counties
            }
        },
        "layout": {},
        "paint": {
            "fill-color": fill,
            "fill-opacity": 0.8
        }
    });

counties 是 geojson 文件，其中还包含一个名为“County”的属性。另外，我还返回了一个对象，它分别返回县的键、值对，以及它在我的数据中出现的次数：

{
    "Bristol": 2,
    "Cheshire": 1,
    "City and County of the City of London": 14,
    "City of Aberdeen": 1,
    "City of Edinburgh": 3
}

如何使用来自我的对象的数据创建等值线图，以返回图层的不同阴影/颜色（例如，柴郡等县的颜色会较浅，因为值为 1，但市和县伦敦金融城的颜色会更深，因为值为 14？

【问题讨论】：

标签： javascript mapbox mapbox-gl-js choropleth

【解决方案1】：

您的 geojson 结构如何？

例如，最简单的方法是让您的要素拥有一个名为“频率”的属性。然后你可以像这样使用 Mapbox GL JS 数据驱动样式：

'fill-color': {
property: 'frequency',
stops: [[2, '#fff'], [5, '#f00']]
}

查看 Mapbox 的这篇帖子：https://blog.mapbox.com/data-driven-styling-for-fill-layers-in-mapbox-gl-js-80bb5292af4e

【讨论】：

【解决方案2】：

最简单的方法是使用mapbox-choropleth 库。

【讨论】：