You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何在Mapbox GL JS v0.45中设置集群的reduce选项?

如何在Mapbox GL JS v0.45中自定义集群聚合属性?

嘿,我刚好清楚这个情况!你在做Mapbox GL JS v0.45的集群功能POC,想要把每个城市点位的surface整数属性在聚合时求和,而且已经在源码里发现了reduceinitialmap这些用于自定义集群属性的选项,但官方文档没公开说明,不知道怎么配置对吧?

其实在v0.45版本里,虽然这些接口没有正式对外公开,但确实可以直接在GeoJSON数据源的配置里添加这些选项来实现自定义聚合。具体做法如下:

配置自定义聚合选项

在调用map.addSource()创建集群数据源时,除了官方文档里提到的clusterclusterMaxZoomclusterRadius这些参数,直接加上initialmapreduce三个函数即可:

map.addSource("cities", {
  type: "geojson",
  data: "你的城市点位GeoJSON数据地址",
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50,
  // 自定义聚合相关的未公开选项
  initial: function() {
    // 初始化集群的累加属性,这里我们初始化surface的总和为0
    return { surfaceSum: 0 };
  },
  map: function(props) {
    // 映射每个点位的属性,只传递我们需要聚合的surface字段
    return { surface: props.surface };
  },
  reduce: function(accumulated, props) {
    // 定义聚合逻辑:把每个点位的surface值累加到集群的surfaceSum里
    accumulated.surfaceSum += props.surface;
  }
});

各函数的作用说明

  • initial:定义集群初始的属性状态,聚合开始前每个新集群都会用这个函数返回的对象作为初始值。
  • map:用来转换单个点位的属性结构,只把我们需要参与聚合的字段传递给reduce函数,避免不必要的属性传递。
  • reduce:核心的聚合逻辑,把每个点位的属性值合并到集群的累加属性中,这里我们实现的是求和操作。

使用自定义聚合后的属性

配置完成后,集群要素就会带上我们自定义的surfaceSum属性,你可以在图层的paint或layout属性里直接调用这个值,比如:

map.addLayer({
  id: "cluster-surface",
  type: "symbol",
  source: "cities",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{surfaceSum}",
    "text-size": 12
  }
});

需要注意的是,因为这些是未公开的接口,后续Mapbox GL JS版本可能会调整甚至移除这种配置方式,但在v0.45版本里是完全可以正常工作的。

内容的提问来源于stack exchange,提问作者Fractaliste

火山引擎 最新活动