xiazaihai-maps-components

基于腾讯地图 API 的 React 地图组件库，支持 Map、Icon、原生地图绘制工具等功能。

✨ 特性

📦 安装

npm install xiazaihai-maps-components

🚀 快速开始

Map 组件

import { Map } from 'xiazaihai-maps-components';

function App() {
  return (
    <Map
      center={{ lat: 30.244831, lng: 120.151634 }}
      apiKey="YOUR_TENCENT_MAP_KEY"
    />
  );
}

NativeDrawPoint - 原生地图点绘制工具 ⭐ 新功能

类似 L7 DrawPoint 的简单 API，但基于原生腾讯地图实现，更轻量！

import { loadTencentMapAPI, NativeDrawPoint } from 'xiazaihai-maps-components';

// 初始化地图（自动包含 tools 库）
await loadTencentMapAPI('YOUR_API_KEY');
const mapInstance = new window.TMap.Map('container', {
  zoom: 13,
  center: new window.TMap.LatLng(30.244831, 120.151634)
});

// 创建绘制工具
const drawer = new NativeDrawPoint(mapInstance, {
  initialData: [{ lat: 30.244831, lng: 120.151634 }]
});

// 监听添加点事件
drawer.on('add', (data) => {
  console.log('添加点:', data);
});

// 启用点击添加点
drawer.enable();

// 获取所有点数据
const points = drawer.getData();

// 清空所有点
drawer.clear();

// 禁用
drawer.disable();

NativeDrawLine - 原生地图线段绘制工具 ⭐ 新功能

类似 L7 DrawLine 的 API，基于腾讯地图原生 GeometryEditor 实现！

import { loadTencentMapAPI, NativeDrawLine } from 'xiazaihai-maps-components';

// 初始化地图（自动包含 tools 库）
await loadTencentMapAPI('YOUR_API_KEY');
const mapInstance = new window.TMap.Map('container', {
  zoom: 13,
  center: new window.TMap.LatLng(30.244831, 120.151634)
});

// 创建线段绘制工具
const drawer = new NativeDrawLine(mapInstance, {
  lineStyle: {
    color: '#3777FF',
    width: 4
  }
});

// 监听绘制完成事件
drawer.on('add', (lineData) => {
  console.log('线段坐标:', lineData.paths);
  // paths: [{ lat: 30.1, lng: 120.1 }, { lat: 30.2, lng: 120.2 }, ...]
});

// 启用绘制（在地图上点击多个点，双击完成）
drawer.enable();

// 获取所有线段数据
const lines = drawer.getData();

// 清空所有线段
drawer.clear();

// 禁用绘制
drawer.disable();

NativeDrawPolygon - 原生地图多边形绘制工具 ⭐ 新功能

import { loadTencentMapAPI, NativeDrawPolygon } from 'xiazaihai-maps-components';

// 初始化地图
await loadTencentMapAPI('YOUR_API_KEY');
const mapInstance = new window.TMap.Map('container', {
  zoom: 13,
  center: new window.TMap.LatLng(30.244831, 120.151634)
});

// 创建多边形绘制工具
const drawer = new NativeDrawPolygon(mapInstance, {
  polygonStyle: {
    color: 'rgba(55, 119, 255, 0.2)',
    borderColor: '#3777FF',
    borderWidth: 2
  }
});

// 监听添加多边形事件
drawer.on('add', (data) => {
  console.log('添加多边形:', data.paths);
});

// 启用绘制（点击多个点，双击完成）
drawer.enable();

// 获取所有多边形数据
const polygons = drawer.getData();

// 清空
drawer.clear();

NativeDrawRectangle - 原生地图矩形绘制工具 ⭐ 新功能

import { loadTencentMapAPI, NativeDrawRectangle } from 'xiazaihai-maps-components';

// 创建矩形绘制工具
const drawer = new NativeDrawRectangle(mapInstance, {
  rectangleStyle: {
    color: 'rgba(255, 0, 0, 0.2)',
    borderColor: '#FF0000',
    borderWidth: 2
  }
});

// 监听添加矩形事件
drawer.on('add', (data) => {
  console.log('添加矩形:', data.paths);
});

// 启用绘制（点击两个对角点完成）
drawer.enable();

NativeDrawCircle - 原生地图圆形绘制工具 ⭐ 新功能

import { loadTencentMapAPI, NativeDrawCircle } from 'xiazaihai-maps-components';

// 创建圆形绘制工具
const drawer = new NativeDrawCircle(mapInstance, {
  circleStyle: {
    color: 'rgba(0, 255, 0, 0.2)',
    borderColor: '#00FF00',
    borderWidth: 2
  }
});

// 监听添加圆形事件
drawer.on('add', (data) => {
  console.log('圆心:', data.center);
  console.log('半径(米):', data.radius);
});

// 启用绘制（点击中心并拖动设置半径）
drawer.enable();

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

# 启动文档站点
npm run docs:dev

# 构建文档
npm run docs:build

🎮 在线演示

启动开发服务器后访问以下地址：

npm run dev

• 原生绘图工具演示 - http://localhost:5173/demo/native-draw.html

  • 展示 NativeDrawPoint 和 NativeDrawLine 的使用
  • 支持点绘制和线段绘制
  • 实时显示绘制数据

• L7 绘图工具演示 - http://localhost:5173/demo/map-demo.html

  • 展示 L7 的各种绘图工具
  • 支持点、线、矩形、多边形、圆形绘制

• 图标演示 - http://localhost:5173/demo/new-icons.html

  • 展示组件库中的所有图标

📋 组件列表

Map 组件

• Map - 地图组件
• MapScene - 地图场景创建函数
• NativeDrawPoint - 原生地图点绘制工具 ⭐

Icon 组件

• MSLIcon - MSL 图标
• MianxingIcon - 面星图标
• QNEIcon - QNE 图标
• JichangIcon - 机场图标
• ZhishengjiIcon - 直升机图标
• WurenjiaIcon - 无人机图标
• 等等。..

🔧 工具函数

• loadTencentMapAPI - 加载腾讯地图 API
• createMarker - 创建标记点
• createPolylineLayer - 创建折线图层
• createGeometryEditor - 创建几何图形编辑器
• 更多工具函数。..

📝 更新日志

v1.1.0 (2025-10-13)

• ✨ 新增 NativeDrawPoint 原生地图点绘制工具
• 📝 完善文档和示例
• 🐛 修复已知问题

v1.0.0 (2025-09-22)

• 🎉 首次发布
• ✅ Map 组件
• ✅ Icon 组件库

📄 许可证

MIT

👨‍💻 作者

xia zai hai

🤝 贡献

欢迎提交 Issue 和 Pull Request！