planet/frontend/public/earth/js/legend.js

const LEGEND_MODES = {
  cables: {
    title: "线缆图例",
  },
  satellites: {
    title: "卫星图例",
  },
  bgp: {
    title: "BGP观测图例",
  },
};

let currentLegendMode = "cables";
let legendItemsByMode = {
  cables: [],
  satellites: [],
  bgp: [],
};

export function initLegend() {
  renderLegend(currentLegendMode);
}

export function setLegendMode(mode) {
  const nextMode = LEGEND_MODES[mode] ? mode : "cables";
  currentLegendMode = nextMode;
  renderLegend(currentLegendMode);
}

export function getLegendMode() {
  return currentLegendMode;
}

export function refreshLegend() {
  renderLegend(currentLegendMode);
}

export function setLegendItems(mode, items) {
  if (!LEGEND_MODES[mode]) return;
  legendItemsByMode[mode] = Array.isArray(items) ? items : [];
  if (mode === currentLegendMode) {
    renderLegend(currentLegendMode);
  }
}

function renderLegend(mode) {
  const legend = document.getElementById("legend");
  if (!legend) return;

  const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
  const items = legendItemsByMode[mode] || [];
  const itemsHtml = items
    .map(
      (item) => `
        <div class="legend-item">
          <div class="legend-color" style="background-color: ${item.color};"></div>
          <span>${item.label}</span>
        </div>
      `,
    )
    .join("");

  legend.innerHTML = `
    <h3 class="legend-title hud-panel-title">${config.title}</h3>
    <div class="legend-list">${itemsHtml}</div>
  `;
}