feat:修改地图

src/views/Dashboard/src/components/TopMap.vue

@@ -2,6 +2,9 @@
 import { onMounted, ref, watch } from 'vue'
 import OriginIcon from '../image/hhh_2.png'
 import L from 'leaflet'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 const MapDataList = ref([])
 const mapobj = ref()
 const originIcon = L.icon({
@@ -131,7 +134,11 @@ defineExpose({
 })
 </script>
 <template>
-  <div id="map" style="width: 100%; height: 272px"></div>
+  <div
+    id="map"
+    style="width: 100%; height: 272px"
+    :class="{ 'dark-mode': themeStore.theme === 'dark' }"
+  ></div>
 </template>
 
 <style lang="scss">
@@ -180,6 +187,57 @@ defineExpose({
     }
   }
 }
+.dark-mode {
+  div.leaflet-control-zoom.leaflet-bar.leaflet-control {
+    border: 0;
+    border-radius: 4px;
+    box-shadow: none;
+    a {
+      background-color: #3c414a;
+      border-bottom: none;
+      span {
+        color: var(--color-neutral-1);
+      }
+      &:first-child {
+        span {
+          display: inline-block;
+          width: 24px;
+          border-bottom: 2px solid #575c64;
+        }
+      }
+    }
+  }
+  .reset-zoom-control {
+    border: none;
+    background-color: #3c414a;
+  }
+  a.leaflet-bar-part {
+    background-color: #3c414a;
+    border-radius: 4px;
+    box-shadow: none;
+    overflow: hidden;
+    div {
+      border-color: var(--color-neutral-1) !important;
+      div {
+        background-color: var(--color-neutral-1) !important;
+      }
+    }
+  }
+}
+/* 示例：将所有地图图片的颜色反转 */
+.dark-mode img:not(.leaflet-marker-icon) {
+  filter: invert(1) hue-rotate(200deg);
+}
+// 防止暗黑模式下地图超出容器
+#map {
+  overflow: hidden;
+}
+// 修改暗黑模式下的背景色
+.leaflet-container.dark-mode,
+.leaflet-map-pane.dark-mode,
+.leaflet-tile-container.dark-mode {
+  background-color: #2b2f36;
+}
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {
   margin-top: 10px; /* 增加上边距，使按钮与默认缩放按钮之间有间距 */