Mapbox 如何通过额外json文件中的数据更改功能的样式/属性？（地图框GL）

到目前为止，我有一张地图（MapBox GL），可以用边界来绘制县

    map.addSource('states', {
        'type': 'geojson',
        'data': '/geojson/county_boundaries.geojson'
    });

    map.addLayer({ // adding borders:
        'id': 'state-borders',
        'type': 'line',
        'source': 'states',
        'layout': {},
        'paint': {
            'line-color': '#627BC1',
            'line-width': 2
        }
    });

此country_borders.geojson包含参数为“name”的项（功能）

...
   "features": [
       { "type": "Feature", "id": 8, "properties": { "name": "New York", ...

我还有一个stats.json文件，其中包含大多数特性的属性，其中“name”是主键

    "New York": {
        "Population": "500123",
        "Food Consumption Level": "3",
        "Color": "#e67800"
    },

我是MapBox的新手，有这么多基于参数的函数，我都快迷路了。请帮助我通过查找所有州的名称（“纽约”等），使用stats.json文件中的颜色更改这些州的填充颜色。我想我需要遍历所有的特性，并以某种方式设置它们的填充

我发现用相同的默认颜色填充状态的唯一方法如下：

    map.addLayer({
        'id': 'state-fills',
        'type': 'fill',
        'source': 'states',
        'layout': {},
        'paint': {
            'fill-color': '#627BC1',
            'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                1,
                0.5
            ]
        }
    });

---

它正在努力填补所有州的空缺。但不是我需要的。我想动态修改每个状态运行时的颜色，而不更改原始的geojson文件。（data.json中的其他参数显示在弹出窗口中，使用这种额外的文件方法可以很好地工作。）

在添加源之前，您可以使用Javascript将统计信息添加到GeoJSON，而不是将原始GeoJSON文件作为源添加到地图中：

var geojson = addStats(originalGeojson, stats);
map.addSource('states', {
    'type': 'geojson',
    'data': geojson
});

function addStats(geojson, stats) {
  geojson.features.forEach((feature) => {
    var statsForFeature = stats[feature.properties.name];
    if (statsForFeature) {
      // add stats to the feature's properties
      feature.properties = Object.assign(feature.properties, statsForFeature);
    }
  });

  return geojson;
}

之后，您可以使用图层类型“填充”为功能着色：

map.addLayer({ // adding borders:
  'id': 'state-borders',
  // use type 'fill'
  'type': 'fill',
  'source': 'states',
  'layout': {},
  'paint': {
    'fill-outline-color': '#627BC1',
    // use data-driven styling
    'fill-color': ['get', 'Color'],
  },
});

下面是一个演示此技术的工作示例：