Vue Tianditu Map

一个基于 Vue 3 的天地图组件包，支持矢量图、影像图和地形图显示。

特性

• ✅ 基于 Vue 3 Composition API
• ✅ 支持天地图矢量、影像、地形三种地图类型
• ✅ 自动加载天地图API
• ✅ 响应式配置更新
• ✅ TypeScript 支持
• ✅ 完整的注记图层支持

安装

npm install vue-tianditu-map

版本更新

v1.0.5

• 🐛 修复了天地图图层创建错误的问题
• ✨ 添加了注记图层支持，地图显示更加完整
• 🔧 优化了图层URL模板格式

使用方法

全局注册

import { createApp } from 'vue'
import VueTiandituMap from 'vue-tianditu-map'

const app = createApp(App)
app.use(VueTiandituMap)

局部注册

<template>
  <div>
    <MapComponent 
      :tdt-key="yourTdtKey"
      :center="[116.397428, 39.90923]"
      :zoom="12"
      map-type="vec"
      @map-ready="onMapReady"
    />
  </div>
</template>

<script setup>
import { MapComponent } from 'vue-tianditu-map'

const yourTdtKey = ref('your-tianditu-api-key')
const onMapReady = (map) => {
  console.log('地图初始化完成', map)
}
</script>

API

MapComponent Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | tdtKey | String | - | 天地图API密钥（必需） | | center | Array | [116.397428, 39.90923] | 地图中心点坐标 [经度, 纬度] | | zoom | Number | 12 | 地图缩放级别 | | mapType | String | 'vec' | 地图类型：'vec'矢量, 'img'影像, 'ter'地形 |

MapComponent Events

| 事件名 | 参数 | 说明 | |--------|------|------| | map-ready | map | 地图初始化完成时触发 |

获取天地图API密钥

1. 访问 天地图开发者平台
2. 注册并登录账号
3. 创建应用获取API密钥

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 发布到npm
npm run publish

License

MIT