lm-comp-laser-design-ui

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

✨ 特性

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

📦 安装

npm install lm-comp-laser-design-ui

🚀 快速开始

基础图标绘制

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
});

IconDrawerPro - 支持动画和自定义 CSS

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
});

绘制其他图形

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 提供了多种预定义动画：

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 - 池塘

🔧 开发

# 安装依赖
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