Vue HMap Component

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

✨ 特性

• 🗺️ 多地图支持 - 集成高德地图 (AMap) 和天地图 (TMap)，一键切换
• ✏️ 丰富的绘制工具 - 支持标记点、管线、区域等多种绘制类型
• 🎨 可视化工具面板 - 拖拽式工具面板，直观易用
• 🔍 位置搜索 - 内置位置搜索功能
• 📱 响应式设计 - 适配各种屏幕尺寸
• 🎯 TypeScript 支持 - 完整的类型定义
• 🎛️ 数据预览 - 实时预览绘制数据
• 💾 数据保存 - 支持多种数据保存格式
• 🎪 图层切换 - 支持标准地图和卫星图切换
• 🖱️ 右键菜单 - 丰富的右键操作功能（信息绑定、编辑、删除）

📦 安装

npm install vue-hmap

或使用 yarn：

yarn add vue-hmap

或使用 pnpm：

pnpm add vue-hmap

🚀 快速开始

基础用法 (高德地图)

<template>
  <div style="width: 100vw; height: 100vh;">
    <HMap 
      mapType="AMap"
      :mapKey="amapKey"
      :mapSecurityJsCode="securityCode"
      @mapDone="onMapDone" 
      @mapSave="onMapSave" 
      @mapEdit="onMapEdit" 
    />
  </div>
</template>

<script setup>
import { HMap } from 'vue-hmap'
import 'vue-hmap/dist/style.css' // 引入样式

const amapKey = 'your-amap-key' // 高德地图 Key
const securityCode = 'your-security-code' // 高德地图安全密钥（可选）

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

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

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

基础用法 (天地图)

<template>
  <div style="width: 100vw; height: 100vh;">
    <HMap 
      mapType="TMap"
      :mapKey="tiandituKey"
      @mapDone="onMapDone" 
      @mapSave="onMapSave" 
      @mapEdit="onMapEdit" 
    />
  </div>
</template>

<script setup>
import { HMap } from 'vue-hmap'
import 'vue-hmap/dist/style.css'

const tiandituKey = 'your-tianditu-key' // 天地图 Key

const onMapDone = (isDone) => {
  console.log('天地图加载完成:', isDone)
}
// ... 其他事件同上
</script>

完整示例

<template>
  <div style="width: 100vw; height: 100vh;">
    <HMap 
      ref="hmapRef"
      mapType="AMap" 
      :mapKey="amapKey"
      :mapSecurityJsCode="securityCode"
      :isPreview="true"
      :isOnlyGeo="false"
      @mapDone="handleMapDone"
      @mapSave="handleMapSave"
      @mapEdit="handleMapEdit"
      @mapClick="handleMapClick"
      @mapDelete="handleMapDelete"
      @saveLocationData="handleSaveLocationData"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HMap } from 'vue-hmap'
import 'vue-hmap/dist/style.css'

const hmapRef = ref()
const amapKey = 'your-amap-key'
const securityCode = 'your-security-code'

// ... 事件处理函数
</script>

📋 API 文档

Props

| 属性 | 类型 | 默认值 | 必填 | 描述 | |------|------|--------|------|------| | mapType | String | 'AMap' | ❌ | 地图类型，可选值：'AMap' (高德) 或 'TMap' (天地图) | | mapKey | String | '' | ✅ | 地图 API Key。高德：申请地址；天地图：申请地址 | | mapSecurityJsCode | String | '' | ❌ | 高德地图安全密钥（仅 mapType="AMap" 时有效） | | isPreview | Boolean | false | ❌ | 是否显示数据预览按钮 | | isOnlyGeo | Boolean | false | ❌ | 是否只保存地理坐标数据（经纬度），不包含业务属性 | | toolsArray | Array | [] | ❌ | 自定义工具栏配置，如果不传则使用内置默认配置 |

Events

| 事件名 | 参数 | 描述 | |--------|------|------| | mapDone | (isDone: boolean) | 地图资源加载完成时触发 | | mapClick | (event: object) | 地图点击时触发 | | mapSave | (data: string) | 点击保存绘制时触发，返回 JSON 字符串格式的所有绘制数据 | | mapEdit | (data: object) | 右键菜单点击编辑或绑定信息时触发 | | mapDelete | (id: string) | 删除绘制元素时触发，返回元素 ID | | saveLocationData | (data: string) | 点击保存数据时触发（当 isOnlyGeo=true 时），返回坐标数据 |

Methods

通过组件 ref 可以调用以下方法：

| 方法名 | 参数 | 描述 | |--------|------|------| | setData | (element: any, data: object) | 为当前选中的或指定的绘制元素设置/更新业务数据 | | drawCustom | (data: object) | 外部触发绘制，通常用于实现拖拽工具栏的自定义绘制逻辑 (data: { type: 'marker'|'polyline'|'polygon', ... }) | | clearAllElements | () | 清除地图上所有的绘制覆盖物 |

🛠️ 绘制工具

组件内置了左侧拖拽式工具栏，包含以下几类：

管点工具

• 标记点：可配置图标、名称、类型等
• 设备点：如阀门、井盖等

管线工具

• 实线：供水线等
• 虚线：规划线等
• 支持设置颜色、宽度、线型

区域工具

• 多边形：用于标注特定区域，支持设置填充色、边框色

📖 操作说明

1. 拖拽绘制：从左侧工具栏按住图标，拖拽至地图区域释放，即可开始绘制。
   • 点：释放即完成。
   • 线/面：释放确定起点，单击地图增加节点，双击结束绘制。
2. 右键菜单：
   • 在已绘制的元素上右键，可选择【绑定信息】、【编辑】（开启拖拽/顶点编辑）、【删除】。
3. 图层切换：
   • 地图右上角（或默认位置）提供标准地图与卫星地图的切换控件。

🔧 开发环境

依赖要求

• Vue >= 3.0.0
• Element Plus >= 2.0.0 (组件内部使用了 Element Plus 组件)

📄 许可证

MIT License