MapBox 随机化建筑颜色

Question

是否可以遍历地图上的所有建筑物并为它们分配不同的颜色，或者驱动主题分组的不同属性值？

我有循环遍历建筑物的代码：

features = map.queryRenderedFeatures({ layers: ["building"], filter: ['==', 'extrude', 'true']});
features.forEach(function(feature){
  // how to change feature colour or property in here?
}

Answer 1

有多种方法可以实现您想要的效果。

功能状态

如果您的建筑物图层有要素 ID，您可以使用 setFeatureState 为每个建筑物设置一个状态。

features = map.querySourceFeatures('building', { sourceLayer: 'buildings' }));
features.forEach(function(feature){
  if (!map.getFeatureState({ id: feature.id, source: 'building', sourceLayer: 'buildings' }).color) {
    map.setFeatureState({ id: feature.id, source: 'building', sourceLayer: 'buildings' }, { color: makeRandomColor() }
  }
});

然后您可以在表达式中使用 ['feature-state', 'color']。

准随机

如果没有功能 ID，您或许可以随机使用一些其他属性。例如，如果有其他类型的 ID，您可以使用 mod 函数将其映射到一种颜色，以一种看起来有点随机的方式。

MapBox 随机化建筑颜色

MapBox Randomizing Building Color

mapbox-gl-js

功能状态

准随机