vue3+leaflet地图深色

Vue 3 与 Leaflet 结合使用时，实现深色主题地图较为简单。Leaflet 是一个开源的 JavaScript 库，用于在网页上嵌入和显示地图。通过使用 Leaflet 的主题功能，可以很容易地将地图切换为深色模式。

以下是在 Vue 3 项目中为 Leaflet 地图添加深色主题的大致步骤：

1. **添加Leaflet库：** 首先需要在你的 Vue 3 项目中安装 Leaflet。你可以使用 npm 或 yarn 来安装 Leaflet。

   npm install leaflet

或者

   yarn add leaflet

2. **导入Leaflet样式和脚本：** 在你的组件中导入 Leaflet 的 CSS 文件和 JavaScript 文件。

   import L from 'leaflet';
   import 'leaflet/dist/leaflet.css';

3. **添加深色主题样式：** Leaflet 默认没有深色主题，但你可以使用社区贡献的主题样式文件。例如，使用 `leaflet nighttime` 主题样式。你可以从网上找到该主题的 CSS 文件，并下载或直接链接到你的项目中。

   import 'leaflet.nighttimecss/leaflet.nighttime.css';

请注意，`leaflet.nighttimecss` 是一个社区扩展，你可能需要寻找适合的深色主题插件或自行编写 CSS 覆盖默认样式。

4. **创建地图实例并添加到页面：** 在你的 Vue 组件中，创建地图实例并指定初始位置和缩放级别。

   export default {
     name: 'MapComponent',
     mounted() {
       const map = L.map('map').setView([51.505, -0.09], 13);
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '© OpenStreetMap contributors'
       }).addTo(map);
     }
   }

在上述代码中，`L.map` 创建了地图实例，`L.tileLayer` 添加了地图瓦片服务。如果你使用的是深色主题瓦片，那么在这个方法中指定的瓦片服务 URL 应该是支持深色主题的。

5. **调整地图样式：** 如果你使用的是自定义的深色瓦片或者有特定的样式调整需求，你可以通过 CSS 来覆盖默认样式。

确保在 HTML 模板中有一个 div 元素作为地图的挂载点：

<template>
  <div id="map" style="height: 400px;"></div>
</template>