支持图源切换

meshmap_frontend/src/style.css

@@ -405,6 +405,151 @@ h3 {
   min-height: 560px;
 }
 
+.map-source-control {
+  position: absolute;
+  z-index: 800;
+  top: 12px;
+  right: 12px;
+}
+
+.map-source-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(226, 232, 240, 0.92);
+  border-radius: 14px;
+  color: #1d4ed8;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
+  backdrop-filter: blur(8px);
+}
+
+.map-source-popover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: grid;
+  gap: 10px;
+  width: min(300px, calc(100vw - 32px));
+  border: 1px solid rgba(191, 219, 254, 0.95);
+  border-radius: 18px;
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.97) 100%);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: top right;
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  backdrop-filter: blur(12px);
+}
+
+.map-source-control:hover .map-source-popover,
+.map-source-control:focus-within .map-source-popover {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.map-source-control:hover .map-source-icon,
+.map-source-control:focus-within .map-source-icon {
+  opacity: 0;
+}
+
+.map-source-drawer-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid #dbeafe;
+  padding-bottom: 9px;
+}
+
+.map-source-drawer-header span {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.map-source-drawer-header small {
+  flex-shrink: 0;
+  border-radius: 999px;
+  padding: 3px 7px;
+  color: #1d4ed8;
+  font-size: 11px;
+  font-weight: 800;
+  background: #dbeafe;
+}
+
+.map-source-options {
+  display: grid;
+  gap: 8px;
+  max-height: 260px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.map-source-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 10px 11px;
+  color: #334155;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.map-source-option:hover {
+  border-color: #93c5fd;
+  background: #f8fbff;
+  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
+  transform: translateY(-1px);
+}
+
+.map-source-option.active {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+  box-shadow: inset 3px 0 0 #2563eb, 0 8px 18px rgba(37, 99, 235, 0.12);
+}
+
+.map-source-option-name {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.map-source-option-check {
+  flex-shrink: 0;
+  border-radius: 999px;
+  padding: 3px 7px;
+  color: #166534;
+  font-size: 11px;
+  font-weight: 900;
+  background: #dcfce7;
+}
+
+.map-source-control-pill {
+  max-width: 240px;
+  overflow: hidden;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .map-empty {
   position: absolute;
   z-index: 450;
@@ -625,6 +770,10 @@ h3 {
   padding: 13px 16px;
 }
 
+.trajectory-map-shell {
+  position: relative;
+}
+
 .trajectory-map {
   height: 420px;
   min-height: 360px;