69 lines
1.5 KiB
JavaScript
69 lines
1.5 KiB
JavaScript
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 titleEl = legend.querySelector(".legend-title");
|
|
const listEl = legend.querySelector(".legend-list");
|
|
if (!titleEl || !listEl) return;
|
|
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("");
|
|
|
|
titleEl.textContent = config.title;
|
|
listEl.innerHTML = itemsHtml;
|
|
}
|