如何在 mapbox-gl 中使用 clusterProperties
How to use clusterProperties in mapbox-gl
我构建了一个 mapbox-gl js (v0.52) 地图,其中的点被聚合成簇;很像 mapbox 页面中的 clusters example。
簇颜色需要是单个点属性聚合的函数:为简单起见,假设每个点都有一个 status
属性,它决定了它的颜色,并且cluster 应该只是对应于每个点的 status
值的 max
的颜色。
示例 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, similar to 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
用法有什么问题?它似乎只是拒绝验证此 属性。请注意,如果我评论设置它的最后 3 行,地图工作正常(当然没有 status
聚合 属性)。
几天后我找到了答案:我们使用的 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 发布了,它可以与 clusterProperties
一起使用,内部使用 mapbox-gl 0.53.0.
我构建了一个 mapbox-gl js (v0.52) 地图,其中的点被聚合成簇;很像 mapbox 页面中的 clusters example。
簇颜色需要是单个点属性聚合的函数:为简单起见,假设每个点都有一个 status
属性,它决定了它的颜色,并且cluster 应该只是对应于每个点的 status
值的 max
的颜色。
示例 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, similar to 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
用法有什么问题?它似乎只是拒绝验证此 属性。请注意,如果我评论设置它的最后 3 行,地图工作正常(当然没有 status
聚合 属性)。
几天后我找到了答案:我们使用的 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 发布了,它可以与 clusterProperties
一起使用,内部使用 mapbox-gl 0.53.0.