腾讯地图 - 智能圆角化工具

一个基于腾讯地图 API 的智能多边形圆角化工具，可以将任意多边形转换为具有平滑圆角的新多边形。

项目简介

本项目是一个 Web 应用程序，主要用于对地理多边形进行智能圆角化处理。通过算法分析多边形的角度特征，自动识别需要圆角化的顶点，并生成平滑的圆角曲线，最终输出新的多边形坐标。

功能特性

• 🗺️ 腾讯地图集成: 基于腾讯地图 JavaScript API，支持真实地理坐标
• 🔄 智能圆角化: 自动识别多边形顶点角度，智能应用圆角化算法
• ⚙️ 参数可调: 支持自定义圆角半径、分段数、角度范围等参数
• 🎯 实时预览: 在地图上实时显示原始图形和圆角化后的效果
• 📐 数学精确: 使用 Turf.js 进行地理计算，确保坐标精度

技术架构

核心技术栈

• 前端框架: 原生 JavaScript (ES6+)
• 地图服务: 腾讯地图 JavaScript API
• 地理计算: Turf.js (地理空间分析库)
• 样式: CSS3 (响应式设计)

核心算法

1. 角度计算: 计算多边形相邻线段间的夹角
2. 顶点识别: 根据角度范围筛选需要圆角化的顶点
3. 贝塞尔曲线: 使用二次贝塞尔曲线生成平滑圆角
4. 坐标插值: 基于分段数生成圆角曲线的离散坐标点

文件结构

amap-rounded-corner/
├── index.html          # 主页面HTML文件
├── index.js           # 主要业务逻辑和地图交互
├── utils.js           # 核心算法工具函数
└── README.md          # 项目说明文档

使用方法

1. 环境准备

• 确保有网络连接（需要加载腾讯地图 API 和 Turf.js）
• 现代浏览器支持（Chrome、Firefox、Safari、Edge 等）

2. 启动项目

# 使用本地服务器启动（推荐）
python -m http.server 8000
# 或使用Node.js
npx http-server
# 或使用Live Server扩展（VS Code）

3. 操作步骤

1. 绘制原始图形: 点击"绘制原始图形"按钮显示示例多边形
2. 调整参数: 使用滑块调整以下参数：
   • 圆角半径: 1-100 米
   • 基础分段数: 4-32 段
   • 最小角度: 0-90 度
   • 最大角度: 90-180 度
3. 应用圆角化: 点击"应用圆角化"按钮生成圆角化后的多边形
4. 重置: 点击"重置"按钮清除所有图形

参数说明

圆角半径 (Radius)

• 范围: 1-100 米
• 作用: 控制圆角的大小，数值越大圆角越明显
• 建议: 根据多边形实际尺寸调整，通常为多边形边长的 5-20%

基础分段数 (Steps)

• 范围: 4-32 段
• 作用: 控制圆角曲线的平滑程度，分段数越多曲线越平滑
• 建议: 根据精度要求调整，通常 12-16 段即可满足大部分需求

角度范围 (Angle Range)

• 最小角度: 0-90 度，低于此角度的顶点不会被圆角化
• 最大角度: 90-180 度，高于此角度的顶点不会被圆角化
• 作用: 控制哪些顶点需要圆角化处理
• 建议: 45-175 度范围适用于大多数情况

算法原理

1. 角度分析

• 将多边形分解为相邻线段对
• 计算每对线段间的夹角
• 根据角度范围筛选需要处理的顶点

2. 圆角生成

• 在需要圆角化的顶点处，沿相邻线段方向延伸指定距离
• 使用二次贝塞尔曲线连接延伸点，生成平滑圆弧
• 根据分段数对圆弧进行离散化，生成坐标点序列

3. 坐标重构

• 保留不需要圆角化的原始顶点
• 用圆角坐标替换需要处理的顶点
• 确保生成的多边形坐标闭合且方向正确

应用场景

• 城市规划: 道路、建筑轮廓的圆角化处理
• 地理信息系统: 行政区划边界的平滑处理
• 游戏开发: 地图区域边界的视觉优化
• 数据可视化: 多边形图形的美观展示

技术特点

优势

• 智能识别: 自动分析多边形几何特征
• 参数化控制: 灵活调整圆角化效果
• 实时交互: 即时预览处理结果
• 高精度: 基于专业地理计算库

限制

• 需要网络连接加载外部依赖
• 复杂多边形可能需要调整参数以获得最佳效果
• 圆角半径不应超过多边形特征尺寸

开发说明

代码结构

• index.js: 主要业务逻辑，地图初始化和用户交互
• utils.js: 核心算法实现，包含所有几何计算函数

关键函数

• roundedCornersByPolygon(): 主要的圆角化入口函数
• generateRoundedCorner(): 生成单个圆角的坐标
• quadraticBezierCurve(): 二次贝塞尔曲线计算

扩展建议

• 支持自定义多边形绘制
• 添加更多圆角化算法选项
• 支持批量处理多个多边形
• 添加导出功能（GeoJSON、KML 等）

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

许可证

本项目仅供学习和研究使用。

联系方式

如有问题或建议，请通过以下方式联系：

• 项目地址: [GitHub Repository]
• 问题反馈: [Issues]

---

注意: 使用腾讯地图 API 需要有效的 API 密钥，请确保密钥配置正确且未过期。