javascript - 如何使用 Mapbox GL JS 和对象制作等值线图？

Question

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

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

        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？

Answer 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