Skill: vajrabodhi/tmap-jsapi-gl-skill (version 1.0.2)

--- name: tmap-jsapi-gl 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>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

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

<body onload="initMap()">
    <div id="mapContainer"></div>
</body>

</html>
<script>
//注：本例仅为说明流程，不保证严谨

var map;
function initMap(){
	//初始化地图
	map = new TMap.Map('mapContainer', {
		center: new TMap.LatLng(39.980619,116.321277),//地图显示中心点
		zoom:14	//缩放级别
	});

	//WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
	var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
	url+="?from=39.984039,116.307630";  //起点坐标
	url+="&to=39.977263,116.337063";  //终点坐标
	url+="&output=jsonp&callback=cb" ;	//指定JSONP回调函数名，本例为cb
	url+="&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"; //开发key，可在控制台自助创建


	//发起JSONP请求，获取路线规划结果
	jsonp_request(url);
}

//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
function jsonp_request(url){
	var script=document.createElement('script');
	script.src=url;
	document.body.appendChild(script);
}

//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
function cb(ret){
	var coords = ret.result.routes[0].polyline, pl = [];
	//坐标解压（返回的点串坐标，通过前向差分进行压缩）
	var kr = 1000000;
	for (var i = 2; i < coords.length; i++) {
	  coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
	}
	//将解压后的坐标放入点串数组pl中
	for (var i = 0; i < coords.length; i += 2) {
	  pl.push(new TMap.LatLng(coords[i], coords[i+1]));
	}
	
	display_polyline(pl)//显示路线

	//标记起终点marker
	var marker = new TMap.MultiMarker({ 
		id: 'marker-layer',
		map: map,
		styles: {
			"start": new TMap.MarkerStyle({
				"width": 25,
				"height": 35,
				"anchor": { x: 16, y: 32 },
				"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
			}),
			"end": new TMap.MarkerStyle({
				"width": 25,
				"height": 35,
				"anchor": { x: 16, y: 32 },
				"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
			})
		},
		geometries: [{
			"id": 'start',
			"styleId": 'start',
			"position": new TMap.LatLng(39.984039,116.307630307503)
		}, {
			"id": 'end',
			"styleId": 'end',
			"position": new TMap.LatLng(39.977263,116.337063)
		}]
	});

}

function display_polyline(pl){
	//创建 MultiPolyline显示折线
	var polylineLayer = new TMap.MultiPolyline({
		id: 'polyline-layer', //图层唯一标识
		map: map,//绘制到目标地图
		//折线样式定义
		styles: {
			'style_blue': new TMap.PolylineStyle({
				'color': '#3777FF', //线填充色
				'width': 8, //折线宽度
				'borderWidth': 5, //边线宽度
				'borderColor': '#FFF', //边线颜色
				'lineCap': 'round', //线端头方式
			})
		},
		//折线数据定义
		geometries: [
			{
				'id': 'pl_1',//折线唯一标识，删除时使用
				'styleId': 'style_blue',//绑定样式名
				'paths': pl
			}
		]
	});
}

</script>

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/点标记&文本标记_为多个marker添加事件.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>为多个marker添加事件</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%;
    }

    #info {
        position: absolute;
        left: 30px;
        top: 30px;
        background: #FFF;
        width: 350px;
        height: 120px;
        padding: 10px;
        border-radius: 3px;
    }

    p,
    h4 {
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
    }
    h4{
        margin-top: 30px;
    }
    #add {
        position: absolute;
        left:10px;
        top: 10px;
        z-index: 9999;
    }
    #remove{
        position: absolute;
        left: 120px;
        top: 10px;
        z-index: 9999;
    }
</style>

<body>
    <div id="container"></div>
    <div id="info">
        <input type="button" id="add" value="绑定点击事件" onclick="addClick()">
        <input type="button" id="remove" value="解绑点击事件" onclick="removeClick()">
        <h4 id="txt"></h4>
        <p id="markerid">markerID:marker1</p>
        <p id="position">当前marker位置：39.984104,116.407503</p>
    </div>

    <script>
        var txt = document.getElementById("txt");
        var markerID = document.getElementById("markerid");

        var position = document.getElementById("position");

        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化marker
        var marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
            geometries: [{
                "id": "marker1",
                "styleId": 'marker',
                "position": new TMap.LatLng(39.954104, 116.357503),
                "properties": {
                    "title": "marker1"
                }
            }, {
                "id": "marker2",
                "styleId": 'marker',
                "position": new TMap.LatLng(39.994104, 116.287503),
                "properties": {
                    "title": "marker2"
                }
            }, {
                "id": "marker3",
                "styleId": 'marker',
                "position": new TMap.LatLng(39.984104, 116.307503),
                "properties": {
                    "title": "marker3"
                }
            }

            ]
        });

        //监听回调函数（非匿名函数）
        var eventClick = function (evt) {
            markerID.innerHTML = "markerID:" + evt.geometry.id;
            position.innerHTML = "当前marker位置：" + evt.geometry.position.toString();
        }
        function addClick() {
            txt.innerHTML = "绑定点击事件";
            //监听marker点击事件
            marker.on("click", eventClick)
        }

        function removeClick() {
            txt.innerHTML = "解绑点击事件";
            //移除绑定事件
            marker.off("click", eventClick);
        }



    </script>
</body>

</html>

path: references/jsapigl/demos/折线_管道线.html
content: <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管道线绘制</title>
  </head>

  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization" ></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>
  </body>
  <script type="text/javascript">
    function initMap() {
      // 初始化地图
      var map = new TMap.Map('container', {
        zoom: 16, // 地图缩放
        center: new TMap.LatLng(40.06072990948079, 116.19881136848187), // 设置中心点,
        rotation: -30, // 设置地图旋转角度
        pitch: 70, // 设置俯仰角度
        baseMap: {
          type: 'vector',
          features: ['base', 'building3d'], // 隐藏矢量文字
        },
      });
      // visualization.Pipe文档地址：https://lbs.qq.com/webApi/visualizationApi/visualizationDoc/visualizationDocPipe
      var pipeline = new TMap.visualization.Pipe({
        pickStyle: function (item) {
          // 管道图样式映射函数
          if (item.styleId === 'blue') {
            return {
              color: '#a8d4f8',
            };
          } else if (item.styleId === 'orange') {
            return {
              color: '#df5d25',
            };
          }
        },
      });
      pipeline.addTo(map); // 添加至指定地图实例
      // 轨迹图样式映射函数
      pipeline.setData([
        {
          path: [
            // 管道线经纬度点串
            new TMap.LatLng(40.05379447146618, 116.20155948520824, 0),
            new TMap.LatLng(40.06004352839526, 116.19229963143528, 80),
            new TMap.LatLng(40.06004352839526, 116.19229963143528, 0),
            new TMap.LatLng(40.06830098041654, 116.19104553316492, 0),
            new TMap.LatLng(40.06830098041654, 116.19104553316492, 80),
            new TMap.LatLng(40.068245758301266, 116.1981483027048, 80),
            new TMap.LatLng(40.06074739833221, 116.19878108888793, 80),
            new TMap.LatLng(40.06089095044468, 116.20647767774494, 40),
          ],
          radius: 5, // 管道半径，单位为米
          styleId: 'blue', // 样式id
        },
        {
          path: [
            new TMap.LatLng(40.05375583599823, 116.20952192478501, 0),
            new TMap.LatLng(40.06086279776988, 116.2063721974971, 0),
            new TMap.LatLng(40.06086279776988, 116.2063721974971, 40),
          ],
          radius: 5,
          styleId: 'orange',
        },
        {
          path: [
            new TMap.LatLng(40.05379447146618, 116.20155948520824),
            new TMap.LatLng(40.06072990948079, 116.19881136848187),
          ],
          radius: 5,
          styleId: 'orange',
        },
        {
          path: [
            new TMap.LatLng(40.068245758301266, 116.1981483027048, 80),
            new TMap.LatLng(40.068245758301266, 116.1981483027048, 0),
            new TMap.LatLng(40.06074739833221, 116.19878108888793, 0),
            new TMap.LatLng(40.06074739833221, 116.19878108888793, 80),
          ],
          radius: 5,
          styleId: 'orange',
        },
        {
          path: [
            new TMap.LatLng(40.06830098041654, 116.19104553316492, 80),
            new TMap.LatLng(40.06004352839526, 116.19229963143528, 80),
          ],
          radius: 5,
          styleId: 'orange',
        },
        {
          path: [
            new TMap.LatLng(40.06254901759929, 116.19192572726774, 80),
            new TMap.LatLng(40.0624535719374, 116.19862933314357, 80),
          ],
          radius: 5,
          styleId: 'blue',
        },
      ]);
    }
  </script>
</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>

path: references/jsapigl/demos/模型库_GLTF模型加载.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>GLTF模型加载</title>
  </head>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry,model"></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }

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

  <body>
    <div id="container"></div>
    <script>
      var center = new TMap.LatLng(39.994104, 116.307503); // 设置中心点坐标
      // 初始化地图
      var map = new TMap.Map('container', {
        center: center,
        zoom: 19,
        pitch: 50,
        rotation: -20,
      });
      var model = new TMap.model.GLTFModel({
        // GLTFModel文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glModel
        url: 'https://mapapi.qq.com/web/visualization/demo-asset/airplane.glb',
        map: map,
        id: 'model',
        position: new TMap.LatLng(39.994104, 116.307503, 100),
        rotation: [0, -90, 0], // 模型XYZ三轴上的旋转角度
        scale: [20, 20, 30], // 模型在XYZ三轴上的缩放比例
      });
      // model资源加载完成回调
      model.on('loaded', () => {
        console.log('模型加载成功');
      });
    </script>
  </body>
</html>


path: references/jsapigl/demos/多边形&3D棱柱_多边形选中高亮显示.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>MultiPolygon选中高亮显示</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;
  }

  #container {
    width: 100%;
    height: 100%;
  }

  #info {
    display: none;
    position: absolute;
    left: 30px;
    top: 30px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
  }
</style>

<body onload="initMap()">
  <div id="container"></div>
  <div id="info">

  </div>
  <script>
    var map;
    function initMap() {
      var info = document.getElementById("info");
      var center = new TMap.LatLng( 40.04162653200161, 116.27402993329179);

      //初始化地图
      map = new TMap.Map("container", {
        zoom: 16, //设置地图缩放级别
        center: center, //设置地图中心点坐标
      });

      // 多边形数据
      const polygonGeometries = [
        {
          "paths": [
            {
              "lat": 40.041516,
              "lng": 116.271655,
              "height": 0
            },
            {
              "lat": 40.044479,
              "lng": 116.271063,
              "height": 0
            },
            {
              "lat": 40.045154,
              "lng": 116.275173,
              "height": 0
            },
            {
              "lat": 40.045127,
              "lng": 116.275351,
              "height": 0
            },
            {
              "lat": 40.045061,
              "lng": 116.275474,
              "height": 0
            },
            {
              "lat": 40.044007,
              "lng": 116.276271,
              "height": 0
            },
            {
              "lat": 40.043876,
              "lng": 116.276264,
              "height": 0
            },
            {
              "lat": 40.043774,
              "lng": 116.276204,
              "height": 0
            },
            {
              "lat": 40.043697,
              "lng": 116.276093,
              "height": 0
            },
            {
              "lat": 40.043411,
              "lng": 116.274514,
              "height": 0
            },
            {
              "lat": 40.043373,
              "lng": 116.274436,
              "height": 0
            },
            {
              "lat": 40.043313,
              "lng": 116.274408,
              "height": 0
            },
            {
              "lat": 40.042697,
              "lng": 116.274427,
              "height": 0
            },
            {
              "lat": 40.042122,
              "lng": 116.27462,
              "height": 0
            },
            {
              "lat": 40.04204,
              "lng": 116.274607,
              "height": 0
            },
            {
              "lat": 40.042001,
              "lng": 116.274544,
              "height": 0
            },
            {
              "lat": 40.041516,
              "lng": 116.271655,
              "height": 0
            },
          ],
        },
        {
          "paths": [
            {
              "lat": 40.043774,
              "lng": 116.276204,
              "height": 0
            },
            {
              "lat": 40.043824,
              "lng": 116.276332,
              "height": 0
            },
            {
              "lat": 40.04382,
              "lng": 116.27648,
              "height": 0
            },
            {
              "lat": 40.043489,
              "lng": 116.277156,
              "height": 0
            },
            {
              "lat": 40.043233,
              "lng": 116.277385,
              "height": 0
            },
            {
              "lat": 40.042953,
              "lng": 116.277482,
              "height": 0
            },
            {
              "lat": 40.04255,
              "lng": 116.277556,
              "height": 0
            },
            {
              "lat": 40.042484,
              "lng": 116.277524,
              "height": 0
            },
            {
              "lat": 40.042454,
              "lng": 116.277449,
              "height": 0
            },
            {
              "lat": 40.042051,
              "lng": 116.274762,
              "height": 0
            },
            {
              "lat": 40.042063,
              "lng": 116.274677,
              "height": 0
            },
            {
              "lat": 40.042122,
              "lng": 116.27462,
              "height": 0
            },
            {
              "lat": 40.042697,
              "lng": 116.274427,
              "height": 0
            },
            {
              "lat": 40.043313,
              "lng": 116.274408,
              "height": 0
            },
            {
              "lat": 40.043373,
              "lng": 116.274436,
              "height": 0
            },
            {
              "lat": 40.043411,
              "lng": 116.274514,
              "height": 0
            },
            {
              "lat": 40.043697,
              "lng": 116.276093,
              "height": 0
            },
            {
              "lat": 40.043774,
              "lng": 116.276204,
              "height": 0
            },
          ],
        },       
        {
          "paths": [
            {
              "lat": 40.041904,
              "lng": 116.274781,
              "height": 0
            },
            {
              "lat": 40.041939,
              "lng": 116.274843,
              "height": 0
            },
            {
              "lat": 40.04233,
              "lng": 116.27752,
              "height": 0
            },
            {
              "lat": 40.04231,
              "lng": 116.277595,
              "height": 0
            },
            {
              "lat": 40.042262,
              "lng": 116.277644,
              "height": 0
            },
            {
              "lat": 40.041085,
              "lng": 116.277896,
              "height": 0
            },
            {
              "lat": 40.041028,
              "lng": 116.277879,
              "height": 0
            },
            {
              "lat": 40.040999,
              "lng": 116.277816,
              "height": 0
            },
            {
              "lat": 40.040641,
              "lng": 116.275151,
              "height": 0
            },
            {
              "lat": 40.040655,
              "lng": 116.275076,
              "height": 0
            },
            {
              "lat": 40.040701,
              "lng": 116.275027,
              "height": 0
            },
            {
              "lat": 40.041847,
              "lng": 116.274757,
              "height": 0
            },
            {
              "lat": 40.041904,
              "lng": 116.274781,
              "height": 0
            },
          ],
        },
        {
          "paths": [
            {
              "lat": 40.041231,
              "lng": 116.271712,
              "height": 0
            },
            {
              "lat": 40.0413,
              "lng": 116.271761,
              "height": 0
            },
            {
              "lat": 40.041347,
              "lng": 116.271869,
              "height": 0
            },
            {
              "lat": 40.041821,
              "lng": 116.27429,
              "height": 0
            },
            {
              "lat": 40.041793,
              "lng": 116.274441,
              "height": 0
            },
            {
              "lat": 40.041701,
              "lng": 116.274535,
              "height": 0
            },
            {
              "lat": 40.040443,
              "lng": 116.274853,
              "height": 0
            },
            {
              "lat": 40.040906,
              "lng": 116.27805,
              "height": 0
            },
            {
              "lat": 40.039506,
              "lng": 116.278362,
              "height": 0
            },
            {
              "lat": 40.03863,
              "lng": 116.272593,
              "height": 0
            },
            {
              "lat": 40.03869,
              "lng": 116.27238,
              "height": 0
            },
            {
              "lat": 40.038957,
              "lng": 116.272167,
              "height": 0
            },
            {
              "lat": 40.041231,
              "lng": 116.271712,
              "height": 0
            },
          ],
        },
]
      
      let polygonLayer = new TMap.MultiPolygon({
        map,
        geometries: polygonGeometries,
      })

      // 高亮选中图层
      var highlightLayer = new TMap.MultiPolyline({
        map,
        zIndex: 1,
        styles: {
          highlight: new TMap.PolylineStyle({
            'color': 'rgba(188,200,0,0.8)', //填充色
            'width': 4, // 线宽
            'borderColor': '#fff', //边线颜色
            'borderWidth': 1 //边线宽度
          })
        }
      });

      // 高亮区域
      let highlightGeometry = {
        id: 'highlightGeo',
        styleId: 'highlight'
      }

      polygonLayer.on('hover', e => {
        if (e.geometry) {
          // 鼠标选中时高亮区域覆盖
          highlightGeometry.paths = e.geometry.paths;
          highlightLayer.updateGeometries([highlightGeometry]);
        } else {
          // 鼠标移出时取消高亮区域覆盖
          highlightLayer.setGeometries([]);
        }
      })
    }

  </script>
</body>

</html>

path: references/jsapigl/demos/自定义覆盖物_DOMOverlay跨图层碰撞.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>DOMOverlay跨图层碰撞</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>
            var SVG_NS = 'http://www.w3.org/2000/svg';
            // 自定义环状饼图 - 继承DOMOverlay
            function Donut2(options) {
                TMap.DOMOverlay.call(this, options);
            }

            Donut2.prototype = new TMap.DOMOverlay();

            // 初始化
            Donut2.prototype.onInit = function (options) {
                this.position = options.position;
                this.data = options.data;
                this.minRadius = options.minRadius || 0;
                this.maxRadius = options.maxRadius || 50;
                this.zIndex = options.zIndex || 0;
            };

            // 销毁时需解绑事件监听
            Donut2.prototype.onDestroy = function () {
                if (this.onClick) {
                    this.dom.removeEventListener(this.onClick);
                }
            };

            // 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
            Donut2.prototype.createDOM = function () {
                let svg = document.createElementNS(SVG_NS, 'svg');
                svg.setAttribute('version', '1.1');
                svg.setAttribute('baseProfile', 'full');

                let r = this.maxRadius;
                svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));
                svg.setAttribute('width', r * 2);
                svg.setAttribute('height', r * 2);
                svg.style.cssText = `position:absolute;top:0px;left:0px;z-index: ${this.zIndex}`;

                let donut = createDonut2(this.data, this.minRadius, this.maxRadius);
                svg.appendChild(donut);

                // click事件监听
                this.onClick = () => {
                    // DOMOverlay继承自EventEmitter，可以使用emit触发事件
                    this.emit('click');
                };
                // pc端注册click事件，移动端注册touchend事件
                svg.addEventListener('click', this.onClick);
                return svg;
            };

            // 更新DOM元素，在地图移动/缩放后执行
            Donut2.prototype.updateDOM = function () {
                if (!this.map) {
                    return;
                }

                // 经纬度坐标转容器像素坐标
                let pixel = this.map.projectToContainer(this.position);

                // 使饼图中心点对齐经纬度坐标点
                let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
                let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
                this.dom.style.transform = `translate(${left}, ${top})`;
            };

            // 使用SVG创建环状饼图
            function createDonut2(data, minRadius, maxRadius) {
                const colorList = ['#7AF4FF', '#67D7FF', '#52B5FF', '#295BFF'];
                let sum = data.reduce((prev, curr) => prev + curr, 0);
                let angle = 0;

                let group = document.createElementNS(SVG_NS, 'g');
                data.forEach((d, i) => {
                    let delta = (d / sum) * Math.PI * 2;
                    (color = colorList[i]),
                        (r = maxRadius),
                        (startAngle = angle),
                        (endAngle = angle + delta);
                    angle += delta;

                    // 对每个数据创建一个扇形
                    let fanShape = document.createElementNS(SVG_NS, 'path');
                    fanShape.setAttribute('style', `fill: ${color};`);
                    fanShape.setAttribute(
                        'd',
                        [
                            'M0 0',
                            `L${r * Math.sin(startAngle)} ${-r * Math.cos(startAngle)}`,
                            `A${r} ${r} 0 ${delta > Math.PI ? 1 : 0} 1 ${r * Math.sin(endAngle)} ${
                                -r * Math.cos(endAngle)
                            }`
                        ].join(' ') + ' z'
                    );
                    group.appendChild(fanShape);
                });

                // 在中心创建一个圆形
                let circleShape = document.createElementNS(SVG_NS, 'circle');
                circleShape.setAttribute('style', 'fill: #FFFFFF');
                circleShape.setAttribute('cx', 0);
                circleShape.setAttribute('cy', 0);
                circleShape.setAttribute('r', minRadius);
                group.appendChild(circleShape);

                // 绘制文字
                let textShape = document.createElementNS(SVG_NS, 'text');
                textShape.setAttribute('x', 0);
                textShape.setAttribute('y', '0.3em');
                textShape.setAttribute('text-anchor', 'middle');
                textShape.innerHTML = sum;
                group.appendChild(textShape);

                return group;
            }

            window.Donut2 = Donut2;
        </script>
        <script type="text/javascript">
            var map;
            function initMap() {
                // 初始化地图
                map = new TMap.Map('container', {
                    zoom: 12, // 设置地图缩放级别
                    center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
                    rotation: 82.4
                });

                new Donut2({
                    map,
                    position: new TMap.LatLng(39.991143, 116.274421),
                    data: [12, 1],
                    minRadius: 13,
                    maxRadius: 20,
                    collisionOptions: {
                        sameSource: true,
                        crossSource: true,
                        vectorBaseMapSource: true
                    }
                });
                new Donut2({
                    map,
                    position: new TMap.LatLng(39.964471, 116.300526),
                    data: [23, 400],
                    minRadius: 25,
                    maxRadius: 35,
                    collisionOptions: {
                        sameSource: true,
                        crossSource: true,
                        vectorBaseMapSource: true
                    },
                    zIndex: 100
                });

                var marker = new TMap.MultiMarker({
                    map: map,
                    geometries: [
                        {
                            'position': new TMap.LatLng(40.023461749240006, 116.34966865780575), //标注点位置
                            rank: 4
                        },
                    ],
                    collisionOptions: {
                        sameSource: true,
                        crossSource: true,
                        vectorBaseMapSource: true
                    },
                    zIndex: 30
                });

                var label = new TMap.MultiLabel({
                    id: 'label-layer',
                    map: map,
                    styles: {
                        label: new TMap.LabelStyle({
                            color: '#3777FF', // 颜色属性
                            size: 20, // 文字大小属性
                            offset: { x: 0, y: 0 }, // 文字偏移属性单位为像素
                            angle: 0, // 文字旋转属性
                            alignment: 'center', // 文字水平对齐属性
                            verticalAlignment: 'middle' // 文字垂直对齐属性
                        })
                    },
                    geometries: [
                        {
                            styleId: 'label', // 样式id
                            position: new TMap.LatLng(39.976346201186146, 116.33186961161482), // 标注点位置
                            content: 'label碰撞文字' // 标注文本
                        },
                    ],
                    collisionOptions: {
                        sameSource: true,
                        crossSource: true,
                        vectorBaseMapSource: true
                    }
                });

                map.rotateTo(0,{duration: 5000})
            }
        </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: 0;
      padding: 0;
      overflow: hidden;
    }

    #container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .info {
      width: 300px;
      background-color: white;
      padding: 10px;
      font-size: 14px;
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 10000;
    }
  </style>

  <body>
    <div class="info">
      <p></p>
      <p></p>
    </div>
    <div id="container"></div>
    <script type="text/javascript">
      // 初始化地图
      var map = new TMap.Map('container', {
        center: new TMap.LatLng(40.04087989704351, 116.27359195572853), // 地图中心坐标
        zoom: 17, // 地图缩放比例
        pitch: 40, // 地图俯仰角度
      });
      var keyframe = [
        {
          percentage: 0, // 动画过程中该关键帧的百分比,
          rotation: 0, // 地图在水平面上的旋转角度。
        },
        {
          percentage: 0.2,
          rotation: 72,
        },
        {
          percentage: 0.6,
          rotation: 120,
        },
        {
          percentage: 0.8,
          rotation: 288,
        },
        {
          percentage: 1,
          rotation: 360,
        },
      ];

      // map.startAnimation 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
      // 开始动画，通过keyFrames定义关键帧
      map.startAnimation(keyframe, {
        duration: 16000, // 动画周期时长，单位为ms
        loop: Infinity, // 动画周期循环次数，若为Infinity则无限循环，默认为1
      });
      var infoList = document.querySelectorAll('.info p');
      map.on('animation_playing', function (event) {
        infoList[0].innerText = '当前地图旋转角度：' + Math.round(event.frame.rotation);
        infoList[1].innerText = '动画执行进度：' + event.percentage.toFixed(2) + '（区间范围0-1）';
      });
    </script>
  </body>
</html>


path: references/jsapigl/demos/点标记&文本标记_自定义marker样式.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>自定义marker样式</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%;
    }

    #set-style{
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 9999;
        padding: 10px;
    }
</style>

<body>
    <div id="container"></div>
    <input type="button" id="set-style" onclick="setStyle()" value="setStyle">
    <script>
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化marker
        var marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.984104, 116.307503),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });  
        
        function setStyle(){
            //更换marker样式方法
            marker.setStyles({"marker": new TMap.MarkerStyle({
                "width": 70,
                "height": 70,
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png',
                "opacity": 0.5
            })})
        } 
    </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;
			position: relative;
            overflow: hidden;
    }

    #container {
            position: relative;
			width: 100%;
			height: 100%;
    }
    #btn {
			position: absolute;
      		top: 30px;
      		left: 30px;
			z-index: 1001;
			padding: 6px 8px;
    }
</style>

<body onload="initMap()">
    <div id="container"></div>
		<input type="button" id="btn" onclick="changeScale()" value="设置显示比例为2">
		<script type="text/javascript">
			var map, scale = 1;

			function initMap() {
				var center = new TMap.LatLng(39.984104, 116.307503);
				//初始化地图
				map = new TMap.Map("container", {
                    zoom:12,//设置地图缩放级别
                    center: center,//设置地图中心点坐标
				});

				map.on('scale_changed', (e) => {
					console.log(e);
				});
			}
			
			// 改变地图显示比例
			function changeScale() {
				var btn = document.getElementById('btn');
				btn.value = `设置显示比例为${scale}`;
				if (scale === 1) {
					scale = 2;
				} else {
					scale = 1;
				}
				map.setScale(scale);
			}
    </script>
</body>

</html>

path: references/jsapigl/demos/多边形&3D棱柱_多边形点击事件.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>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    #mapContainer {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #info {
        display: none;
        position: absolute;
        left: 30px;
        top: 90px;
        background: #fff;
        border-radius: 5px;
        padding: 10px;
        z-index: 9999;
    }

    #buttonContainer {
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 9999;
    }

    #buttonContainer input {
        background: #fff;
        padding: 10px;
        width: 120xp;
        outline-style: none;
        margin-right: 10px;
        border-radius: 10px;
    }
</style>

<body onload="initMap()">
    <div id="buttonContainer">
        <input type="button" id = "bindClick" value="绑定点击事件">
        <input type="button" id = "unbindClick" value="解绑点击事件">
    </div>
    <div id="info">
    </div>
    <div id="mapContainer"></div>
</body>

</html>
<script>
    var map = null;
    var polygon = null;
    var infoDom = document.getElementById('info');
    var bindBtn = document.getElementById('bindClick');
    var unbindBtn = document.getElementById('unbindClick');
    function initMap() {
      var center = new TMap.LatLng(40.040452, 116.273486); // 设置中心点坐标
      // 初始化地图
      map = new TMap.Map('mapContainer', {
        center: center,
        zoom: 16,
      });
      var buildingPaths = {
        tencent: [
          // 多边形的位置信息
          new TMap.LatLng(40.041117253378246, 116.2722415837743),
          new TMap.LatLng(40.03942536171407, 116.2726277820093),
          new TMap.LatLng(40.03970460886076, 116.27483769345417),
          new TMap.LatLng(40.041404706498625, 116.27443003983899),
        ],
        other: [
          new TMap.LatLng(40.041649, 116.275059),
          new TMap.LatLng(40.040828, 116.275237),
          new TMap.LatLng(40.040934, 116.276079),
          new TMap.LatLng(40.041041, 116.276229),
          new TMap.LatLng(40.041095, 116.276481),
          new TMap.LatLng(40.041058, 116.276787),
          new TMap.LatLng(40.041144, 116.277613),
          new TMap.LatLng(40.041965, 116.277404),
          new TMap.LatLng(40.041879, 116.276653),
          new TMap.LatLng(40.041776, 116.276293),
          new TMap.LatLng(40.041752, 116.276073),
          new TMap.LatLng(40.041768, 116.275864),
        ],
      };
      // 初始化polygon
      polygon = new TMap.MultiPolygon({
        id: 'polygon-layer', // 图层id
        map: map, // 显示多边形图层的底图
        styles: {
          // 多边形的相关样式
          polygon: new TMap.PolygonStyle({
            color: '#3777FF', // 面填充色
            showBorder: false, // 是否显示拔起面的边线
            borderColor: '#00FFFF', // 边线颜色
          }),
        },
        geometries: [
          {
            id: 'polygonTen', // 多边形图形数据的标志信息
            styleId: 'polygon', // 样式id
            paths: buildingPaths.tencent, // 多边形的位置信息
            properties: {
              // 多边形的属性数据
              title: '腾讯北京总部',
            },
          },
          {
            id: 'polygonSina', // 多边形图形数据的标志信息
            styleId: 'polygon', // 样式id
            paths: buildingPaths.other, // 多边形的位置信息
            properties: {
              // 多边形的属性数据
              title: '其他建筑物',
            },
          },
        ],
      });
    }
    var eventClick = function (res) {
      var res = res && res.geometry;
      if (res) {
        infoDom.style.display = 'block';
        infoDom.innerHTML = '多边形ID：' + res.id + '; 样式ID：' + res.styleId + '; 自定义字段：' + res.properties.title;
      }
    };

    // 绑定点击事件
    bindBtn.addEventListener('click', bindClick, false);
    function bindClick() {
      polygon.on('click', eventClick);
      bindBtn.removeEventListener('click', bindClick, false); // 绑定polygon点击事件后，解绑绑定按钮（即只绑定一次polygon）
      unbindBtn.addEventListener('click', unbindClick, false); // 绑定解绑按钮
    }
    // 解绑点击事件
    function unbindClick() {
      infoDom.style.display = 'none';
      polygon.off('click', eventClick); // 解绑polygon
      unbindBtn.removeEventListener('click', unbindClick, false);
      bindBtn.addEventListener('click', bindClick, false);
    }
</script>

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

    #mapContainer {
        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="mapContainer"></div>
    <div class="btnContainer">
        <button class="btn1" onclick="destroy()">销毁自定义栅格图层</button>
        <button class="btn2" onclick="create()">创建自定义栅格图层</button>
    </div>
    <script>
        var center = new TMap.LatLng(26.870355, 100.239704);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map('mapContainer', {
            center: center,
            zoom: 15,
            maxZoom: 16
        });
        //初始化imageTileLayer
        var imageTileLayer;
        create();

        function destroy() {
            imageTileLayer.destroy();
            imageTileLayer = null;
        }
        
        function create() {
            if(imageTileLayer) return;
            imageTileLayer = new TMap.ImageTileLayer({
                getTileUrl: function (x, y, z) {
                    //拼接瓦片URL
                    var url = 'https://3gimg.qq.com/visual/lbs_gl_demo/image_tiles_layers/' + z + '/' + x + '_' + y + '.png';
                    return url;
                },
                tileSize: 256,	//瓦片像素尺寸
                minZoom: 14,	//显示自定义瓦片的最小级别
                maxZoom: 16,	//显示自定义瓦片的最大级别
                visible: true,	//是否可见
                zIndex: 5000,	//层级高度（z轴）
                opacity: 0.95,	//图层透明度：1不透明，0为全透明
                map: map,		//设置图层显示到哪个地图实例中
            });
        }
    </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;
    }

    #mapContainer {
        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 class="btnContainer">
        <button class="btn1">label背景样式1</button>
        <button class="btn2">label背景样式2</button>
    </div>
    <div id="mapContainer"></div>
    <script>
        var center = new TMap.LatLng(40.040074, 116.273519); // 设置中心点坐标
        var centerHeight = new TMap.LatLng(40.040074, 116.273519, 100); // 带高度的坐标
        // 初始化地图
        var map = new TMap.Map('mapContainer', {
            center: center,
            zoom: 18,
        });
        // 初始化label
        var label = new TMap.MultiLabel({
            id: 'label-layer',
            map: map,
            styles: {
                label: new TMap.LabelStyle({
                    color: '#3777FF', // 颜色属性
                    size: 20, // 文字大小属性
                    width: 150, // 文字背景框宽度
                    height: 60, // 文字背景框高度
                    backgroundColor: 'rgba(175,238,238,0.6)', // 文字背景框颜色属性
                    borderWidth: 4, // 文字背景框边线宽度
                    borderRadius: 10,  // 文字背景框圆角
                    borderColor: 'rgba(255,192,203,1.0)', // 文字背景框边线颜色
                }),
            },
            geometries: [
                {
                    id: 'label', // 点图形数据的标志信息
                    styleId: 'label', // 样式id
                    position: center, // 标注点位置
                    content: '腾讯北京总部', // 标注文本
                    properties: {
                        // 标注点的属性数据
                        title: 'label',
                    },
                },
            ],
        });
        document.querySelector('button.btn1').onclick = function () {
            label.setStyles({
                'label': new TMap.LabelStyle({
                    color: '#3777FF', // 颜色属性
                    size: 20, // 文字大小属性
                    width: 150, // 文字背景框宽度
                    height: 60, // 文字背景框高度
                    backgroundColor: 'rgba(175,238,238,0.6)', // 文字背景框颜色属性
                    borderWidth: 4, // 文字背景框边线宽度
                    borderRadius: 10, // 文字背景框圆角
                    borderColor: 'rgba(255,192,203,1.0)', // 文字背景框边线颜色
                })
            });
        };
        document.querySelector('button.btn2').onclick = function () {
            label.setStyles({
                'label': new TMap.LabelStyle({
                    color: '#3777FF', // 颜色属性
                    size: 20, // 文字大小属性
                    width: 160, // 文字背景框宽度
                    height: 40, // 文字背景框高度
                    backgroundColor: 'rgba(255,228,181,1.0)', // 文字背景框颜色属性
                    borderWidth: 8, // 文字背景框边线宽度
                    borderRadius: 0, // 文字背景框圆角
                    borderColor: 'rgba(128,128,0,0.5)', // 文字背景框边线颜色
                })
            });
        };
    </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?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #container {
      width: 100%;
      height: 80%;
    }

    #toolControl {
      position: absolute;
      top: 10px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 252px;
      z-index: 1001;
    }

    .toolItem {
      width: 30px;
      height: 30px;
      float: left;
      margin: 1px;
      padding: 4px;
      border-radius: 3px;
      background-size: 30px 30px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
      box-shadow: 0 1px 2px 0 #e4e7ef;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }

    .toolItem:hover {
      border-color: #789cff;
    }

    .active {
      border-color: #d5dff2;
      background-color: #d5dff2;
    }

    #marker {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
    }

    #polyline {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
    }

    #polygon {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
    }

    #circle {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
    }

    #rectangle {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
    }

    #ellipse {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
    }
  </style>

  <body onload="initMap()">
    <div id="container"></div>
    <div id="toolControl">
      <div class="toolItem active" id="marker" title="点标记"></div>
      <div class="toolItem" id="polyline" title="折线"></div>
      <div class="toolItem" id="polygon" title="多边形"></div>
      <div class="toolItem" id="circle" title="圆形"></div>
      <div class="toolItem" id="rectangle" title="矩形"></div>
      <div class="toolItem" id="ellipse" title="椭圆"></div>
    </div>
    <div>
      绘制：鼠标左键点击及移动即可绘制图形
      <br />
      结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束
      <br />
      中断：绘制过程中按下esc键可中断该过程
      <br />
      撤销：使用ctrl+z或鼠标右键可以在绘制线和多边形时撤销上个绘制点
    </div>
    <script type="text/javascript">
      var map; // 地图
      var editor; // 编辑器
      var activeType = 'marker'; // 激活的图形编辑类型

      // 切换激活图层
      document.getElementById('toolControl').addEventListener('click', (e) => {
        var id = e.target.id;
        if (id !== 'toolControl') {
          document.getElementById(activeType).className = 'toolItem';
          document.getElementById(id).className = 'toolItem active';
          activeType = id;

          editor.setActiveOverlay(id);
        }
      });

      function initMap() {
        // 初始化地图
        map = new TMap.Map('container', {
          zoom: 12, // 设置地图缩放级别
          center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
        });

        // 初始化几何图形及编辑器
        var marker = new TMap.MultiMarker({
          map: map,
        });
        var polyline = new TMap.MultiPolyline({
          map: map,
        });
        var polygon = new TMap.MultiPolygon({
          map: map,
        });
        var circle = new TMap.MultiCircle({
          map: map,
        });
        var rectangle = new TMap.MultiRectangle({
          map: map,
        });
        var ellipse = new TMap.MultiEllipse({
          map: map,
        });
        editor = new TMap.tools.GeometryEditor({
          // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
          map: map, // 编辑器绑定的地图对象
          overlayList: [
            // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
            {
              overlay: marker,
              id: 'marker',
            },
            {
              overlay: polyline,
              id: 'polyline',
            },
            {
              overlay: polygon,
              id: 'polygon',
            },
            {
              overlay: circle,
              id: 'circle',
            },
            {
              overlay: rectangle,
              id: 'rectangle',
            },
            {
              overlay: ellipse,
              id: 'ellipse',
            },
          ],
          actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
          activeOverlayId: 'marker', // 激活图层
          snappable: true, // 开启吸附
        });
        // 监听绘制结束事件，获取绘制几何图形
        editor.on('draw_complete', (geometry) => {
          // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
          // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
          var id = geometry.id;
          if (editor.getActiveOverlay().id === 'rectangle') {
            // 获取矩形顶点坐标
            var geo = rectangle.geometries.filter(function (item) {
              return item.id === id;
            });
            console.log('绘制的矩形定位的坐标：', geo[0].paths);
          }

          if (editor.getActiveOverlay().id === 'polygon') {
            // 获取多边形顶点坐标
            var geo = polygon.geometries.filter(function (item) {
              return item.id === id;
            });
            console.log('绘制的多边形坐标：', geo[0].paths);
          }
        });
      }
    </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;
    position: relative;
  }

  #container {
    width: 100%;
    height: 100%;
  }
  #btn {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1001;
    padding: 6px 8px;
  }
</style>

<body onload="initMap()">
  <div id="container"></div>
  <input type="button" id="btn" onclick="changeMaskLayer()" value="添加遮罩层">
  <script type="text/javascript">
    var map, mask;

    var isMaskExist = false;
    var maskId = 'mask-layer';
    var paths = [
      new TMap.LatLng(40.04116648755316, 116.27218534259555),
      new TMap.LatLng(40.03936793557013, 116.2725983350083),
      new TMap.LatLng(40.03971286702527, 116.27493147278983),
      new TMap.LatLng(40.04147856016226, 116.27450239006976)
    ];

    function initMap() {
      var center = new TMap.LatLng(40.040452, 116.273486);
      //初始化地图
      map = new TMap.Map("container", {
        zoom: 18, //设置地图缩放级别
        center: center, //设置地图中心点坐标
      });

      mask = new TMap.MaskLayer({
        map: map,
        geometries: [],
      });
    }

    function changeMaskLayer() {
      var btn = document.getElementById('btn');
      if (!isMaskExist) {
        mask.add([{
          id: maskId,
          paths: paths,
        }]);
        btn.value = '移除遮罩层';
        isMaskExist = true;
      } else {
        mask.remove([maskId]);
        btn.value = '添加遮罩层';
        isMaskExist = false;
      }
    }
  </script>
</body>

</html>

path: references/jsapigl/demos/点标记&文本标记_Marker随地图放大缩小.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>Marker自动缩放</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: 0;
        padding: 0;
        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 class="btnContainer">
        <button class="btn1" onclick="onOff()">开关Marker自动缩放功能</button>
    </div>
    <div id="container"></div>
    <script type="text/javascript">
        var center = new TMap.LatLng(39.98210863924864, 116.31310899739151);

        // 初始化地图
        var map = new TMap.Map('container', {
            zoom: 17, // 设置地图缩放
            center: new TMap.LatLng(39.98210863924864, 116.31310899739151), // 设置地图中心点坐标，
            pitch: 0, // 俯仰度
            rotation: 0, // 旋转角度
        });

        // MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
        var marker = new TMap.MultiMarker({
            map: map,
            styles: {
                // 点标记样式
                'marker_enableScale': new TMap.MarkerStyle({
                    width: 20, // 样式宽
                    height: 30, // 样式高
                    anchor: { x: 10, y: 30 }, // 描点位置
                    enableRelativeScale: true, // 是否开启相对缩放
                    relativeScaleOptions: {
                        scaleZoom: 17, // 设置marker图片宽高像素单位与zoom级别的瓦片像素相同的层级 如当设置为18时，zoom小于18marker会被缩小直至达到minScale设置的最小缩放倍数，大于时marker直至达到maxScale设置的最大缩放倍数；enableRelativeScale为true时生效，默认18
                        minScale: 0.5, // 设置marker最小缩放倍数，enableRelativeScale为true时生效，默认0.5
                        maxScale: 1, // 设置marker最大缩放倍数，enableRelativeScale为true时生效，默认1
                    }
                }),

                'marker_disabledScale': new TMap.MarkerStyle({
                    width: 20, // 样式宽
                    height: 30, // 样式高
                    anchor: { x: 10, y: 30 }, // 描点位置
                    enableRelativeScale: false, // 是否开启相对缩放
                })
            },
            geometries: [
                // 点标记数据数组
                {
                    // 标记位置(纬度，经度，高度)
                    position: center,
                    id: 'marker',
                    styleId: 'marker_enableScale'
                },
            ],
        });

        // 开关Marker自动缩放功能
        function onOff() {
            marker.updateGeometries({
                id: 'marker',
                position: center,
                styleId: marker.getGeometries()[0].styleId === 'marker_enableScale' ? 'marker_disabledScale' : 'marker_enableScale'
            });
        }

    </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&libraries=geometry"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    #container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #info {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 60px;
        height: 80px;
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        font-size: 18px;
        line-height: 80px;
        text-align: center;
    }

    .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="transform()">路径变为顺时针</button>
        <button class="btn2" onclick="transformAnti()">路径变为逆时针</button>
    </div>
    <div id="info"></div>
    <script type="text/javascript">
        var center = new TMap.LatLng(39.980309851613775, 116.30836114421982);
        //初始化地图
        var map = new TMap.Map("container", {
            zoom: 17,
            center: center
        });
        var paths = [
            new TMap.LatLng(39.98250495981251, 116.30587233910774),
            new TMap.LatLng(39.979150868392445, 116.30612982298771),
            new TMap.LatLng(39.97921663629626, 116.3083828075105),
            new TMap.LatLng(39.97892067935242, 116.31089327579048),
            new TMap.LatLng(39.982554283513245, 116.31100056083596),
            new TMap.LatLng(39.98250495981251, 116.3059933910774),
        ];
        var polylineLayer = new TMap.MultiPolyline({
            map, // 绘制到目标地图
            styles: { // 折线样式定义
                'arrow_animation': new TMap.PolylineStyle({
                    'color': 'rgba(255,0,0,0.6)', //线填充色
                    'borderWidth': 2, //边线宽度
                    'borderColor': '#008FFF', //边线颜色
                    'width': 10, //折线宽度
                    showArrow: true,
                    arrowOptions: {
                        width: 8, // 箭头图标宽度
                        height: 5, // 箭头图标高度
                        space: 50,  // 箭头图标之间的孔隙长度
                        animSpeed: 50 // 箭头动态移动的速度 单位(像素/秒)
                    },
                })
            },
            geometries: [{
                styleId: 'arrow_animation',
                paths: paths
            }],
        });

        var infoDom = document.getElementById('info');
        infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;

        function transform() {
            paths = TMap.geometry.transfromClockwise(paths);
            polylineLayer.setGeometries([{
                styleId: 'arrow_animation',
                paths: paths
            }]);
            infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;
        }

        function transformAnti() {
            paths = TMap.geometry.transfromAntiClockwise(paths);
            polylineLayer.setGeometries([{
                styleId: 'arrow_animation',
                paths: paths
            }]);
            infoDom.innerText = `路线为${TMap.geometry.isClockwise(paths) ? '顺时针' : '逆时针'}`;
        }
    </script>
</body>

</html>

path: references/jsapigl/demos/点标记&文本标记_点击地图添加marker.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>点击地图添加marker</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>
    <div id="container"></div>
    <script>
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化marker图层
        var markerLayer = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map
        });

        //监听点击事件添加marker
        map.on("click", (evt) => {
            markerLayer.add({
            	position: evt.latLng
            });                      
        });
    </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&libraries=geometry"></script>
<style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
      position: relative;
      overflow: hidden;
    }

    #container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #info {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 60px;
      height: 80px;
      width: 420px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 18px;
      line-height: 80px;
      text-align: center;
    }
</style>

<body onload="initMap()">
	<div id="container"></div>
	<div id="info">计算多边形的形心，在该点添加文本标注</div>
	<script type="text/javascript">
      var map;

      function initMap() {
        var center = new TMap.LatLng(40.040452, 116.273486);//设置中心点坐标
        //初始化地图
        map = new TMap.Map('container', {
          center: center,
          zoom: 17,
          baseMap: {
            type: 'vector',
            features: ['base', 'building3d', 'label'],
          }
        });

        var path = [
          new TMap.LatLng(40.041117253378246, 116.2722415837743),
          new TMap.LatLng(40.03942536171407, 116.2726277820093),
          new TMap.LatLng(40.03970460886076, 116.27483769345417),
          new TMap.LatLng(40.041404706498625, 116.27443003983899),
        ];

        // 计算多边形形心
        var position = TMap.geometry.computeCentroid(path);

        var polygon = new TMap.MultiPolygon({
          id: 'polygon-layer', //图层id
          map: map,
          geometries: [
            {
              id: 'polygon', //多边形图形数据的标志信息
              paths: path, //多边形的位置信息
            }
          ]
        });

        // 在形心位置添加文本标注
        var label = new TMap.MultiLabel({
          id: 'label-layer', //图层id
          map: map,
          styles: {
            building:  new TMap.LabelStyle({
              color: '#3777FF', //颜色属性
              size: 20, //文字大小属性
              alignment: 'center', //文字水平对齐属性
              verticalAlignment: 'middle' //文字垂直对齐属性
            })
          },
          geometries: [
            {
              id: 'label',
              styleId: 'building',
              position: position,
              content: '腾讯北京总部',
            }
          ]
        });    

      }
	</script>
</body>

</html>

path: references/jsapigl/demos/自定义覆盖物_DOMOverlay.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>DOMOverlay</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&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>
		var SVG_NS = 'http://www.w3.org/2000/svg';
		// 自定义环状饼图 - 继承DOMOverlay
		function Donut(options) {
			TMap.DOMOverlay.call(this, options);
		}

		Donut.prototype = new TMap.DOMOverlay();

		// 初始化
		Donut.prototype.onInit = function(options) {
			this.position = options.position;
			this.data = options.data;
			this.minRadius = options.minRadius || 0;
			this.maxRadius = options.maxRadius || 50;
		};

		// 销毁时需解绑事件监听
		Donut.prototype.onDestroy = function() {
			if (this.onClick) {
				this.dom.removeEventListener(this.onClick);
			}
		};

		// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
		Donut.prototype.createDOM = function() {
			let svg = document.createElementNS(SVG_NS, 'svg');
			svg.setAttribute('version', '1.1');
			svg.setAttribute('baseProfile', 'full');

			let r = this.maxRadius;
			svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));
			svg.setAttribute('width', r * 2);
			svg.setAttribute('height', r * 2);
			svg.style.cssText = 'position:absolute;top:0px;left:0px;';

			let donut = createDonut(this.data, this.minRadius, this.maxRadius);
			svg.appendChild(donut);
          
          	// click事件监听
          	this.onClick = () => {
				// DOMOverlay继承自EventEmitter，可以使用emit触发事件
				this.emit('click');
			};
			// pc端注册click事件，移动端注册touchend事件
          	svg.addEventListener('click', this.onClick);
			return svg;
		};

		// 更新DOM元素，在地图移动/缩放后执行
		Donut.prototype.updateDOM = function() {
			if (!this.map) {
				return;
			}

			// 经纬度坐标转容器像素坐标
			let pixel = this.map.projectToContainer(this.position);

			// 使饼图中心点对齐经纬度坐标点
			let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
			let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
			this.dom.style.transform = `translate(${left}, ${top})`;
		};

		// 使用SVG创建环状饼图
		function createDonut(data, minRadius, maxRadius) {
			const colorList = [
				'#7AF4FF',
				'#67D7FF',
				'#52B5FF',
				'#295BFF'
			];
			let sum = data.reduce((prev, curr) => prev + curr, 0);
			let angle = 0;

			let group = document.createElementNS(SVG_NS, "g");
			data.forEach((d, i) => {
				let delta = d / sum * Math.PI * 2;
					color = colorList[i],
					r = maxRadius,
					startAngle = angle,
					endAngle = angle + delta;
				angle += delta;

				// 对每个数据创建一个扇形
				let fanShape = document.createElementNS(SVG_NS, 'path');
				fanShape.setAttribute('style', `fill: ${color};`);
				fanShape.setAttribute('d', [
					'M0 0',
					`L${r * Math.sin(startAngle)} ${-r * Math.cos(startAngle)}`,
					`A${r} ${r} 0 ${delta > Math.PI ? 1 : 0} 1 ${r * Math.sin(endAngle)} ${-r * Math.cos(endAngle)}`,
				].join(' ') + ' z');
				group.appendChild(fanShape);
			});

			// 在中心创建一个圆形
			let circleShape = document.createElementNS(SVG_NS, 'circle');
			circleShape.setAttribute('style', 'fill: #FFFFFF');
			circleShape.setAttribute('cx', 0);
			circleShape.setAttribute('cy', 0);
			circleShape.setAttribute('r', minRadius);
			group.appendChild(circleShape);

			// 绘制文字
			let textShape = document.createElementNS(SVG_NS, 'text');
			textShape.setAttribute('x', 0);
			textShape.setAttribute('y', '0.3em');
			textShape.setAttribute('text-anchor', 'middle');
			textShape.innerHTML = sum;
			group.appendChild(textShape);

			return group;
		}

		window.Donut = Donut;
	</script>
	<script type="text/javascript">
		var map;
        function initMap() {
            // 初始化地图
            map = new TMap.Map("container", {
                zoom:12, // 设置地图缩放级别
                center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
			});

			let donutList = [
				new Donut({
					map,
					position: new TMap.LatLng(39.96030543872138, 116.25809083213608),
					data: [12, 24],
					minRadius: 13,
					maxRadius: 20
				}),
				new Donut({
					map,
					position: new TMap.LatLng(39.9986945980902, 116.33598362780685),
					data: [23, 99, 101, 400],
					minRadius: 25,
					maxRadius: 35
				}),
				new Donut({
					map,
					position: new TMap.LatLng(40.02906301748584, 116.25499991104516),
					data: [18, 41, 50],
					minRadius: 20,
					maxRadius: 28
				})
			];

			donutList.forEach((donut, index) => {
				donut.on('click', () => {
					console.log(`第${index}个环形图被点击，位置为${donut.position}`);
				});
			});
		}
    </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>同时加载2个地图</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;
    }

    #containerOne {
        width: 100%;
        height: 45%;
       
    }
    #containerTwo {
        width: 100%;
        height: 45%;
    }
    p{
        margin: 0;
        margin-bottom: 20px;
        text-align: center;
    }
</style>

<body onload="initMap()">
    <div id="containerOne"></div>
    <p>地图一</p>
    <div id="containerTwo"></div>
    <p>地图二</p>
    <script>
        function initMap() {
            //初始化地图一
            var mapOne = new TMap.Map("containerOne", {
                pitch:45,
                center: new TMap.LatLng(39.984104, 116.307503)
            });
            //初始化地图二
            var mapTwo = new TMap.Map("containerTwo", {
                center: new TMap.LatLng(39.984104, 116.307503)
            });
        }

    </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>map中心点偏移</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;
      position: relative;
      overflow: hidden;
    }

    #container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #container-center {            
      width: 10px;            
      height: 10px;            
      background-color: blue;            
      position: absolute;            
      top: 0;            
      bottom: 0;            
      left: 0;            
      right: 0;            
      margin: auto;        
    }
</style>

<body onload="initMap()">
	<div id="container"></div>
	<div id="container-center"></div>
	<script type="text/javascript">
		var map;

		function initMap() {
			var center = new TMap.LatLng(40.040452, 116.273486);
			//初始化地图
			map = new TMap.Map("container", {
				zoom: 17, //设置地图缩放级别
				center: center, //设置地图中心点坐标
				offset: { // 中心点偏移
					x: 0,
					y: 100,
				}
			});

			var markerGeo = {
				id: 'center',
				position: map.getCenter(),
			};

			// 创建一个位于地图中心点的marker
			markerLayer = new TMap.MultiMarker({
				map: map,
				geometries: [
					markerGeo
				]
			});

			// 监听中心点变化事件，更新marker的位置
			map.on('center_changed', () => {
				markerGeo.position = map.getCenter();
				markerLayer.updateGeometries([markerGeo]);
			});
		}
	</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%;
    }
    #info{
        position: absolute;
        left: 30px;
        top:30px;
        background: #FFF;
        width:350px;
        height: 80px;
        padding: 10px;
        border-radius: 3px;
    }
    input{
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 9999;
    }

</style>

<body>
    <div id="container"></div>
    <input type="button" value="自适应显示多个标注" onclick="showMarker()">
    <script>
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });
        var markerArr = [{
                "id": "marker1",
                "styleId": 'marker',
                "position": new TMap.LatLng(39.954104, 116.457503),
                "properties": {
                    "title": "marker1"
                }
            }, {
                "id": "marker2",
                "styleId": 'marker',
                "position": new TMap.LatLng(39.794104, 116.287503),
                "properties": {
                    "title": "marker2"
                }
            },{
                "id": "marker3",
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.984104, 116.307503),
                    "properties": {
                        "title": "marker3"
                    }
            }

            ];
        //初始化marker
        var marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
            geometries: markerArr
        });
        //初始化
        var bounds = new TMap.LatLngBounds();
        
        //设置自适应显示marker
        function showMarker(){
            //判断标注点是否在范围内
            markerArr.forEach(function(item){
                //若坐标点不在范围内，扩大bounds范围
                if(bounds.isEmpty() || !bounds.contains(item.position)){
                    bounds.extend(item.position);
                }
            })
            //设置地图可视范围
            map.fitBounds(bounds, {
                padding: 100 // 自适应边距
            });
        }

    </script>
</body>

</html>

path: references/jsapigl/demos/多边形&3D棱柱_环形(带洞)多边形.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>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

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

<body onload="initMap()">
    <div id="mapContainer"></div>
</body>

</html>
<script>
    function initMap() {
      var center = new TMap.LatLng(40.040452, 116.273486); // 设置中心点坐标
      // 初始化地图
      var map = new TMap.Map('mapContainer', {
        center: center,
        zoom: 16,
      });
      var path = [
        // 环形多边形的位置信息
        [
          new TMap.LatLng(40.041117253378246, 116.2722415837743),
          new TMap.LatLng(40.03942536171407, 116.2726277820093),
          new TMap.LatLng(40.03970460886076, 116.27483769345417),
          new TMap.LatLng(40.041404706498625, 116.27443003983899),
        ],
        [
          new TMap.LatLng(40.040852, 116.273756),
          new TMap.LatLng(40.040458, 116.273804),
          new TMap.LatLng(40.040544, 116.274464),
          new TMap.LatLng(40.040926, 116.274282),
        ],
      ];
      // 初始化polygon
      var polygon = new TMap.MultiPolygon({
        id: 'polygon-layer', // 图层id
        map: map, // 显示多边形图层的底图
        styles: {
          // 多边形的相关样式
          polygon: new TMap.PolygonStyle({
            color: '#00F0CC', // 面填充色
            showBorder: false, // 是否显示拔起面的边线
            borderColor: '#999', // 边线颜色
          }),
        },
        geometries: [
          {
            id: 'polygon', // 多边形图形数据的标志信息
            styleId: 'polygon', // 样式id
            paths: path, // 多边形的位置信息
            properties: {
              // 多边形的属性数据
              title: 'polygon',
            },
          },
        ],
      });
    }
</script>

path: references/jsapigl/demos/矢量数据图层_polygonGeoJSON.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>polygonGeoJSON</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=vector"></script>
<script charset="utf-8" src="https://mapapi.qq.com/web/jsapi/jsapi-gl/assets/polygonGeoJSON.js"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

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

<body>
<div id="container"></div>
<script>
  var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
  //初始化地图
  var map = new TMap.Map("container", {
    center: center,
    zoom: 9
  });
  new TMap.vector.GeoJSONLayer({
    map: map,
    data: polygonGeoJSON,
    polygonStyle: new TMap.PolygonStyle({
      'color': '#3777FF', //面填充色
      'showBorder': true, //是否显示边线
      'borderColor': '#fff', //边线颜色
      'borderWidth': 1 //边线宽度
    }),
  });
</script>
</body>

</html>


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