vue3使用leaflet加载天地图

要在Vue3中使用Leaflet加载天地图，可以按照以下步骤进行操作：

1. 安装leaflet和天地图插件

npm install leaflet
npm install leaflet-tilelayer-tdt

2. 在Vue组件中引入并初始化Leaflet

在Vue组件中引入Leaflet和天地图插件，然后在mounted钩子函数中初始化地图。

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-tilelayer-tdt'

export default {
  mounted() {
    // 初始化地图
    const map = L.map('map').setView([39.9, 116.4], 10)
    // 添加天地图图层
    const tdt = L.tdtLayer().addTo(map)
  }
}
</script>

<style>
#map {
  height: 400px;
}
</style>

3. 配置天地图的Key

天地图需要使用key才能正常加载，可以在mounted函数中配置。

mounted() {
  L.TDTConfig = {
    key: 'your_key' // 这里填写你的天地图key
  }
  // 初始化地图
  const map = L.map('map').setView([39.9, 116.4], 10)
  // 添加天地图图层
  const tdt = L.tdtLayer().addTo(map)
}

以上就是使用Vue3加载天地图的基本步骤。如果需要进一步定制地图，可以参考Leaflet和天地图插件的官方文档。