如何在Mapbox GL JS v0.45中设置集群的reduce选项?
如何在Mapbox GL JS v0.45中自定义集群聚合属性?
嘿,我刚好清楚这个情况!你在做Mapbox GL JS v0.45的集群功能POC,想要把每个城市点位的surface整数属性在聚合时求和,而且已经在源码里发现了reduce、initial、map这些用于自定义集群属性的选项,但官方文档没公开说明,不知道怎么配置对吧?
其实在v0.45版本里,虽然这些接口没有正式对外公开,但确实可以直接在GeoJSON数据源的配置里添加这些选项来实现自定义聚合。具体做法如下:
配置自定义聚合选项
在调用map.addSource()创建集群数据源时,除了官方文档里提到的cluster、clusterMaxZoom、clusterRadius这些参数,直接加上initial、map、reduce三个函数即可:
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




