Skill: tencent-adm/tencentmap-jsapi-gl-skill (version 1.0.0)

--- name: tencentmap-jsapi-gl-skill description: 腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。 version: 1.0.0 metadata: { "openclaw": { "requires": { "bins": [""], "env": ["TMAP_JSAPI_KEY"] }, "primaryEnv": "TMAP_JSAPI_KEY" } } --- # TMap JSAPI GL Skill 帮助用户使用腾讯地图 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. 读取 `references/jsapigl/docs/点标记.md` 了解 MultiMarker API 2. 查看 `references/jsapigl/demos/` 中的点标记相关示例 3. 提供完整的代码示例和说明 **用户问题**: "怎么画一个热力图？" **执行流程**: 1. 读取 `references/visualization/docs/热力图.md` 了解 Heat API 2. 查看 `references/visualization/demos/` 中的热力图示例 3. 说明数据格式和配置选项 ## 快速开始模板 基础地图初始化： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>腾讯地图示例</title> <script src="https://map.qq.com/api/gljs?v=3&key={TMAP_JSAPI_KEY}"></script> <!-- 如需可视化功能，添加: &libraries=visualization --> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script> var map = new TMap.Map("map", { zoom: 12, center: new TMap.LatLng(39.984104, 116.307503) }); </script> </body> </html> ``` 可视化图层示例（热力图）： ```javascript // 加载可视化库 // <script src="https://map.qq.com/api/gljs?v=1.beta&libraries=visualization&key={TMAP_JSAPI_KEY}"></script> 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. **API Key**: 使用腾讯地图API需要申请Key，通过环境变量 `TMAP_JSAPI_KEY` 配置，在代码中使用 `{TMAP_JSAPI_KEY}` 引用 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 <!-- 加载多个附加库 --> <script src="https://map.qq.com/api/gljs?v=1&libraries=tools,geometry,service,model&key={TMAP_JSAPI_KEY}"></script> ``` ### 可视化 API 1. **数据格式**: 可视化图层需要特定格式的数据输入 2. **性能**: 大数据量时注意性能优化 3. **层级**: 可视化图层可以设置显示层级 4. **事件**: 支持点击、悬停等交互事件 5. **API使用（重要）**: 所有功能的API调用都必须使用文档中出现的接口、属性、事件，不能自己编造 6. **API传参（重要）**: 所有的API传入参数必须严格遵守api文档中说明的格式，如果不确定就去看看对应demo，包括demo中的数据格式； ## 最佳实践 1. **模块化加载**: 使用模块化方式按需加载API 2. **错误处理**: 添加地图加载失败的处理逻辑 3. **内存管理**: 及时销毁不需要的图层和覆盖物 4. **性能优化**: 大数据集使用聚合或抽稀

path: references/jsapigl/demos/地图操作示例_销毁地图.html
content: <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图销毁监听事件</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    #container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .btnContainer {
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 10000;
    }
    .btnContainer button {
      padding: 10px 14px;
      box-sizing: border-box;
      border: none;
      background-color: #3876ff;
      border-radius: 2px;
      color: #fff;
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 10px;
    }
</style>

<body>
    <div id="container"></div>
    <div class="btnContainer">
        <button class="btn1" onclick="destroy()">销毁地图</button>
    </div>


    <script type="text/javascript">

        var center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        var map = new TMap.Map("container", {
            rotation: 20,//设置地图旋转角度
            pitch: 30, //设置俯仰角度（0~45）
            zoom: 12,//设置地图缩放级别
            center: center//设置地图中心点坐标
        });

        map.on("destroy", function () {
            alert("地图已销毁！");
        })

        function destroy() {
            map.destroy();
        }
    </script>
</body>

</html>

path: references/jsapigl/demos/信息窗口_包含图文信息的信息窗口.html
content: <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>包含图文信息的信息窗口</title>
</head>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    #container {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>

<body onload="initMap()">
    <div id="container"></div>
    <script>
        function initMap() {
            var center = new TMap.LatLng(40.040452,116.273486);//设置中心点坐标
            //初始化地图
            var map = new TMap.Map("container", {
                center: center
            });

            //设置infoWindow
            var infoWindow = new TMap.InfoWindow({
                map: map,
                position: center,
                content: "<div><img src='https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg'><p>Hello World!</p></div>"
            });

        }
    </script>
</body>

</html>

Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)