Mapbox GL JS 动态加载数据按分类修改3D建筑颜色并添加图标咨询

1. 动态数据加载适配（适配百万级全球建筑数据） #

• 按地图视口、缩放等级做GeoJSON/JSON分段接口，当地图moveend事件触发时，仅请求当前可视范围内的建筑ID与对应分类、坐标数据，本地做LRU缓存减少重复请求
• 无需自定义整层3D建筑图层，直接关联Mapbox默认的building图层，通过feature-state绑定你的自定义分类属性，性能损耗最低

2. 自定义分类着色实现 #

你原有代码存在三处语法错误：不等于运算符!=中间不能有空格、hsl颜色格式错误（缺少饱和度/亮度的分隔逗号）、变量twenty需改为数值20，修复后可直接扩展case表达式优先匹配你的自定义分类颜色，示例如下：

'fill-extrusion-color': [
  "case",
  // 优先匹配自定义分类的颜色
  ["match", ["feature-state", "my_custom_type"],
    "商业", "#ff7d00",
    "住宅", "#42b983",
    "公共设施", "#3b82f6",
    null // 没有匹配到自定义分类的话走默认逻辑
  ],
  // 原有默认着色逻辑（已修复语法错误）
  ["!=", ["get", "min_height"], 0], "hsl(224, 18%, 56%)",
  ["match", ["get", "type"], ["building:part"], true, false], "hsl(224, 25%, 38%)",
  ["interpolate", ["linear"], ["get", "height"],
    0, "hsl(224, 47%, 29%)",
    20, "hsl(224, 61%, 33%)",
    50, "hsl(224, 53%, 48%)",
    400, "hsl(224, 83%, 72%)"
  ]
]

• 动态数据请求返回后，批量调用如下方法绑定分类属性即可实时更新颜色：

// 示例：给指定Mapbox ID的建筑设置自定义分类
map.setFeatureState(
  {
    source: 'composite',
    sourceLayer: 'building',
    id: 你的建筑MapboxID
  },
  { my_custom_type: '商业' }
)

3. 建筑旁关联图标添加 #

单独新增一个symbol图层展示分类关联图标，实现逻辑如下：

// 第一步：提前加载分类对应的图标
map.loadImage('你的本地图标路径/商业图标.png', (error, image) => {
  if (error) throw error;
  map.addImage('commercial-icon', image);
  // 其他分类图标同理依次添加
});

// 第二步：新增图标图层，数据源用你请求回来的建筑点位数据
map.addLayer({
  id: 'building-custom-icon',
  type: 'symbol',
  source: {
    type: 'geojson',
    data: '你的动态GeoJSON接口地址' // 也可以调用setData方法动态更新数据
  },
  layout: {
    // 按分类匹配对应图标
    'icon-image': [
      "match", ["get", "my_custom_type"],
      "商业", "commercial-icon",
      "住宅", "residence-icon",
      "公共设施", "public-icon",
      "default-icon"
    ],
    'icon-size': 0.8,
    // 图标锚定在建筑顶部
    'icon-anchor': 'bottom',
    'icon-allow-overlap': false,
    // 缩放等级>=15时才显示图标，避免小缩放下页面混乱
    'minzoom': 15
  },
  paint: {
    'icon-opacity': 0.9
  }
}, 'building') // 放在建筑图层上方显示

内容的提问来源于stack exchange，提问作者Paweł