vue-hmap/README.md

A Vue3 component for Gaode Map with drawing capabilities

# Vue HMap Component

一个基于 Vue3 + TypeScript 的高德地图绘制组件库，提供丰富的地图绘制功能和工具。

## ✨ 特性

- 🗺️ **高德地图集成** - 基于高德地图 API，支持多种地图图层
- ✏️ **丰富的绘制工具** - 支持标记点、管线、区域等多种绘制类型
- 🎨 **可视化工具面板** - 拖拽式工具面板，直观易用
- 🔍 **位置搜索** - 内置位置搜索功能
- 📱 **响应式设计** - 适配各种屏幕尺寸
- 🎯 **TypeScript 支持** - 完整的类型定义
- 🎛️ **数据预览** - 实时预览绘制数据
- 💾 **数据保存** - 支持多种数据保存格式
- 🎪 **图层切换** - 支持标准地图和卫星图切换

## 📦 安装

```bash
npm install vue-hmap
```

## 🚀 快速开始

### 基础用法

```vue
<template>
  <HMap 
    :drawType="1" 
    :drawArr="[]" 
    :mapKey="yourAmapKey"
    @mapDone="onMapDone" 
    @mapSave="onMapSave" 
    @mapEdit="onMapEdit" 
  />
</template>

<script setup>
import HMap from 'vue-hmap'

const onMapDone = (isDone) => {
  console.log('地图加载完成:', isDone)
}

const onMapSave = (data) => {
  console.log('保存的数据:', data)
}

const onMapEdit = (data) => {
  console.log('编辑的数据:', data)
}
</script>
```

### 完整示例

```vue
<template>
  <div style="width: 100vw; height: 100vh;">
    <HMap 
      :drawType="drawType"
      :drawArr="drawData"
      :mapKey="amapKey"
      :mapSecurityJsCode="securityCode"
      :isPreview="true"
      :isOnlyGeo="false"
      @mapDone="handleMapDone"
      @mapSave="handleMapSave"
      @mapEdit="handleMapEdit"
      @mapClick="handleMapClick"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HMap from 'vue-hmap'

const drawType = ref(1) // 绘制类型
const drawData = ref([]) // 初始绘制数据
const amapKey = ref('your-amap-key') // 高德地图 Key
const securityCode = ref('your-security-code') // 安全密钥

const handleMapDone = (isDone) => {
  console.log('地图加载状态:', isDone)
}

const handleMapSave = (data) => {
  console.log('保存的绘制数据:', data)
  // 处理保存的数据
}

const handleMapEdit = (data) => {
  console.log('编辑的绘制数据:', data)
  // 处理编辑的数据
}

const handleMapClick = (event) => {
  console.log('地图点击事件:', event)
}
</script>
```

## 📋 API 文档

### Props

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `drawType` | `Number` | `0` | 绘制类型：0=无，1=标记点，2=线段，3=多边形 |
| `drawArr` | `Array` | `[]` | 初始绘制数据数组 |
| `mapKey` | `String` | `''` | 高德地图 API Key |
| `mapSecurityJsCode` | `String` | `''` | 高德地图安全密钥 |
| `isPreview` | `Boolean` | `false` | 是否显示数据预览按钮 |
| `isOnlyGeo` | `Boolean` | `false` | 是否只保存地理坐标数据 |

### Events

| 事件名 | 参数 | 描述 |
|--------|------|------|
| `mapDone` | `(isDone: boolean)` | 地图加载完成时触发 |
| `mapClick` | `(event: object)` | 地图点击时触发 |
| `mapSave` | `(data: object)` | 保存绘制数据时触发 |
| `mapEdit` | `(data: object)` | 编辑绘制数据时触发 |

### 方法

| 方法名 | 参数 | 描述 |
|--------|------|------|
| `setData` | `(element: string, data: object)` | 设置元素数据 |

## 🛠️ 绘制工具

### 管点工具
- **阀门** - 用于标记阀门位置
- **补偿器** - 用于标记补偿器位置  
- **检查井** - 用于标记检查井位置
- **管道井** - 用于标记管道井位置
- **分支阀门** - 用于标记分支阀门位置
- **减压阀** - 用于标记减压阀位置

### 管线工具
- **管线** - 绘制管线路径
- **虚线** - 绘制虚线路径

### 使用说明
1. **管点工具**：从左侧拖拽工具到地图，单击地图放置标记
2. **管线工具**：从左侧拖拽工具到地图，依次单击创建折线点，双击结束
3. **区域工具**：从左侧拖拽工具到地图，依次单击创建多边形点，双击结束
4. **右键操作**：右键点击绘制元素可进行信息绑定、编辑、删除等操作

## 🎨 功能特性

### 地图控制
- **图层切换**：支持标准地图和卫星图切换
- **缩放控制**：支持地图缩放和平移
- **位置搜索**：内置位置搜索功能

### 数据管理
- **数据预览**：实时预览所有绘制数据
- **数据保存**：支持保存完整绘制信息
- **数据清除**：一键清除所有绘制元素
- **数据编辑**：支持编辑已绘制的元素

### 工具面板
- **拖拽式工具**：直观的拖拽式工具面板
- **工具分类**：管点工具和管线工具分类管理
- **使用说明**：内置详细的使用说明

## 🔧 开发环境

### 依赖要求
- Vue 3.0+
- Element Plus 2.0+
- 高德地图 API

### 本地开发

```bash
# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib
```

## 📝 更新日志

### v0.0.5
- 新增拖拽式工具面板
- 优化绘制工具分类
- 新增数据预览功能
- 改进用户交互体验

### v0.0.4
- 新增图层切换功能
- 优化绘制性能
- 修复已知问题

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 📄 许可证

MIT License

## 🔗 相关链接

- [高德地图开放平台](https://lbs.amap.com/)
- [Vue 3 官方文档](https://vuejs.org/)
- [Element Plus 文档](https://element-plus.org/)

## 💡 注意事项

1. 使用前请确保已申请高德地图 API Key
2. 组件依赖 Element Plus，请确保项目中已安装
3. 建议在 Vue 3 项目中使用
4. 支持 TypeScript 项目

---

如有问题或建议，欢迎提交 Issue！