60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
const LEGEND_MODES = {
|
|
cables: {
|
|
title: "线缆图例",
|
|
items: [
|
|
{ color: "#ff4444", label: "Americas II" },
|
|
{ color: "#44ff44", label: "AU Aleutian A" },
|
|
{ color: "#4444ff", label: "AU Aleutian B" },
|
|
{ color: "#ffff44", label: "其他电缆" },
|
|
],
|
|
},
|
|
satellites: {
|
|
title: "卫星图例",
|
|
items: [
|
|
{ color: "#4db8ff", label: "卫星本体" },
|
|
{ color: "#9be7ff", label: "卫星轨迹" },
|
|
{ color: "#7dffb3", label: "悬停高亮" },
|
|
{ color: "#ffd166", label: "选中目标" },
|
|
],
|
|
},
|
|
};
|
|
|
|
let currentLegendMode = "cables";
|
|
|
|
export function initLegend() {
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function setLegendMode(mode) {
|
|
const nextMode = LEGEND_MODES[mode] ? mode : "cables";
|
|
if (nextMode === currentLegendMode) return;
|
|
currentLegendMode = nextMode;
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function getLegendMode() {
|
|
return currentLegendMode;
|
|
}
|
|
|
|
function renderLegend(mode) {
|
|
const legend = document.getElementById("legend");
|
|
if (!legend) return;
|
|
|
|
const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
|
|
const itemsHtml = config.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>
|
|
`;
|
|
}
|