数据驱动的样式错误，使用客户端加入-MapboxGLJS

数据驱动的样式是基于数据字段的条件进行样式修改，但这可能会导致数据匹配错误。它基于数据层之间的匹配而不是基于异步数据加载。有一个解决方法是使用客户端加入方式。

在Mapbox GL JS中，我们可以使用client-side joins来优化样式效果。这个方法有点类似于在SQL中进行JOIN，但是它是在客户端上进行的。我们通过让客户端在网页上进行左连接（Left Join）操作，来保证所有的数据都能被取到。这需要特别注意的是，它需要在添加源时进行设置，而不是在使用setData方法之后。

下面是一个使用客户端join的示例:

map.addSource("points", {
  'type': 'geojson',
  'data': pointsData
});

map.addSource("counts", {
  'type': 'geojson',
  'data': countsData
});

map.addLayer({
  'id': 'points-layer',
  'type': 'circle',
  'source': 'points',
  'paint': {
    'circle-color': ['get', 'color'],
    'circle-opacity': 0.8
  }
});

map.addLayer({
  'id': 'counts-layer',
  'type': 'symbol',
  'source': 'counts',
  'layout': {
    'text-field': ['concat', ['to-string', ['get', 'count']], ' counts'],
    'text-font': [
      'Open Sans Bold',
      'Arial Unicode MS Bold'
    ],
    'text-size': 14,
    'text-anchor': 'center'
  }
});

map.on('load', function () {
  // Join the two sources using client-side joins.
  var pointsSource = map.getSource('points');
  var countsSource = map.getSource('counts');
  var joinedPoints = clientJoin(pointsSource, countsSource, {
    // Use the `id` property to join the sources.
    'sourceKey': 'id',
    'target