天地图地图选点与坐标转换技巧

文章目录需求分析一、天地图 API 加载与渲染1. 天地图 API v4.0 简介2. 注册与密钥3. 脚本动态加载4. 核心 API 对象5. 地图初始化完整流程6. 覆盖物渲染7. 事件系统8. `setViewport` 自动调整视野9. KMZ 航线数据解析与渲染10. `checkResize` 尺寸重计算11. 坐标系说明二、坐标转换工具coordinateUtils.ts三、组件核心实现1. 状态定义2. 地图初始化（含点击拾取）3. 标记渲染函数4. KMZ 航线渲染4.1 上传解析4.2 后端解析与数据提取4.3 坐标数据提取4.4 地图绘制（T.Polyline）4.5 编辑回显4.6 保存时上传航线文件5. 监听输入框变化同步标记6. 模板（地图 + 模式切换按钮）7. CSS 关键点8. 生命周期管理四、在 Dialog 中使用地图的注意事项常见问题：滚轮无法缩放地图常见问题：地图超出容器遮住其他元素常见问题：Dialog Tab 切换时地图尺寸异常五、完整交互流程六、完整代码参考七、坐标系说明需求基于天地图 API 实现地图选点拾取坐标功能，支持：地图点击拾取经纬度（GCJ-02 格式）手动输入坐标同步地图标记CGCS2000 ↔ GCJ-02 坐标转换与 KMZ 航线预览共存在 Dialog 弹窗中正常使用滚轮缩放分析一、天地图 API 加载与渲染1. 天地图 API v4.0 简介天地图（Tianditu）是国家地理信息公共服务平台，提供免费的在线地图服务。其 JavaScript API v4.0 支持：地图显示（矢量、影像、地形等多图层）覆盖物（标记、折线、多边形等）事件交互（点击、拖拽、缩放等）坐标拾取与地理编码官网：https://www.tianditu.gov.cnAP