vue-tianditu-map/README.md

A Vue 3 component for Tianditu map integration

# Vue Tianditu Map

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

## 特性

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

## 安装

```bash
npm install vue-tianditu-map
```

## 版本更新

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

## 使用方法

### 全局注册

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

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

### 局部注册

```vue
<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. 访问 [天地图开发者平台](https://console.tianditu.gov.cn/)
2. 注册并登录账号
3. 创建应用获取API密钥

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 发布到npm
npm run publish
```

## License

MIT