TMap JSAPI GL 技能

帮助用户使用腾讯地图 JavaScript API GL 进行地图功能开发，包含基础地图功能和数据可视化功能。

目录结构

API 文档

• - JS API 参考文档: references/jsapigl/docs/ (21个md文件)

- 概述.md - API总览和索引 - 地图.md - 地图核心类和配置 - 点标记.md - 标注点相关API - 矢量图形.md - 折线、多边形、圆形、矩形、椭圆形等矢量图形 - 文本标记.md - 文本标注API - DOM覆盖物.md - 自定义DOM覆盖物 - 信息窗体.md - 信息窗口API - 点聚合.md - 点聚合功能 - 控件.md - 地图控件 - 自定义图层.md - 自定义栅格/矢量图层 - 事件.md - 地图事件系统 - 基础类.md - LatLng、Point等基础类 - 室内图.md - 室内地图功能 - 附加库：地图工具.md - 几何编辑器、测量工具 - 附加库：几何计算库.md - 距离、面积计算 - 附加库：服务类库.md - 地点搜索、路线规划等 - 附加库：地图视角附加库.md - 观察者视角 - 附加库：模型库.md - GLTF/3DTiles模型 - 附加库：天气图层.md - 气象图层 - 附加库：矢量数据图层.md - GeoJSON/MVT图层 - 环境检测.md - 浏览器环境检测

• - 可视化参考文档: references/visualization/docs/ (15个md文件)

- 参考手册.md - 可视化API总览 - 弧线图.md - 3D弧线/流向图 - 散点图.md - 3D散点图 - 热力图.md - 经典热力图 - 蜂窝热力图.md - 蜂窝聚合热力图 - 网格热力图.md - 网格聚合热力图 - 轨迹图.md - 轨迹展示 - 区域图.md - 区域轮廓图 - 管道图.md - 3D管道图 - 辐射圈.md - 辐射圈效果 - 围墙面.md - 围墙面效果 - 水晶体.md - 3D水晶体效果 - 行政区划.md - 行政区划展示 - 事件.md - 可视化事件系统 - 基础类.md - 可视化基础类

示例代码

• - JS API Demos: references/jsapigl/demos/ (129个html文件)

- 按功能分类：地图操作、点标记、文本标记、点聚合、折线、多边形、控件、信息窗口、服务类、个性化地图、几何计算、模型库、应用工具、自定义覆盖物、城市漫游等

• - 可视化 Demos: references/visualization/demos/ (44个html文件)

- 按图层类型分类：弧线图、散点图、热力图、轨迹图、蜂窝图、区域图、水晶体等

工作流程

1. 理解用户需求

当用户询问腾讯地图API相关问题时：

• - 明确用户需要的功能类型（基础地图/可视化）
• 确定具体要使用的类或功能

2. 查询 API 文档

在 references/jsapigl/docs/ 或 references/visualization/docs/ 中查找相关API文档：

• - 搜索关键词（如点标记、热力图）
• 阅读对应类的说明、配置参数、方法

3. 查找示例代码

在对应 demos 目录中查找示例：

• - JS API示例：references/jsapigl/demos/
• 可视化示例：references/visualization/demos/
• 示例命名格式：功能分类_具体示例.html

4. 提供解决方案

根据文档和示例，为用户提供：

• - API接口说明
• 代码示例
• 注意事项和最佳实践

使用示例

用户问题: 如何在地图上添加标记点？

执行流程:

1. 1. 读取 references/jsapigl/docs/点标记.md 了解 MultiMarker API
2. 查看 references/jsapigl/demos/ 中的点标记相关示例
3. 提供完整的代码示例和说明

用户问题: 怎么画一个热力图？

执行流程:

1. 1. 读取 references/visualization/docs/热力图.md 了解 Heat API
2. 查看 references/visualization/demos/ 中的热力图示例
3. 说明数据格式和配置选项

快速开始模板

基础地图初始化：

html

可视化图层示例（热力图）：

javascript
// 加载可视化库
//

var heat = new TMap.visualization.Heat({
radius: 50,
height: 100,
gradientColor: {
0: #13B06A,
0.4: #13B06A,
0.8: #E9AB1D,
0.9: #E9AB1D,
1: #E05649
}
}).addTo(map);

heat.setData([
{ lat: 39.984104, lng: 116.307503, count: 100 },
{ lat: 39.984504, lng: 116.307803, count: 80 }
]);

注意事项

JS API GL

1. 1. API Key: 使用腾讯地图API需要申请Key，通过环境变量 TMAPJSAPIKEY 配置，在代码中使用 {TMAPJSAPIKEY} 引用
2. 版本: 当前为 GL 版本，支持3D地图和WebGL渲染
3. 浏览器兼容: 现代浏览器，IE11+（需polyfill）
4. 坐标系: 使用 gcj02 坐标系
5. 地图创建（重要）: 地图创建的容器一定要有固定宽高，尤其是flex布局下
6. API使用（重要）: 所有功能的API调用都必须使用文档中出现的接口、属性、事件，不能自己编造；
7. API传参（重要）: 所有的API传入参数必须严格遵守api文档中说明的格式，如果不确定就去看看对应demo，包括demo中的数据格式；
8. 附加库的使用: 使用附加库需要在API加载URL中添加 libraries 参数

附加库	libraries 值	命名空间	说明
地图工具	tools	TMap.tools	几何编辑器、测量工具
几何计算库

geometry | TMap.geometry | 距离/面积计算、几何关系判断 | | 服务类库 | service | TMap.service | 地点搜索、路线规划、行政区划等 | | 地图视角附加库 | view | TMap (扩展方法) | 观察者视角操作地图 | | 模型库 | model | TMap.model | GLTF/3DTiles/3DMarker 模型 | | 天气图层 | weather | TMap.weather | 云图、温度图等气象图层 | | 矢量数据图层 | vector | TMap.vector | GeoJSON/MVT 矢量数据图层 | | 可视化库 | visualization | TMap.visualization | 可视化API的能力 |

使用示例：
html

可视化 API

1. 1. 数据格式: 可视化图层需要特定格式的数据输入
2. 性能: 大数据量时注意性能优化
3. 层级: 可视化图层可以设置显示层级
4. 事件: 支持点击、悬停等交互事件
5. API使用（重要）: