lm-comp-laser-design-ui

腾讯地图原生绘制工具库 - 提供丰富的地图绘制和标注功能

✨ 特性

- 🎯 原生绘制工具 - 支持点、线、多边形、矩形、圆形等基础图形
- 🎨 图标绘制 - 内置丰富的图标资源，支持自定义样式
- 🚀 IconDrawerPro - 基于 DOMOverlay，支持完全的 CSS 自定义和动画效果
- ✏️ 编辑工具 - 支持图形编辑和修改
- 🛣️ 航线绘制 - 支持航线规划和绘制
- 📦 TypeScript - 完整的类型定义
- 🎭 React 支持 - 提供 React 组件封装

📦 安装

``bash
npm install lm-comp-laser-design-ui
`

🚀 快速开始

$3

`typescript
import { BaseIconDrawer } from 'lm-comp-laser-design-ui';

const icon = new BaseIconDrawer({
map: map,
lat: 30.244831,
lng: 120.151634,
type: 'UAV-Compliant',
width: 40,
height: 40
});
`

$3

`typescript
import { IconDrawerPro, ANIMATION_PRESETS } from 'lm-comp-laser-design-ui';

const icon = new IconDrawerPro({
map: map,
lat: 30.244831,
lng: 120.151634,
type: 'UAV-Compliant',
width: 40,
height: 40,
customStyles: {
animation: ANIMATION_PRESETS.bounce, // 跳动动画
border: '2px solid #1890ff',
borderRadius: '50%',
boxShadow: '0 0 20px rgba(24, 144, 255, 0.8)'
},
onClick: (e) => {
console.log('图标被点击了！', e);
}
});

// 动态更新位置
setTimeout(() => {
icon.updatePosition(30.250000, 120.160000);
}, 3000);

// 动态更新样式
icon.updateStyles({
color: 'red',
animation: ANIMATION_PRESETS.pulse
});
`

$3

`typescript
import {
NativeDrawPoint,
NativeDrawLine,
NativeDrawPolygon,
NativeDrawCircle
} from 'lm-comp-laser-design-ui';

// 绘制点
const point = new NativeDrawPoint(map);
point.addPoint({
lat: 30.244831,
lng: 120.151634
});

// 绘制线
const line = new NativeDrawLine(map);
line.addLine({
paths: [
{ lat: 30.244831, lng: 120.151634 },
{ lat: 30.254831, lng: 120.161634 }
]
});

// 绘制多边形
const polygon = new NativeDrawPolygon(map);
polygon.addPolygon({
paths: [
{ lat: 30.244831, lng: 120.151634 },
{ lat: 30.254831, lng: 120.151634 },
{ lat: 30.254831, lng: 120.161634 }
]
});
`

📚 文档

- IconDrawerPro 使用指南 - 详细的使用文档和示例

🎯 预定义动画效果

IconDrawerPro 提供了多种预定义动画：

`typescript
import { ANIMATION_PRESETS } from 'lm-comp-laser-design-ui';

ANIMATION_PRESETS.bounce // 跳动动画
ANIMATION_PRESETS.flash // 飞入动画
ANIMATION_PRESETS.rotate // 旋转动画
ANIMATION_PRESETS.pulse // 脉冲动画
ANIMATION_PRESETS.blink // 闪烁动画
ANIMATION_PRESETS.scale // 缩放动画
`

🎨 支持的图标类型

- UAV-Compliant - 合规无人机
- UAV-Violation - 违规无人机
- UAV-MinorViolation - 轻微违规无人机
- Obstacle-Ground - 地面障碍物
- Vertiport-Available - 可用起降场
- Vertiport-Inactive - 未启用起降场
- Infra-Charging - 充电站
- Infra-Communication - 通信设施
- Infra-Converged - 融合设施
- Infra-Gas - 加气站
- Infra-H2 - 氢能源
- Infra-Navigation - 导航设施
- Infra-Surveillance - 监视设施
- Helicopter - 直升机
- Grassland - 草原
- Sand - 沙地
- Ponding - 池塘

🔧 开发

`bash


安装依赖

npm install

启动开发服务器

npm run dev

构建库

npm run build:lib

启动文档站点

npm run docs:dev

构建文档

npm run docs:build
`

📂 项目结构

`
lm-comp-laser-design-ui/
├── src/
│ ├── components/ # React 组件
│ ├── utils/ # 工具类
│ │ ├── iconDrawer.ts # 基础图标绘制
│ │ ├── iconDrawerPro.ts # Pro版图标绘制
│ │ ├── drawPoint.ts # 点绘制
│ │ ├── drawLine.ts # 线绘制
│ │ ├── drawPolygon.ts # 多边形绘制
│ │ └── ...
│ └── assets/ # 资源文件
├── demo/ # 示例文件
│ ├── icon-drawer-pro-demo.html # HTML示例
│ └── icon-drawer-pro-demo.tsx # React示例
├── docs/ # 文档
│ └── IconDrawerPro使用指南.md
└── README.md
`

🆚 BaseIconDrawer vs IconDrawerPro

| 特性 | BaseIconDrawer | IconDrawerPro |
|------|----------------|---------------|
| 基础图标绘制 | ✅ | ✅ |
| CSS 自定义 | ⚠️ 有限 | ✅ 完全支持 |
| 动画效果 | ❌ | ✅ |
| 点击事件 | ❌ | ✅ |
| 动态更新 | ❌ | ✅ |
| 边框 / 圆角 / 阴影 | ❌ | ✅ |

📝 示例

查看 demo/ 目录下的示例文件：

- icon-drawer-pro-demo.html - 纯 HTML/JS 示例
- icon-drawer-pro-demo.tsx` - React/TypeScript 示例

📄 License

MIT

👥 贡献者

xia zai hai

📞 联系方式

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