Mapbox点标注层级异常及小圆圈缩放隐藏问题求助

问题1：标注层级异常（后方点位文字覆盖前方） #

当前标注图层的排序逻辑导致员工数少的小圆圈标注渲染在上方，调整以下属性即可修复：

• 将symbol-sort-key改为员工数倒序，让员工数多的特征拥有更高渲染优先级
• 设置symbol-z-order为"source"，确保按排序后的顺序渲染
• 保留text-allow-overlap: false，避免低优先级标注重叠显示

修改后的labels图层配置：

mapRef.current.addLayer({
  id: "labels",
  type: "symbol",
  source: "points",
  layout: {
    "text-field": ["get", "employees"],
    "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
    "text-weight": "bold",
    "text-size": 12,
    "text-align": "center",
    "text-anchor": "center",
    "text-justify": "center",
    "text-offset": [0, 0],
    "symbol-z-order": "source",
    "text-allow-overlap": false,
    "text-ignore-placement": false,
    "text-optional": true,
    "symbol-sort-key": ["-", ["get", "employees"]], // 倒序排列，员工数多的标注在上层
  },
  paint: {
    "text-color": "#ffffff",
  },
});

问题2：指定缩放级别下隐藏员工数少的小圆圈 #

使用layout.visibility结合表达式，在指定缩放级别（示例为zoom < 10）时，隐藏员工数低于阈值（示例为500）的圆圈，缩放达标后全部显示。该方式比opacity更高效，会完全跳过隐藏元素的渲染。

修改后的circle图层配置：

mapRef.current.addLayer({
  id: "circle",
  type: "circle",
  source: "points",
  layout: {
    "visibility": [
      "case",
      // 自定义条件：缩放级别<10 且 员工数<500 时隐藏
      ["all", ["<", ["zoom"], 10], ["<", ["get", "employees"], 500]],
      "none",
      "visible"
    ]
  },
  paint: {
    "circle-color": "#82c5f1",
    "circle-radius": [
      "interpolate",
      ["linear"],
      ["get", "employees"],
      0,
      5,
      100,
      10,
      200,
      15,
      500,
      20,
      1000,
      25,
      2000,
      30,
    ],
    "circle-stroke-width": 2,
    "circle-stroke-color": "#ffffff",
  },
});

如果需要渐变隐藏效果，可改用paint.circle-opacity表达式替代visibility：

paint: {
  // ...其他paint属性
  "circle-opacity": [
    "case",
    ["all", ["<", ["zoom"], 10], ["<", ["get", "employees"], 500]],
    0,
    1
  ]
}

内容的提问来源于stack exchange，提问作者Luka Ladisic