如何在mapbox-gl中使用clusterProperties

时间:2019-02-22 20:10:39

标签: mapbox-gl-js mapbox-gl

我构建了一个mapbox-gl js(v0.52)地图,该地图上的点被聚合到集群中;就像在clusters example在mapbox页面中一样。

簇的颜色必须是单个点属性的集合的函数:为简单起见,假设每个点都具有status属性,该属性确定其颜色,并且簇的颜色应仅是颜色对应于其每个点的max值的status

geojson数据示例如下:

const geoData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: 'fakeid11',
        status: 20,
      },
      geometry: {
        type: 'Point',
        coordinates: [-151.5129, 63.1016, 0]
      }
    },
    {
      type: 'Feature',
      properties: {
        id: 'fakeid22',
        status: 10,
      },
      geometry: {
        type: 'Point',
        coordinates: [-150.4048, 63.1224, 105.5]
      }
    }
  ]
};

我正在尝试使用clusterProperties将聚合计算为described in the api docs,类似于this example from the source code,以创建此层:

map.addSource('earthquakes', {
  type: 'geojson',
  data: geoData,
  cluster: true,
  clusterMaxZoom: 14, // Max zoom to cluster points on
  clusterRadius: 50, // Radius of each cluster when clustering points (defaults to 50)
  clusterProperties: {
    status: ['max', ['get', 'status']]
  }
});

此代码段与mapbox页面中的集群示例完全相同,只是将数据替换为我的静态2元素副本,然后添加clusterProperties

但是这会引发验证错误(从缩小的mapbox-gl版本中有点错了):

Error: sources.earthquakes: unknown property "clusterProperties"
    at Object.Jr [as emitValidationErrors] (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504146)
    at De (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)
    at i._validate (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)

这种clusterProperties用法有什么问题?似乎只是拒绝验证此属性。请注意,如果我评论设置地图的最后三行,则该地图可以正常运行(当然没有status聚合属性)。

1 个答案:

答案 0 :(得分:0)

几天后,我找到了答案:我们使用的react-map-gl版本依赖于mapbox-gl ~0.52.0,而该版本尚不支持clusterProperties。 mapbox-gl 0.53提供了对这些聚合属性的支持。 (并且由于React包装器使用mapbox-gl的未记录功能,因此它们依赖于补丁程序级别的确切版本)。这是confirmed by the react library developers

现在,react-map-gl 4.0.14已发布,并且可以在内部使用mapbox-gl 0.53.0在clusterProperties下正常工作。