如何让Mapbox GL符号在任意缩放级别显示于OTP-UI的Transitive线路上

需求描述 #

使用otp-ui（Open Trip Planner UI）开发地图应用时，需要在transitive-lines图层上显示包含公交线路名称/编号的气泡符号，要求：

• 无论桌面/移动端、任何缩放级别，符号始终可见
• 符号不直接生成在公交步骤的点位处

当前代码 #

export function getRouteLayerLayout(textField: string): SymbolLayout {
  // Generates a single icon based on the string length
  function generateIcon(length: number) {
    return [["==", ["length", ["get", textField]], length], `${length}`];
  }

  // Generates every icon length from 1-17. Anything higher renders a rectangle
  const iconImage: Expression = [
    "case",
    ...Array(17)
      .fill(0)
      .map((_, i) => generateIcon(i + 1))
      .flat(),
    "rect"
  ];

  return {
    "icon-image": iconImage,
    "icon-optional": false,
    "icon-allow-overlap": true,
    "icon-ignore-placement": true,
    "icon-rotation-alignment": "viewport",
    "icon-text-fit-padding": [17, 17.5, 17, 17.5],
    "icon-text-fit": "both",
    "symbol-placement": "line-center",
    "symbol-spacing": 1,
    "symbol-sort-key": 1000000,
    "text-allow-overlap": true,
    "text-field": ["get", textField],
    "text-font": [
      "Source Sans Pro Bold",
      "Open Sans Bold",
      "Arial Unicode MS Bold"
    ],
    "text-ignore-placement": true,
    "text-justify": "left",
    "text-line-height": 0.5,
    "text-letter-spacing": 0,
    "text-padding": 0,
    "text-rotation-alignment": "viewport",
    "text-size": 21,
    "visibility": 'visible'
  };
}

当前问题 #

行程初始加载时仅能看到一条线路的符号，另一条线路的符号需要放大地图后才能显示。

解决方案 #

针对上述问题，调整图层布局属性即可实现所有缩放级别下符号稳定显示：

1. 动态调整符号间隔 #

将固定的symbol-spacing改为基于缩放级别的插值表达式，低缩放时设置较大间隔保证至少1-2个符号可见，高缩放时缩小间隔增加密度：

"symbol-spacing": [
  "interpolate",
  ["linear"],
  ["zoom"],
  10, 500,
  16, 100
],

2. 更改符号放置规则 #

把symbol-placement从line-center改为line，让符号沿整条线路分布，而非仅在线路中心：

"symbol-placement": "line",

3. 强制显示至少一个符号 #

设置symbol-min-distance为0，配合icon-optional: false，确保即使线路在视野中占比很小，也会显示至少一个符号：

"symbol-min-distance": 0,

4. 动态适配文字大小 #

为避免低缩放时文字过大遮挡，将text-size改为随缩放动态调整：

"text-size": [
  "interpolate",
  ["linear"],
  ["zoom"],
  10, 14,
  16, 21
],

修改后的完整代码 #

export function getRouteLayerLayout(textField: string): SymbolLayout {
  // Generates a single icon based on the string length
  function generateIcon(length: number) {
    return [["==", ["length", ["get", textField]], length], `${length}`];
  }

  // Generates every icon length from 1-17. Anything higher renders a rectangle
  const iconImage: Expression = [
    "case",
    ...Array(17)
      .fill(0)
      .map((_, i) => generateIcon(i + 1))
      .flat(),
    "rect"
  ];

  return {
    "icon-image": iconImage,
    "icon-optional": false,
    "icon-allow-overlap": true,
    "icon-ignore-placement": true,
    "icon-rotation-alignment": "viewport",
    "icon-text-fit-padding": [17, 17.5, 17, 17.5],
    "icon-text-fit": "both",
    "symbol-placement": "line",
    "symbol-spacing": [
      "interpolate",
      ["linear"],
      ["zoom"],
      10, 500,
      16, 100
    ],
    "symbol-min-distance": 0,
    "symbol-sort-key": 1000000,
    "text-allow-overlap": true,
    "text-field": ["get", textField],
    "text-font": [
      "Source Sans Pro Bold",
      "Open Sans Bold",
      "Arial Unicode MS Bold"
    ],
    "text-ignore-placement": true,
    "text-justify": "left",
    "text-line-height": 0.5,
    "text-letter-spacing": 0,
    "text-padding": 0,
    "text-rotation-alignment": "viewport",
    "text-size": [
      "interpolate",
      ["linear"],
      ["zoom"],
      10, 14,
      16, 21
    ],
    "visibility": 'visible'
  };
}

关键说明 #

• symbol-spacing的插值参数可根据实际地图范围和线路长度调整，确保低缩放时每条可见线路至少有1-2个符号
• symbol-placement: line避免了仅在线路中心显示导致的符号不在视野内的问题
• 动态text-size保证不同缩放级别下文字的可读性和视觉协调性

内容的提问来源于stack exchange，提问作者Adrian Rosales