68 lines
1.4 KiB
JavaScript
68 lines
1.4 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 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">${config.title}</h3>
|
|
<div class="legend-list">${itemsHtml}</div>
|
|
`;
|
|
}
|